ima 通過 元素 add red 有一種 margin borde 試題

今天同學發給了我一份前端基礎的面試題,第一道便是對css盒子模型的理解,我看到的第一眼想到的是div,然後就...懵逼了,知其然不知其所以然。所以打算寫一寫盒子模型的概念理解啥的,如有寫的不當的地方,望指正見諒!

1、css3盒子模型

個人的理解是頁面上所有的html元素都可以看作是盒子,即整個html頁面就是由無數個盒子通過特定的布局結合在一起的,每個盒子包括內容(content)、內邊距(padding)、邊框(border)、外邊距(margin)。

技術分享圖片

(一般來說margin有兩種形式,一種是盒子與瀏覽器窗口的外邊距,還有一種是盒子與相鄰盒子的外邊距)

2、關於盒子的寬高的問題

標準盒子模型,也就是咋們的大哥W3C規定的盒子模型,這種情況下:css中定義的寬高 = 盒子實際內容(content)的寬高,盒子的總寬高 = css定義的寬高 + padding + border + margin(註意計算時左右和上下的padding、margin都是兩個)

技術分享圖片

如下定義了一個盒子,css代碼和html代碼如下:

1 #box{
2             width: 200px;
3             height: 200px;
4             margin: 10px;
5             padding: 10px;
6             border: solid red;/* border默認寬度是3px 所以沒寫直接3px了*/
7         }
.
1 <div id="box">
2         我是一個盒子
3     </div>

在瀏覽器開發工具下的截圖如下:

技術分享圖片

從圖中可以看出:藍色部分(200*200 )是盒子的content,綠色的是padding,黃色的是border, 深黃色是margin

但在IE瀏覽器中盒子的寬高計算方式會不一樣:

IE盒子模型也叫怪異盒模型

技術分享圖片

在該模式下,瀏覽器的 width 屬性不是內容的寬度,而是內容、內邊距和邊框的寬度的總和;即在怪異模式下的盒模型,盒子的(content)寬度+內邊距padding+邊框border寬度=我們設置的width(height也是如此),盒子總寬度/高度=width/height + margin = 內容區寬度/高度 + padding + border + margin。
  寫到最後就有點想要放棄了,望路過的大佬見諒!湊合看吧~

前端面試必備的css盒子模型