CSS：Cascading Style Sheet，层叠式样式表，最新版本是CSS3，结合JS做非常炫酷的页面特效。
1、常用选择器
各选择器的权重问题：id选择器的权重 > 类选择器的权重 > 标签选择器
选择器具有层叠性和继承性，有继承的属性关于文字的、列表的，通过继承而来的选择器权重，一定比不过直接选中的。
2、 文字属性
font-size、font-weight、text-decoration、font-style、font-family
3、 布局
width、height、float、background-color、margin、position
4、 盒模型
width（盒宽）、height（盒高）、padding（内边距）、border（边框）、margin（外边距），盒模型的作用就是用来布局。要点：
(1)padding、border是外扩的，不含在width、height里面；
(2)边框三要素：粗细(border-width)、线型(border-style)、颜色(border-color)，边框常用作分界线和标识符号；
(3) padding部分有颜色，并且不能单独给padding区域设置颜色。（padding-top (上)、padding-right (右)、padding-bottom (下)、padding-left (左) ）padding不接受负值。
l padding:10px 20px 30px 40p; 表示：上右下左。
l padding:10px 20px 30px; 表示：上、左右、下。
l padding:10px 20px; 表示：上下、左右。
(4) 边框有三要素：粗细(border-width)、线型(border-style)、颜色(border-color)。通常使用语句border：1px solid red; 边框通常做分割线。
(5)margin属性只用在相同级别的盒模型之间，不用在继承关系之间。（margin、margin-top（上外边距）、margin-right（又外边距）、margin-bottom（下外边距）、margin-left）（左外边距），margin可接受负值。
l margin:10px 20px 30px 40px;也是上右下左（顺时针）的顺序。
l margin:10px 20px;表示上下、左右的外边距。
(6)盒子居中必须设置margin:0 auto; 表示盒子本身居中。文本居中是text-align:center; 表示文字在盒子中居中, 另外，单行文字在盒子中居中：行高等于盒子高。
(7)两个垂直外边距相遇时会合并成一个外边距，合并之后的外边距的高度等于两个发生合并的外边距的高度中的较大者，而不是相加之和。只有普通文档流中的块框的垂直外边距才会发生外边距合并，行内框、浮动框或相对定位之间的外边距不会合并。
(8) margin属性只用在相同级别的盒模型之间，不用再继承关系之间。
5、标准文档流
做网页特别像写word文档，而不像用画图软件，整个网页的元素之间会有互相影响。这就是标准文档流。
l 将块级元素变为行内元素： display:inline;
l 将行内元素转为块级元素： display:block;
6、浮动（float）
浮动的元素一律会并排、一律能够设置宽度高度，并且脱离标准文档流，不区分是行内还是块级元素。
清除浮动的方法：浮动流、标准流配合，将浮动关闭在一个盒子里。
l 方法1：设置高度
l 方法2：overflow:hidden;
l 方法3：clear:both;写在后面的盒子
l 方法4：添加内墙法，即在浮动的元素的后面添加一个兄弟，也就是说给父亲添加最后一个儿子，这个盒子clear:both;
l 方法5：隔墙法
（这部分会在CSS使用技巧一文中做详细介绍）
7、定位属性
1） position:relative; 相对定位：用于微调元素的位置，相对定位之后就可以用top、left、right、bottom这些词语微微调整这个盒子的位置。调整是相对自己原来的位置而言的，并没有释放原来的位置。
2） position:absolute; 绝对定位：默认情况下会以网页的左上角进行定位，给父元素设置相对定位之后，子元素就能够以父亲为参考点进行绝对定位。
绝对定位5个用途：压盖、遮罩、垂直居中、出版心、运动。网页设计中多用“子绝父相”，这部分会在CSS使用技巧中做详细介绍。
3） position:fixed; 固定定位：永远固定在一个位置，特殊情况下使用。
BY：HW-WP
苏公安网备 32011402010933号