一、背景与前景
(1)、背景
background-color:#90; /*背景色（以样式表为主，样工式表优先。）*/ background-image:url(); /*设置背景图片（默认为平铺。）*/ background-repeat:no-repeat/repeat-x/repeat-y;no-repeat /*不平铺 repeat-x 橫向平铺 repeat-y 纵向平铺 */ background-position:center; /*背景图片居中 right top背景图片放到右上角*/ background-position:left 100px top 100px;/*离左边100px，离上边100px(可以为负傎)*/ background-attachment:fixed/scroll; /*fixed背景是固定的，不随字体滚动。scoll随字体滚动*/
（2）、字体
font-family:"新宋体"; font-size:12px; font-weight:bold; font-style:italic; /*italic倾斜 normal是正常*/ color:#0FC; text-decoration:underline; /*去掉下划线 overline 上划线 line-through删除 none 去掉下划线*/ text-align:center; vertical-align:middle; /*一行内垂直居中*/ text-height:28px; /*首行缩进量*/ line-height:24px; /*行高*/
二、边界和边框
（1）、边框
/*边框设置*/ border:5px solid blue; border-5px; border-style:solid; border-color:blue; border-top:5px solid blue; border-bottom:5px solid blue; border-left:5px solid blue; border-right:5px solid blue;
（2）、边距
/*四边外边框之间的距离*/ margin:10px; margin-top:10px; margin:20px 0px 20px 0px; /*内容与边框之间的距离*/ padding:10px; padding-top:10px; padding:20px 0 20px 0px;
三、列表与方块
width、height、(top、bottom、left、right) 只有在绝对坐标情况下才有用 list-style:none; /*取消序号*/ list-style:circle; /*序号变为圆圈，样式相当于无序*/ list-style-image:url(); /*图片做序*/ list-style-position:outside;/*序号在内容外*/ list-style-position:inside; /*序号跟内容在一起*/
四、格式与布局
position:fixed; /*锁定位置*/ position:absolute; /*绝对 1、外层没有position:absolute(或relative),那么div相对于浏览器定位 2、如果有，那么div相对于外层边框定位。*/ position:relative; /*相对默认位置的移动*/ float:left; /*左浮动*/ float:right; /*右浮动*/ <div style="clear:both"></div> /*截断流*/ overflow:hidden; /*超出范围时隐藏; soroll,auto超出范围时出滚动条*/ display:none; /*none,不显示;inline-block,显示为块，不自动换行，宽高可设; block,显示为块,自动换行;inline,效果同span标签,不自动换行,宽高不可设*/ visibility:hidden; /*可视性。hidden,隐藏但是占空间;visible,显示。*/
小技巧：
（1）、超链接变色：
a:hover
{
color:red;
}
(2)、DIV居中
如何让一个DIV居中对齐？ 第一步：设置外层的DIV的text-align:center; 第二步：设置里层的DIV的margin:auto 以上两个DIV都不要设置float。