css 经常使用布局属性解释

1、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中的和模型

 

2、Position定位

Position取值：

       一、Inherit：继承父元素属性

       二、Static：默认状态，即遵循正常文档流，无定位

       三、Relative：相对定位，相对于自身定位，对象不可层叠，但能够用位置偏移属性（left、top、right、bottom），在正常文档流中偏移位置

       四、Absolute：绝对定位，DOM对象脱离正常文档流，且相对于最近一级有定位属性的DOM定位，能够用位置偏移属性left、top、right、bottom）和z-index层叠属性

              4.一、若多个子节点都设置了postion：absolute属性，而且均没有设置z-index属性，则最后一个默认在最顶层

              4.二、若两个节点A、B都设置了postion：absolute属性，而且A、B的子元素都设置了postion：absolute属性，

且A的层级（z-index）值比B的层级（z-index）值高，则A的子元素在B的子元素上显示，且不管B的子元素z-index多大

       五、Fixed：固定定位，相对于浏览器窗口定位，

              5.一、若是当前DOM设置了position：fixed，且父DOM设置了transform则已父元素为基准定位

Position：absolute：属性常见问题

破坏性：当子元素设置绝对定位，会致使父元素塌陷，

包裹性：当父元素设置决定定位时，则默认宽度会变成自适应内部元素宽度

Position：还能够实现隐藏

position:absolute; text-indent:-9999em 
position: absolute; clip: rect(1px 1px 1px 1px);/*兼容IE六、IE7*/ 
clip: rect(1px, 1px, 1px, 1px);

position实现隐藏的优缺点

一、会产生重绘，但不会产生页面回流

       二、使用与行内元素和块级元素

Display、Jquery实现隐藏的局限性：

一、对于行内元素有局限性

二、jQuery的显示隐藏也是先存储DOM元素的display状态而后用过JS动态改变

 

3、float浮动

Float取值：

一、left：DOM元素向左浮动

二、ght：DOM元素向右浮动

Tips：经常使用此特性作文字环绕布局

 清除浮动方法

一、 父元素设置 overflow: hidden           

原理：overflow: hidden本意是超出部分隐藏，但若是子元素设置了浮动（不占据普通文档流），

一、 若是父元素容器默认高度是auto，那么不计算子元素内浮动元素高度就会裁剪，就有可能会裁掉float元素，

二、 父元素没有明确容器高度状况下，他会触发一次计算（这个计算是由BFC（Block formatting context：块级格式化上下文）产生），只有计算所有内容的高度，才能肯定在什么位置hidden，此次计算是要将浮动元素的高度也计算进去，因此达到了清除浮动的目的，只要overflow的值不是visible 都会触发计算。

更多关于BFC资料：http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

二、 父元素设置 clear: borth

三、 父元素添加伪元素

clearfix{
　　zoom:1;               /*兼容IE六、IE7，IE六、IE7用这个属性清除浮动来裹的内部元素*/
}

.clearfix:after{
　　content:" ";           /*在元素末尾添加一个空的元素*/
　　display:block;       /*并设置这个空元素为块级元素*/
　　height:0;              /*行高设置为0*/
　　font-size:0;           /*font-size设置为0*/
　　visibility:hidden;   /*设置元素不可见，但占用文档流空间*/
　　clear:both;           /*清除左右两边浮动*/
}

 

 四、  Clearfix原理：

一、在IE6, 7下zoom: 1会触发hasLayout，从而使元素闭合内部的浮动。 
二、在标准浏览器下，.clearfix:after这个伪类会在应用到.clearfix的元素后面插入一个clear: both的块级元素，从而达到清除浮动的做用。 
三、在须要清除浮动的时候，只要写一个.clearfix就好了，而后在须要清浮动的元素中 添加clearfix类名就行了。 

 

4、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/

5、回流与重绘

       定义：

       一、当render tree中的一部分（或者所有），由于元素的规模尺寸，布局，隐藏等改变而须要从新构建。这就称为回流(reflow)。每一个页面至少须要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并从新构造这部分渲染树，完成回流后，浏览器会从新绘制受影响的部分到屏幕中，该过程成为重绘。

       二、当render tree中的一些元素须要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，好比background-color。则就叫称为重绘。

 

      什么操做会引发重绘、回流：

              一、添加、删除元素(回流+重绘)

　　       二、隐藏素，display:none(回流+重绘)，visibility:hidden(只重绘，不回流)

　　三、移动元素，好比改变top,left(jquery的animate方法就是,改变top,left不必定会影响回流)，或者移动元素到另外1个父元素中。(重绘+回流)

　　四、对style的操做(对不一样的属性操做，影响不同)

　　五、还有一种是用户的操做，好比改变浏览器大小，改变浏览器的字体大小等(回流+重绘)

　　强制浏览器回流属性：

　　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信息的请求和修改。

　　一、直接改变className，若是动态改变样式，则使用cssText（考虑没有优化的浏览器）

　　二、让要操做的元素进行”离线处理”，处理完后一块儿更新

　　　　a) 使用DocumentFragment进行缓存操做,引起一次回流和重绘；
　　　　b) 使用display:none技术，只引起两次回流和重绘；
　　　　c) 使用cloneNode(true or false) 和 replaceChild 技术，引起一次回流和重绘；

　　3、不要常常访问会引发浏览器flush队列的属性，若是你确实要访问，利用缓存

　　四、 让元素脱离动画流，减小回流的Render Tree的规模。

　　资料：http://www.css88.com/archives/4996

                http://kb.cnblogs.com/page/64064/8/

               http://www.planabc.net/2009/04/13/reflow/

5、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. 行框的宽度是由包含块和存在的浮动来决定。行框的高度由行高计算由他的排列规则来决定。