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. 行框的寬度是由包含塊和存在的浮動來決定。行框的高度由行高計算由他的排列規則來決定。