---恢复内容开始---
本文用自己的理解，总结网上或者自身经历的问题，加以汇总，方便查找：
一、浏览器默认样式
1、浏览器处理css&html
a、css作用范围：盒子模式、浮动、定位、背景、字体
2、css布局方式：
- 经典三列布局
- Bootstrap栅格布局
- 百度首页布局
- 微博布局
- 人人网布局
- 瀑布流布局
3、层叠样式表：
a、层叠：层叠就是浏览器对多个样式来源进行叠加，最终确定结果的过程。即对相同标签的样式融合，且内联>内部>外部(!important可将样式提到*)，但实际有5个--
最底层是浏览器默认样式，然后是用户样式--字体等设置
4、浏览器默认样式分析：
a、display:table 和 block 最大的区别在于：包裹性。 提到包裹性，就不得不提一下float和absolute
b、table-cell是多列布局的最新解决方案，比使用float更加有效（不兼容IE6、7）
c、line-height:1.12 针对英文没问题，但是中文看起来很别扭
另外，1.12是一个相对值（即1.12em），与文字有关的距离设置最好用相对值，这样做的好处就是当自定义了1em的绝对px时，line-height也会跟着变
d、inline-block：
e、<br/>为何能实现换行：:before, :after { white-space: pre-line }
5、浏览器对html的处理:浏览器将载入的html变为dom树，但是此时没有任何显示样式。所以显示的样式，都是css定义的，浏览器只会通过css来渲染视图样式。
6、block元素：默认为block的元素，是默认样式规定的，不是浏览器的内核规定的
7、display：list-item：ul，li标签使用此样式
8、display：table： <table>和<div>在容器尺寸上最大区别是什么？答案是——div宽度和父容器相同，table宽度根据内容而定——即table具有“包裹性”。
盒子的宽度将在内容宽度的基础上再增加（padding宽度 + border宽度 + margin宽度）之和
9、display：table-cell：多列布局：
10、body样式：由于*的优先级最低，所以先用*{margin:0}来规范，在统一设置body的margin。
Line-height是具有继承性的，在body中设置了，body下面所有的文字都会继承生效，最好使用相对值。
11、em & px：em是相对的，浏览器默认情况下令1em === 16px，由于font-size和margin都是通过em来定义的，当em被修改时，不管字体大小修改，
margin值也会跟着修改。这就是em好用之处！从现在开始，与字体大小有关的css，全部都用em。
12、inline-block：能被父容器居中、能设置高度宽度和margin、不会像table或div那样占一行。与table相比既有包裹性 又不会占一行
13、<br>样式：换行是white-space: pre-line效果。
二、选择器
1、选择器分类：标签选择器、属性选择器。
2、多标签选择器：
选择一个祖先的所有子孙节点，例如 div p{…}包括div的2级三级。。。
选择一个父元素的所有直属节点，例如 div > p{…}仅一级
某一个元素紧挨着的兄弟节点，例如 li + li{…}
某一个元素的所有同胞节点，例如 span ~ a{…}
3、属性选择器：除id、class两种特殊外，还可通过属性名选择：img[title]{… }，属性名和属性值选择：input[type=’text’]{…}
4、伪类:伪类分为UI伪类和结构化伪类。
UI伪类:
结构化伪类:
5、伪元素：
afert&before可以为标签添加前后内容
6、选择器的优先级:“I-C-E”计算公式==>Id\Class\Element,遇到一个id就往特指度数值中加100，遇到一个class就往特指度数值中加10，遇到一个element就往 特指度数值中加1,越大优先级越高。如
|
div p#large ul.list li |
114 |
!important优先级最高，高于上面一切。* 选择器最低，低于一切。不同选择器的特指度比较时，不区分加载的顺序（相同选择器在层叠时，后加载的覆盖前加载的）
但：直接设置的样式要高于继承的样式，不管优先级多大
得出red
三、盒模型：
1、css的展现分为文字和块，
文字：例如设置字号、字体、颜色、背景色、是否加粗等
块：盒子模型，float，position，display
2、盒子：
margin，padding和border(content)
3、盒子的宽：
在盒子模型中，我们设置的宽度都是内容宽度，不是整个盒子的宽度。而整个盒子的宽度是：（内容宽度 + border宽度 + padding宽度 + margin宽度），这样 我们改四个中的其中一个，都会导致盒子宽度的改变。这对我们来说不友好。
解决方法：添加box-sizing:border-box，宽度变为宽度是内容 + border + 边框的宽度（不包括margin）
4、margin的纵向重叠：
纵向的margin是会重叠的，大的会把小的“吃掉”，且margin与border内无关，意义在于布局
5、常用的三角形：
transpanent设置透明，顺序为上右下左
四、浮动
1、float多列布局：实际应用table，但table代码量大不利于SEO，才采用float，而float原本意义为文字环绕--图片float:left之后，文字会环绕图片。
2、float的破坏性：被设置了float的元素会脱离文档流。也正是为了文字的环绕
3、float的包裹性：float也具有包裹性，且display仍是block
4、float的清空格：
由于float会导致节点脱离文档流结构，所以正常img之间的换行符不生效
5、清除浮动的4种方法：
为父元素添加overflow:hidden；
浮动父元素；
clear:both--
clearfix:原理与clear：both相同
五、float布局
1、三列布局
2、两列布局
3、bt的栅格布局：也是float
六、display
1、块元素和流元素
2、display详细定义
- list-item：通过它可以模拟li列表样式；
- table：也是一个“块”，但和block相比，table具有包裹性；
- table-cell：最新的多列布局解决方案
- inline：就是文字和图片，你设置宽度和高度是无效的，通过监控可以知道，该元素实际的宽度和高度都是auto
- block；即盒模型
- inline-block：以流形式排列，但单个又是块（可设置宽度等）
如何把inline-->block: display:block;
display:table;
float:left;
position:absolute/fixed
七、定位
1、position：static：即不设置定位
2、position:relative:即相对定位，relative会导致自身位置的相对变化，而不会影响其他元素的位置、大小的变化。这是relative的要点之一。还有第二个要点，就是position:relative/absolute/fixed都会产生一个新的文档流
3、position:absolute：递归查找父元素，如果找到一个设置了position:relative/absolute/fixed的元素，就以该元素为基准定位，如果没找到，就以浏览器边界定位(实际是画布的左上角)
①absolute元素脱离当前文档流。和relative不同，其他三个元素的位置重新排列了。只要元素会脱离文档结构，它就会产生破坏性，导致父元素坍塌。
②absolute元素具有“包裹性”。
③设置top、left时 是相对于当前文档流而言
- 设置absolute会使得inline元素被“块”化
- 设置absolute会使得元素已有的float失效
- absolute会使元素悬浮在页面里，如果有多个悬浮元素，层级如何确定？答案是“后来者居上”
4、position:fixed:与abolute不同fixed不管是哪个文档流，都在你设置的位置，永远相对于画布左上角
---恢复内容结束---