css 常用布局属性解释

一、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/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/

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布局规则：

1. 内部的Box会在垂直方向，一个接一个地放置。
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin值相同时会发生重叠，不等时两者间的margin值为较大者的值margin值（float后的元素除外）
3. 每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4. BFC的区域不会与float box重叠，常用来清除浮动和布局。
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6. 计算BFC的高度时，浮动元素也参与计算

　　那些元素会生成BFC：

1. 根元素
2. float属性不为none 浮动框
3. position为absolute或fixed
4. display为inline-block, table-cell, table-caption, flex, inline-flex 非块框的块容器
5. overflow不为visible的块框。这就是为什么我们经常用overflow:hidden去清除内部浮动的原因
6. 触发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布局规则：

1. 框会从包含块的顶部开始，一个接一个地水平摆放。
2. 摆放这些框的时候，它们在水平方向上的外边距、边框、内边距所占用的空间都会被考虑在内。在垂直方向上，这些框可能会以不同形式来对齐：它们可能会把底部或顶部对齐，也可能把其内部的文本基线对齐。能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框。水平的margin、padding、border有效，垂直无效。不能指定宽高。
3. 行框的宽度是由包含块和存在的浮动来决定。行框的高度由行高计算由他的排列规则来决定。