CSS盒子模型與雙飛翼佈局

盒子模型&雙飛翼實現

CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：外邊距（margin）、邊框（border）、內邊距（padding）、實際內容（content）四個屬性。

盒模型容許咱們在其它元素和周圍元素邊框之間的空間放置元素。

盒模型有兩種狀況:W3C盒子模型和IE盒子模型

標準盒模型：css屬性裏的width和height規定的就是內容的寬高

怪異盒模型：css屬性裏的width和height規定的寬高是包含內外邊距和邊框的

兩種模型能夠用box-sizing屬性指定

即box-sizing屬性能夠指定盒子模型種類，content-box指定盒子模型爲W3C（標準盒模型），border-box爲IE盒子模型（怪異盒模型）。

解決兩種模式下樣式的兼容性問題

建議不要給元素添加指定寬度的內邊距，而是嘗試將內邊距或外邊距添加到元素的父元素和子元素

css中width：100% 和widhth:auto 的區別

簡單結論：auto表現爲content+padding+border+margin值等於parent的寬度,不會溢出父親，若設置爲寬度是100%則當有內邊距和外邊距的時候，子元素的會溢出父親

子元素的width爲auto,且有內外邊距:

子元素的width爲100%,且有內外邊距 :

雙飛翼佈局理解

(參考博文:https://www.jianshu.com/p/549aaa5fabaa)

雙飛翼佈局:兩側寬度固定，中間寬度自適應的三欄佈局。

優勢：

兩側寬度固定，中間寬度自適應

中間部分在DOM結構上優先，以便先行渲染

容許三列中的任意一列成爲最高列

只須要使用一個額外的div標籤

原理:主要是利用了margin爲負數時的一些效果

實現思路:使用一個div包裹三塊內容，使三塊內容浮動(緣由:使三個Div在文檔流中在同一行),center塊使用padding屬性左右流出空間給left,right。left，right塊元素分別相對定位和magin爲負數的影響移動至預留的位置裏。

margin爲負數產生的影響:

1.對自身的影響:

margin-top爲負值不會增長高度，只會產生向上位移

margin-bottom爲負值不會產生位移，會減小自身的供css讀取的高度。

2.對文檔流的影響

元素若是用了margin-left:-20px;毋庸置疑的自身會向左偏移20px和定位（position：relative）有點不同的是，在其後面的元素會補位，也就是後面的行內元素會緊貼在此元素的以後。。