CSS基础知识

选择器

1. 标签选择器：选中所有标签（div,span,p等）
2. id选择器：#id（id区分大小写）
3. 类选择器：.classname（同时属于多个类用空格隔开，如：<p class="title0 title2">music</p>）
4. 后代选择器：用空格隔开（选中的是所有后代，不止儿子），语法：.div1 p{ color: red; }
5. 交集选择器：中间用.隔开，一般以标签开头，语法：p.yi{font-size: 50px;}
6. 并集选择器：中间用,隔开
7. 通配符*：所有
   CSS层面尽量不要用id，id留给js用

CSS3选择器

1. 儿子选择器：中间用>隔开，语法：div>p{color:blue;}
2. 序选择器：冒号后面加first-child/last-child/nth-child(2n)，语法：ol li:first-child{color: red;}
3. 兄弟选择器：中间用+号隔开，表示紧跟着的那个元素，没多大用

常见属性

1. 字体颜色：color:red
2. 字体大小：font-size:60px
3. 背景颜色：background-color:
4. 加粗：font-weight: bold
5. 斜体：font-style: italic
6. 下划线：text-decoration: underline
7. 去除列表样式：list-style:none

继承性

1. 不是所有的属性都能继承
2. 能继承的属性：color,text,line,font开头的（和文字相关的）

层叠性

1. 当多个样式作用到同一个标签时只有一个样式会生效
2. 权重：id选择器>类选择器>标签选择器（255进位，即255个标签选择器等于1个类选择器）
3. 如果权重一样，以后出现的为准
4. 如果不能直接选中，继承的影响为0
5. 如果没有一个样式能直接选中该标签，但有多个父标签有样式，则继承最近的父标签的样式
6. 可以在单个属性（而不能是整个选择器）后面加上!important提供权重，提高后该属性的权重为无穷大，语法：dd{color: blue !important;}
7. 添加!important只对直接选中的元素有效，而对继承性和就近原则没有影响

盒模型

1. width,heigth,padding,border,margin的示例如下图：
   
2. 背景颜色会填充border以内的区域
3. padding的顺序：上右下左，示例：padding:10px 20px 10px 100px: 后面的四个值的顺序为上右下左
4. border示例：div{border: 10px,dashed,red;}，3个属性可拆开成border-width/style/color，也可按上右下左的顺序拆开成bordet-top/right/bottom/left，还能拆成border-top-width的形式
   第二个属性的所有样式参考：http://www.w3school.com.cn/tiy/t.asp?f=csse_border-style

标准文档流

1. 空白折叠现象：多个空白折叠成一个
2. 元素按顺序从头到尾显示
3. 高矮不齐，底边对齐：多种高矮不同的图片显示时，都会向底边对齐
4. 一行写不满，自动换行
5. 标签分为两种等级：块级元素和行内元素
6. 块级元素：霸占一行，不能与其它元素并列；能设置宽和高，不设置默认等于父亲的宽高
7. 行内元素：与其它行内元素并排；不能设置宽高，宽度即为文字的宽度
8. 所有文本级标签处理p以外都是行内元素，所有容器级标签都是块级元素
9. 块级转为行内元素：div{ display: none; }
10. 行内元素转为块级：span{ display: block; }
11. 标准流中会出现margin塌陷的现象，即垂直方向的两个盒子同时设置了margin，两个盒子之间的margin以大的那个为准，水平方向不存在这个问题，不是标准流也不会有这个问题
12. margin的值为auto时表示根据情况尽可能设到最大，左右都设置则居中，左右居中上下0可简写为margin:0 auto，只在标准流中能用，且必须明确设置width
13. margin本质上是用来描述兄弟之间的距离，最好不要用来处理父子之间的距离，父子之间的距离用padding
14. 首行空两个文字的格：text-indent:2em;

脱离标准流的三种方式

浮动

1. 浮动让块级元素可以并排，让行内元素可以设置宽高，实际上设置了浮动以后元素就不分块级元素和行内元素了，即该元素脱离了标准流
2. 浮动的元素会相互贴靠，浏览器装不下时会尝试贴靠上一个元素
3. 浮动的元素挡住不浮动的元素中的字体时，会有字体环绕效果
4. 浮动元素的宽高不能超过其父元素
5. 语法：float:left/right
6. 清除浮动：让浮动不影响其他盒子的浮动
7. 清除浮动方法①：给祖先加高度。但实际工作中很少用高度width属性，因为盒子能够被内容自动撑高，但浮动的元素不会撑高盒子
8. 清除浮动方法②：给盒子加上clear:both属性，表示自己盒子内的浮动不受其他盒子浮动的影响，但由于盒子没有高，使用margin属性会受影响
9. 清除浮动方法③：隔墙法。在两个盒子中间放置一个空白的盒子作为墙，给墙设置clear:both属性清除浮动，设置width属性作为两个盒子的间距
10. 清除浮动方法③的变种：内墙法。把墙放到盒子的最后一个元素中去，不仅可以清除浮动，还可以让浮动的元素把盒子的高撑起来
11. 清除浮动方法④：使用overflow:hidden。给盒子添加overflow:hidden属性后盒子也可以被浮动的子元素撑高，这是浏览器的一种渲染机制，没有为什么，这种方法最好用
12. 清除浮动总结：只要盒子有高，浮动就不会相互影响。但不用显示地设置盒子的高，可以利用以上几个方法让浮动的子元素把盒子的高撑起来

IE6兼容问题

1. 加了下划线的属性只有IE6能识别，可用于针对IE6做兼容
2. IE6，7不支持小于12px的小盒子，小于12px的盒子都会有12px那么大，设置_font-size=0可以解决这个问题
3. IE6不支持用overflow:hidden来清除浮动,解决：添加_zoom:1
4. 双倍margin：当出现连续浮动的元素时，margin的方向和浮动的方向相同时队首元素会出现双倍margin，解决：margin和浮动方向相反，然后用padding

文字属性

1. line-height：设置行高，文字在自己的行高中的居中的，但如果不能被2整除，则下面的空白会比上面的空白多1像素，所以行高，字号最好都设置为偶数，这样就能保证一定能被2整除，行高可以用百分比设置，表示为字号的百分之几，一般都大于100%
2. 行高设置为盒子高时可以实现单行文字的居中效果，多行文字的居中只能用padding
3. font:12px/24px 宋体;等价于font-size:12px; line-height:24px; font-family:宋体;
4. 系统默认会有的中文字体：微软雅黑(Microsoft YaHei)，宋体(SimSun)，黑体，英文一般用：Arial，Times New Roman
5. font-family:”Arial”,”宋体”;中间的逗号表示备选字体，一般把英文字体写在前面

其他

1. 伪类：同一个标签，根据状态不同有不同的样式，伪类用:号隔开
2. a标签的4个伪类：link,visited,hover,active,并且必须按这个顺序书写
3. 伪类用于设置文字的样式，背景
4. 颜色的rgb表示法：rgb(58,58,58)，十六进制表示法：#223344，可简化为#234