關于前端的碎碎念2-CSS裝修之盒子模型

CSS，層疊樣式表——（Cascading Style Sheets），是能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對于傳統HTML的表現而言，CSS能夠對網頁中的對象的位置排版進行像素級的精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力，并能夠進行初步交互設計，是目前基于文本展示最優秀的表現設計語言。CSS能夠根據不同使用者的理解能力，簡化或者優化寫法，針對各類人群，有較強的易讀性。

CSS看似比較繁雜，其實只要掌握了CSS中的盒子模型、定位、以及頁面布局，就基本上掌握了大半啦~這時我們就已經能夠對網頁中各個元素進行精準的排版，做出符合我們意愿的網頁啦！

關于CSS的各種屬性，我們還是可以參考學習HTML那樣。可以說CSS的屬性幾乎完全是語義化的。我們需要改變邊框，那就是“border”，那我們需要右側邊框做一些改變，那就是“border-right”。很明顯，接下來按照我們的需求還有“右邊框的寬度——border-right-with”，”右邊框顏色——border-right-color”等等等，諸如此類~

完全就是我們需要什么，只要憑著需求去尋找。~follow me~

盒模型 (Box Model) 規定了元素框處理元素內容、內邊距、邊框 和 外邊距?的方式

CSS盒模型是一種樣式HTML元素的方式。每個HTML元素都是帶有邊框，邊距，填充和內容的矩形框。

以下代碼顯示了元素中每個部分的布局。最外邊是邊距，然后是元素邊界，之后是填充，內容是核心和內部最多。

盒子模型有兩種：W3C標準模型和IE盒子模型（也叫做怪異模型）

標準模式：通常在非IE低瀏覽器中。計算方法：占的空間的寬度=內容的寬度＋左右內邊距的寬度＋左右邊框的寬度＋左右外邊 距的寬度（margin + padding+ border+ content）

模型包括margin、border、padding、content ，元素的width=content的寬度

怪異模式：怪異模式是指在IE6及更早的IE版本下盒模型的計算方 法：所占空間總寬度=內容＋外邊距（?content＋margin）

元素的width=content+padding+border

他們之間的相同點和不同點其實也很容易看得出來：

相同點：都是由margin ,border,padding,content組成

不同點：計算寬/高度方法的不同，標準模式下盒子的總寬度是由margin,padding,border,content的相加得來；怪異模式下：總寬度是由content減去padding、border得來的。

我個人認為W3C定義盒子模型與IE定義的盒子模型，IE定義的比較合理，元素的寬度應該包含border（邊框）和padding（填充），這個和我們現實生活的盒子是一樣的，W3C也認識到自己的問題了，所以在CSS3中新增了一個樣式box-sizing，包含兩個屬性content-box 和 border-box。

（1）?content-box??元素的width=content+padding+border

（2）?border-box? ?元素的width=width（用樣式指定的寬度）

最終效果如下：

如果想保持一個盒子的真實占有寬度不變，那么加width的時候就要減padding。加padding的時候就要減width。因為盒子變胖了是災難性的，這會把別的盒子擠下去。

上面的圖可以看到margin相鄰元素值有重疊??發生外邊距重疊有兩個要件：⑴必須是相鄰的； ? ?⑵垂直方向上的

1.對于行級元素，margin-top和margin-bottom對于上下元素無效，margin-left和margin-right有效

2.對于相鄰的塊級元素margin-bottom和margin-top 取值方式

1） 都是正數： 取最大值

距離=Math.max(margin-botton,margin-top)

2） 都是負數： 取最小值

距離=Math.min(margin-botton,margin-top)

3）上面是正數，下面是負數或者 上面是負數，下面是正數： 正負相加

距離=margin-botton+margin-top

注意：如果一個無內容的空元素，其自身上下邊距也會產生重疊。

margin:20px; float:left;

margin:20px; clear:both;

單個方塊重疊的解決方法：1.浮動。在IE瀏覽器下（IE8未測過），浮動可以解決margin-top以及margin-bottom重疊的問題。而在Firefox火狐瀏覽器或是chrome谷歌瀏覽器下以及opera瀏覽器下，浮動只能解決同方向上的margin重疊問題。不同方向上的margin重疊的問題依舊存在。

margin:20px; 父標簽overflow:hidden; zoom:1;

margin:20px; 父標簽overflow:hidden; zoom:1;

同方向margin重疊的解決方法：1.與清除浮動的方法一致，給外部的box添加清除浮動相同的樣式即可。常用的樣式代碼為：overflow:hidden; zoom:1;但是有問題的是，在IE瀏覽器下（未測試IE8），應用zoom屬性后，似乎發生了水平方向上margin失效的情況。其他表現均一致。

margin:20px; 父標簽padding:1px;

margin:20px; 父標簽padding:1px;

同方向margin重疊的解決方法：2.增加些邊緣屬性。例如padding值，padding:1px;或是border屬性，border:1px solid #cacbcc。此方法在非IE瀏覽器下效果良好，但是在IE瀏覽器下，表現很糟糕。

外邊距重疊的意義

外邊距的重疊只產生在普通流文檔的上下外邊距之間，這個看起來有點奇怪的規則，其實有其現實意義。設想，當我們上下排列一系列規則的塊級元素（如段落P）時，那么塊元素之間因為外邊距重疊的存在，段落之間就不會產生雙倍的距離。

防止外邊距重疊解決方案：

雖然外邊距的重疊有其一定的意義，但有時候我們在設計上卻不想讓元素之間產生重疊，那么可以有如下幾個建議可供參考：

外層元素padding代替

內層元素透明邊框 border:1px solid transparent;

內層元素絕對定位 postion:absolute:

外層元素 overflow:hidden;

內層元素 加float:left;或display:inline-block;

內層元素padding:1px;

以上建議可根據實際情況來采取。

曾經一度認為是瀏覽器BUG，汗顏！

css

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。