css盒模型 content-box border-box

Hhy_9288發表於2017-11-22
CSS模型

CSS的兩種盒模型

　　盒模型一共有兩種模式，一種是標準模式，另一種就是怪異模式。

　　當你用編輯器新建一個html頁面的時候你一定會發現最頂上都會有一個DOCTYPE標籤，例如：

　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

　　<!DOCTYPE HTML>
　　以上幾種DOCTYPE都是標準的文件型別，無論使用哪種模式完整定義DOCTYPE，都會觸發標準模式，而如果DOCTYPE缺失則在ie6，ie7，ie8下將會觸發怪異模式（quirks 模式）。

首先定義一個div塊用來演示標準模式和怪異模式的區別，以下是Css樣式
　　box { width: 200px; height: 200px; border: 20px solid black; padding: 50px; margin: 50px; }

　　在標準模式下的盒模型如下圖所示，盒子總寬度/高度=width/height+padding+border+margin
　　　　　　　　
　　在怪異模式下的盒模型如下圖所示，盒子的總寬度和高度是包含內邊距padding和邊框border寬度在內的，盒子總寬度/高度=width/height + margin = 內容區寬度/高度 + padding + border + margin;
　　　　也就是盒子寬高 = 內容區域的寬高+padding+border;
　　　　　　　　
　　 那麼，在此基礎上介紹一下css3屬性box-sizing;







　　　　box-sizing有兩個值一個是content-box，另一個是border-box。





　　　　當設定為box-sizing:content-box時，將採用標準模式解析計算，也是預設模式；





　　　　當設定為box-sizing:border-box時，將採用怪異模式解析計算；



　　　　　　目前使用此屬性需要新增字首：






                       -webkit-box-sizing: content-box;
　　　　　　　　-moz-box-sizing: content-box;





出處：https://www.cnblogs.com/Kyaya/p/6003879.html


















相關文章