一、css盒模型
Padding、border、margin 包括上下、和左右
盒子宽度 = content（自身宽度） + padding + border + margin
盒子高度 = content（自身高度） + padding + border + margin
Padding、border、margin 包括上下、和左右
盒子宽度 = content（自身宽度 = border + padding）+margin
盒子高度 = content（自身高度 = border + padding）+margin
*：为了兼容IE老版本浏览器，可以使用css3中 box- sizing:border-box，将现代浏览器的盒模型改为IE中的和模型
二、Position定位
Position取值：
1、Inherit：继承父元素属性
2、Static：默认状态，即遵循正常文档流，无定位
3、Relative：相对定位，相对于自身定位，对象不可层叠，但可以用位置偏移属性（left、top、right、bottom），在正常文档流中偏移位置
4、Absolute：绝对定位，DOM对象脱离正常文档流，且相对于最近一级有定位属性的DOM定位，可以用位置偏移属性left、top、right、bottom）和z-index层叠属性
4.1、若多个子节点都设置了postion：absolute属性，并且均没有设置z-index属性，则最后一个默认在最顶层
4.2、若两个节点A、B都设置了postion：absolute属性，并且A、B的子元素都设置了postion：absolute属性，
且A的层级（z-index）值比B的层级（z-index）值高，则A的子元素在B的子元素上显示，且无论B的子元素z-index多大
5、Fixed：固定定位，相对于浏览器窗口定位，
5.1、如果当前DOM设置了position：fixed，且父DOM设置了transform则已父元素为基准定位
Position：absolute：属性常见问题
破坏性：当子元素设置绝对定位，会导致父元素塌陷，
包裹性：当父元素设置决定定位时，则默认宽度会变成自适应内部元素宽度
Position：还可以实现隐藏
position:absolute; text-indent:-9999em position: absolute; clip: rect(1px 1px 1px 1px);/*兼容IE6、IE7*/
clip: rect(1px, 1px, 1px, 1px);
position实现隐藏的优缺点
1、会产生重绘，但不会产生页面回流
2、使用与行内元素和块级元素
Display、Jquery实现隐藏的局限性：
1、对于行内元素有局限性
2、jQuery的显示隐藏也是先存储DOM元素的display状态然后用过JS动态改变
三、float浮动
Float取值：
1、left：DOM元素向左浮动
2、ght：DOM元素向右浮动
Tips：常用此特性做文字环绕布局
清除浮动方法
1、 父元素设置 overflow: hidden
原理：overflow: hidden本意是超出部分隐藏，但如果子元素设置了浮动（不占据普通文档流），
1、 如果父元素容器默认高度是auto，那么不计算子元素内浮动元素高度就会裁剪，就有可能会裁掉float元素，
2、 父元素没有明确容器高度情况下，他会触发一次计算（这个计算是由BFC（Block formatting context：块级格式化上下文）产生），只有计算全部内容的高度，才能确定在什么位置hidden，这次计算是要将浮动元素的高度也计算进去，所以达到了清除浮动的目的，只要overflow的值不是visible 都会触发计算。
更多关于BFC资料：http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
2、 父元素设置 clear: borth
3、 父元素添加伪元素
clearfix{ zoom:1; /*兼容IE6、IE7，IE6、IE7用这个属性清除浮动来裹的内部元素*/ } .clearfix:after{ content:" "; /*在元素末尾添加一个空的元素*/ display:block; /*并设置这个空元素为块级元素*/ height:0; /*行高设置为0*/ font-size:0; /*font-size设置为0*/ visibility:hidden; /*设置元素不可见，但占用文档流空间*/ clear:both; /*清除左右两边浮动*/ }
4、 Clearfix原理：
1、在IE6, 7下zoom: 1会触发hasLayout，从而使元素闭合内部的浮动。
2、在标准浏览器下，.clearfix:after这个伪类会在应用到.clearfix的元素后面插入一个clear: both的块级元素，从而达到清除浮动的作用。
3、在需要清除浮动的时候，只要写一个.clearfix就行了，然后在需要清浮动的元素中 添加clearfix类名就好了。
四、vertical-align
|
值 |
描述 |
|
长度 |
通过距离升高（正值）或降低（负值）元素。'0cm'等同于'baseline' |
|
百分值 – % |
通过距离（相对于line-height值的百分大小）升高（正值）或降低（负值）元素。'0%'等同于'baseline' 例：line-height:10px; vertical-align:20% 则 10*2% = 2px |
|
baseline |
默认。元素的基线与父元素的基线对齐。 |
|
sub |
降低元素的基线到父元素合适的下标位置。 |
|
super |
升高元素的基线到父元素合适的上标位置。 |
|
top |
把对齐的子元素的顶端与line box顶端对齐。 |
|
text-top |
把元素的顶端与父元素内容区域的顶端对齐。 |
|
middle |
元素的中垂点与 父元素的基线加1/2父元素中字母x的高度 对齐。 |
|
bottom |
把对齐的子元素的底端与line box底端对齐。 |
|
text-bottom |
把元素的底端与父元素内容区域的底端对齐。 |
|
inherit |
采用父元素相关属性的相同的指定值。 |
Vertical-align对那些元素起作用：
图片、按钮、单/复选框、单/多行文本框等inline-block元素
Vertical-align 属性的表现
改变Vertical-align属性值的时候，每次其影响的是元素本身，对兄弟inline元素无影响
让Vertical-align失效
可以通过设置display: block、浮动、或者绝对定位。
http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/
五、回流与重绘
定义：
1、当render tree中的一部分（或者全部），因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。
2、当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
什么操作会引起重绘、回流：
1、添加、删除元素(回流+重绘)
2、隐藏素，display:none(回流+重绘)，visibility:hidden(只重绘，不回流)
3、移动元素，比如改变top,left(jquery的animate方法就是,改变top,left不一定会影响回流)，或者移动元素到另外1个父元素中。(重绘+回流)
4、对style的操作(对不同的属性操作，影响不一样)
5、还有一种是用户的操作，比如改变浏览器大小，改变浏览器的字体大小等(回流+重绘)
强制浏览器回流属性：
1. offsetTop, offsetLeft, offsetWidth, offsetHeight
2. scrollTop/Left/Width/Height
3. clientTop/Left/Width/Height
4. width,height
5. 请求了getComputedStyle(), 或者 IE的 currentStyle
如何减少回流、重绘
减少回流和重绘，其实就是建好对rendertree的操作（合并多次多DOM和样式的修改），并减少对style信息的请求和修改。
1、直接改变className，如果动态改变样式，则使用cssText（考虑没有优化的浏览器）
2、让要操作的元素进行”离线处理”，处理完后一起更新
a) 使用DocumentFragment进行缓存操作,引发一次回流和重绘；
b) 使用display:none技术，只引发两次回流和重绘；
c) 使用cloneNode(true
or false) 和 replaceChild
技术，引发一次回流和重绘；
3、不要经常访问会引起浏览器flush队列的属性，如果你确实要访问，利用缓存
4、 让元素脱离动画流，减少回流的Render Tree的规模。
资料：http://www.css88.com/archives/4996
http://kb.cnblogs.com/page/64064/8/
http://www.planabc.net/2009/04/13/reflow/
五、BFC、IFC
定义：
BFC：Block formatting context（块级格式化上下文）属性为block、list-item、table（我理解为块级元素）会生成block-level box，并参与Block formatting context
IFC：Inline formatting context（行级格式化上下文）属性为 inline, inline-block, inline-table 的元素（我理解为行内元素）会生成inline-level box。并且参与 inline formatting context；
BFC布局规则：
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin值相同时会发生重叠，不等时两者间的margin值为较大者的值margin值（float后的元素除外）
- 每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠，常用来清除浮动和布局。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算
那些元素会生成BFC：
- 根元素
- float属性不为none 浮动框
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex 非块框的块容器
- overflow不为visible的块框。这就是为什么我们经常用overflow:hidden去清除内部浮动的原因
- 触发IE的hasLayout特性
触发IEhasLayout特性的属性有：
Position: absolute、 display:inline-block、float 不等于 none、 width不等于auto、height不等于auto、Zoom不等于normal writing-mode:tb-rl
IE7下：Position: fiexd、Overflow不等于visibility、min-width不等于auto、min-height 不等于auto
IFC布局规则：
- 框会从包含块的顶部开始，一个接一个地水平摆放。
- 摆放这些框的时候，它们在水平方向上的外边距、边框、内边距所占用的空间都会被考虑在内。在垂直方向上，这些框可能会以不同形式来对齐：它们可能会把底部或顶部对齐，也可能把其内部的文本基线对齐。能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框。水平的margin、padding、border有效，垂直无效。不能指定宽高。
- 行框的宽度是由包含块和存在的浮动来决定。行框的高度由行高计算由他的排列规则来决定。