當你對乙個文件進行布局(laying out)時候, 瀏覽器引擎會根據css-box模型將所有元素描述為乙個盒子, css會決定這些盒子的大小, 位置, 屬性(顏色, 邊框...)。
盒模型分為兩類: ie盒模型和標準盒模型。 兩者的區別在於:
ie盒模型的width/height = content + border + padding
標準盒模型的width/height = content
複製**
"demo1">
"demo2">
複製**
可見demo1與demo2的外邊距為20px。而不是30px。
需要注意的是：只有普通文件流中塊框的垂直外邊距才會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合併。
css3支援改變盒子模型。
box-sizing用來改變計算盒子高度/寬度的預設盒子模型。可以使用此屬性來模擬不正確支援css盒子模型規範的瀏覽器的行為。
/* 關鍵字 值 */
box-sizing: content-box;
box-sizing: border-box;
/* 全域性 值 */
box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;
複製**
寬度 = 內容的寬度
高度 = 內容的高度
不會包含border, padding。
複製**
.demo1
"demo1">
複製**
border-box: 怪異模式
width = border + padding + 內容的width，
height = border + padding + 內容的height。
複製**
.demo
"demo">
複製**
padding-box: 已經棄用
inherit: 規定應從父元素繼承 box-sizing 屬性的值content-box缺點
當你想讓兩個子容器float:left，寬度各50%，然後給一點padding，最後讓子容器併排充滿父容器，一切想的挺美好，然而你發現結果並不是這麼美好，因為子容器的盒子寬度已經超出了父容器的一半，導致了折行，於是，width就不能50%了，只能是50%再減去padding的畫素值
複製**
"demo">
"demo1">
"demo2">
複製**
border-box的優勢:
border-box的誕生，主要就是解決content-box的最大缺點。border-box意味著子容器的padding和border的厚度都算在50%之內，這樣，你可以隨意的修改padding和border的厚度值，根本不用擔心父容器被撐爆。
複製**
.demo div
複製**
因此border-box使用場景如下:
子元素有padding和border，或者至少有其一，並且需要給子元素設定100%寬度（或者50%寬度等等），這時候顯然需要border-box。設為border-box之後，padding和border的厚度可以隨意調，並不會溢位父元素。如果是content-box，那麼，寬度必然會溢位，而且，為了不溢位，你設定子元素的寬度就只能是乙個定值，或者是乙個計算值（比如calc(100% - 20px)。
前端面試必考題 CSS盒模型詳解
盒模型是css的基礎中的基礎。因為它的重要性，所以很多面試中都會被提到。它也成為了考察求職者基本素質的一道題。屬於絕對的經典問題。這樣描述，相信大家能意識到盒模型的重要性了吧。我們先來看一種圖 當瀏覽器對乙個html文件進行布局的時候，會把每乙個元素都渲染成乙個矩形的盒子，盒模型就是對這些元素的形狀...
前端面試 一面03 CSS盒模型
三 實際情況中的例項 四 延伸問題 思考接下來會怎麼延伸追問，做好心理準備 1 盒模型的基本概念 區別 2 怎麼應用2種盒模型 box sizing content box 預設標準模型 box sizing border box ie模型包含border padding 3 js怎麼獲取盒模型 c...
前端面試之BFC
它是頁面中的一塊渲染區域，有一套渲染規則，決定了其子元素如何布局，以及和其他元素之間的關係和作用。滿足下列條件之一就可觸發bfc 根元素，即html元素 float的值不為none overflow的值不為visible display的值為inline block table cell table...