学而时习之，不亦说乎！
--《论语》
CSS:cascading style sheet(层叠样式表)
作用：描述页面的样式。
书写方式：在head标签中添加标签，<style type=”text/css”></style>
注意：css对换行不敏感，对空格也不敏感。但是一定要有标准的语法。冒号，分号都不能省略。
注释：/*注释内容*/
常见属性：
字符颜色：color:red;
字号大小：font-size:40px;
加粗：font-weight:bold;
背景颜色：backgroud-color:red;
下划线：text-decoration:underline;
不斜体：font-style:normal;
斜体：font-style:italic;
不加粗：font-weight:normal;
没有下划线：text-decoration:none;
选择器：
id选择器：#id
类选择器：.class
标签选择器：tagName
后代选择器：两个选择器之间使用空格隔开
交集选择器：两个选择器之间不使用空格隔开
并集选择器：两个选择器之间使用逗号隔开
通配符：*
儿子选择器：两个选择器之间使用>隔开，IE7开始兼容
序选择器：(：first-child),(:last-child)，IE8开始兼容
下一个兄弟选择器：两个选择器之间使用+号隔开，IE7开始兼容
继承性：
有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。
哪些属性能继承？
color、 text-开头的、line-开头的、font-开头的。
这些关于文字样式的，都能够继承； 所有关于盒子的、定位的、布局的属性都不能继承。
层叠性：
多个相同的样式加在同一个标签上时，可以互相重叠。
权重计算：id选择器，class选择器，标签选择器。使用逗号分隔，不能进位（理论上255可以进一位）。
!important：这个加在css属性后面时，可以将该属性的权重提升为无限大，不推荐使用。
盒子模型：
padding：内边距，一共4个小属性，padding-top，padding-right， padding-bottom，padding-left。综合设置时按照上右下左，缺少补对边的规则。
border：边框，有三个要素：粗细、线型、颜色。常用线型：dotted(虚线)，dashed(小正方形)，solid(实线)。其余的可能浏览器有差别，不推荐。
border属性能够被拆开，有两大种拆开的方式：
1） 按3要素:border-width、border-style、border-color
2） 按方向：border-top、border-right、border-bottom、border-left
把每个方向的，每个要素拆开，一共12条语句：
|
1 border-top-10px; 2 border-top-style:solid; 3 border-top-color:red; 4 border-right-10px; 5 border-right-style:solid; 6 border-right-color:red; 7 border-bottom-10px; 8 border-bottom-style:solid; 9 border-bottom-color:red; 10 border-left-10px; 11 border-left-style:solid; 12 border-left-color:red; |
实际使用时使用大属性做整体，然后使用小属性层叠。
标准文档流：
微观现象：1.空白折叠；2.高矮不一，底边对齐；3.自动换行。
标准文档流等级森严。标签分为两种等级：
1） 块级元素
● 霸占一行，不能与其他任何元素并列
● 能接受宽、高
● 如果不设置宽度，那么宽度将默认变为父亲的100%。
2） 行内元素
● 与其他行内元素并排
● 不能设置宽、高。默认的宽度，就是文字的宽度。
在HTML中，我们已经将标签分过类，当时分为了：文本级、容器级。
文本级：p、span、a、b、i、u、em
容器级：div、h系列、li、dt、dd
CSS的分类和上面的很像，就p不一样：
所有的文本级标签，都是行内元素，除了p，p是个文本级，但是是个块级元素。
所有的容器级标签都是块级元素。
转换：
块级元素可以设置为行内元素：display:inline;
行内元素可以设置为块级元素:display:block;
css中一共有三种手段，使一个元素脱离标准文档流：
1） 浮动
2） 绝对定位
3） 固定定位
浮动：
float:left;或者float：right;
浮动元素脱离标准文档流：1.都可以设置宽高。2.浮动元素互相贴靠。3.字围效果。4.没有设置width，会自动收缩为文字宽度。
清除浮动：
浮动的元素会相互影响，带来混乱。
1.给祖先容器增加height。
2.给祖先容器增加clear:both;属性；缺陷：margin失效。
3.隔墙法：a.外墙法，在两个元素之间增加一个div，div设置clear:both;属性，两个元素就不会被浮动影响。b.内墙法，在第一个元素内部最后增加一个div，div设置clear:both;属性，两个元素就不会被浮动影响。
4.给父容器增加overflow:hidden;属性。
浏览器兼容问题：
第一，IE6，不支持小于12px的盒子，任何小于12px的盒子，在IE6中看都大
解决办法很简单，就是将盒子的字号，设置小（小于盒子的高），比如0px。
height: 4px;
_font-size: 0px;
第二，IE6不支持用overflow:hidden;来清除浮动的
overflow: hidden;
_zoom:1;
margin：
margin塌陷现象：标准文档流中，两个盒子竖直方向的margin不会叠加，以大的margin为准。
盒子居中：margin:0 auto;
注意：
1） 使用margin:0 auto; 的盒子，必须有width，有明确的width
2） 只有标准流的盒子，才能使用margin:0 auto; 居中。
也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto;
3） margin:0 auto;是在居中盒子，不是居中文本。
文本的居中，要使用 text-align:center;
IE6双倍margin:
在IE6，当出现连续浮动的元素，携带和浮动方向相同的margin时，队首的元素，会双倍marign。
解决方案：
1）使浮动的方向和margin的方向，相反。
2）使用hack,给第一个盒子一半margin：_margin-left:20px;
IE6的3pxbug：
出现这个说明代码不标准，不要用儿子的margin，用父亲的padding。
定位：
相对定位：position:relative;
1.相对定位，就是微调元素位置的。让元素相对自己原来的位置，进行位置调整。
2.相对定位不脱标，真实位置是在老家，只不过影子出去了，可以到处飘。
3.用left、right来描述盒子右、左的移动；用top、bottom来描述盒子的下、上的移动。
|
position: relative; top: 10px; left: 40px; |
绝对定位：position:absolute;
1.绝对定位的盒子，是脱离标准文档流的。所以，所有的标准文档流的性质，绝对定位之后都不遵守了。绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block;就可以设置宽、高了。
2.绝对定位的参考点，如果用top描述，那么定位参考点就是页面的左上角，而不是浏览器的左上角。
3.如果用bottom描述，那么就是浏览器首屏窗口尺寸，对应的页面的左下角。
4.一个绝对定位的元素，如果父辈元素中出现了也定位了的元素，那么将以父辈这个元素，为参考点。
5.绝对定位的儿子，无视参考的那个盒子的padding。
6.绝对定位的盒子居中
绝对定位之后，所有标准流的规则，都不适用了。所以margin:0 auto;失效。
|
600px; height: 60px; position: absolute; left: 50%; top: 0; margin-left: -300px; → 宽度的一半 |
非常简单，当做公式记忆下来。就是left:50%; margin-left:负的宽度的一半。
固定定位：position:fixed;
1.固定定位，就是相对浏览器窗口定位。页面如何滚动，这个盒子显示的位置不变。
2.固定定位脱标！
3.IE6不兼容。
z-index
● z-index值表示谁压着谁。数值大的压盖住数值小的。
● 只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的东西不能用。
● z-index值没有单位，就是一个正整数。默认的z-index值是0。
● 如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。
● 从父现象：父亲怂了，儿子再牛逼也没用。