理解標準盒模型和怪異模式&box-sizing屬性

時間 2019-12-10

標籤理解標準模型怪異模式 box sizing 屬性简体版

原文原文鏈接

盒子模型主要有兩種，w3c標準盒模型，IE下的怪異盒模型，其實還有就是彈性盒模型(上篇文章咱們用他很好的解決了對齊問題)css

DTD規範

盒模型分爲：標準w3c盒模型、IE盒模型、以及css中的伸縮盒模型html

當咱們使用編輯器建立一個html頁面時，咱們必定會發現最頂上的DOCTYPE標籤css3

<!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 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>

這些doctype都是標準的文檔類型，不管咱們使用哪一種模式都會觸發標準模式，而若是doctype缺失，則在ie六、ie七、ie8將會觸發怪異模式(quirks);瀏覽器

一旦爲頁面設置了恰當的DTD(文檔定義類型),大多數瀏覽器都會按照標準盒模型來呈現內容，可是ie5和ie6的呈現倒是不正確的.編輯器

根據w3c規範，元素內容佔據空間是由width屬性設置的，而內容周圍的padding和border都是另外計算的。ui

不幸的是，IE5.X 和 6 在怪異模式中使用本身的非標準模型。這些瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。.net

舉個栗子code

咱們用一個div塊來演示標準模式和怪異模式的區別：htm

.box{
    width:200px;
    height:200px;
    border:20px solid black;
    padding:50px;
    margin:50px;
}

標準盒模型

在標準模式下的盒模型以下圖所示，盒子總寬度/高度=width/height+padding+border+marginblog

怪異模式

在怪異模式下的盒模型以下圖所示，盒子的總寬度和高度是包含內邊距padding和邊框border寬度在內的

盒子總寬度/高度=width/height + margin = 內容區寬度/高度 + padding + border + margin;

也便是說 width = 內容區寬度 + padding + border

CSS3的box-sizing屬性

語法：

box-sizing : content-box || border-box || inherit;

在css3中新增了box-sizing屬性，具有了以上知識後，咱們已經理解：

當爲content-box時，將採起標準模式進行解析計算
當爲border-box時，將採起怪異模式解析計算
當爲inherit時，將從父元素來繼承box-sizing屬性的值

參考

標準模式，怪異盒模型&box-sizing屬性

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。