盒模型詳解

時間 2019-11-13

標籤模型詳解简体版

原文原文鏈接

內容：css

1.什麼是盒模型html

2.padding和margin瀏覽器

3.盒模型實例佈局

4.margin和padding拓展ui

5.box-sizingspa

參考資料：MDN盒模型資料scala

1.什麼是盒模型3d

MDN的解釋以下：code

當對一個文檔(網頁)進行佈局的時候，瀏覽器渲染引擎會根據CSS-Box模型（盒子模型）將全部元素表示爲一個矩形盒子，CSS決定這些盒子的大小，位置以及屬性（顏色，背景，邊框尺寸等性質)htm

在CSS中使用盒模型描述這些矩形盒子中的每個。這個模型描述了元素所佔空間的內容。

每一個盒子有四個邊：外邊距邊(margin), 邊框邊(border), 內填充邊(padding) 與 內容邊(content)

總結：盒模型就是每一個HTML元素的結構，也能夠理解爲一種思惟模式，每一種元素都遵循盒模型

如何查看元素的盒模型(以Chrome爲例)：右鍵點擊網頁選擇檢查，以下圖所示

2.padding和margin

padding -> 內邊距(內容與邊框之間)

margin -> 外邊距(標籤與標籤之間)

1 margin:         用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的
2 padding:        用於控制內容與邊框之間的距離；   
3 Border(邊框)    圍繞在內邊距和內容外的邊框。
4 Content(內容)   盒子的內容，顯示文本和圖像。

注：兩個挨着的margin瀏覽器最後會取其中的最大值；

margin和padding以下圖所示：

3.盒模型實例

(1)邊框、內容及padding實例

 1 <!--__author__ = "wyb"-->
 2 <!DOCTYPE html>
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>padding和margain</title>
 7     <style>
 8         .div1{
 9             width: 200px; height: 200px;
10             background-color: red;
11             border: 30px solid seagreen;
12             padding: 10px;
13         }
14         .div2{
15             width: 200px; height: 200px;
16             background-color: yellow;
17             border: 10px solid rebeccapurple;
18             padding: 10px;
19         }
20     </style>
21 </head>
22 <body>
23     <div class="div1">hello, div1</div>
24     <div class="div2">hello, div2</div>
25 </body>
26 </html>

效果以下：

(2)margin實例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>padding和margain2</title>
 6     <style>
 7         body{
 8             margin: 0;
 9         }
10         .div1{
11             background-color: aqua;
12             width: 200px;
13             height: 200px;
14             margin-bottom: 30px;
15         }
16         .div2{
17             background-color: blueviolet;
18             width: 100px;
19             height: 100px;
20         }
21     </style>
22 </head>
23 <body>
24 <div class="div1"></div>
25 <div class="div2"></div>
26 </body>
27 </html>

效果以下：

4.margin和padding拓展

(1)body的margin問題

邊框在默認狀況下會定位於瀏覽器窗口的左上角，可是並無緊貼着瀏覽器的窗口的邊框，這是由於body自己也是一個盒子（外層還有html），在默認狀況下， body距離html會有若干像素的margin，具體數值因各個瀏覽器不盡相同，因此body中的盒子不會緊貼瀏覽器窗口的邊框

解決方法：

1 margain: 0;

(2)margin collapse（邊界塌陷問題）

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

兄弟div: 上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下二者margin裏最大值做爲顯示值

父子div: 若是父級div中沒有 border，padding，inline content，子級div的margin會一直向上找，直到找到某個標籤包括border，padding，inline content中的其中一個，而後按此div 進行margin

 1 <!DOCTYPE html>
 2 <html lang="en" style="padding: 0px">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         body{
 8             margin: 0;
 9         }
10 
11         .div1{
12             background-color: aqua;
13             width: 300px;
14             height: 300px;
15         }
16         .div2{
17             background-color: blueviolet;
18             width: 100px;
19             height: 100px;
20             margin-top: 20px;
21 
22         }
23     </style>
24 </head>
25 <body>
26 
27 <div class="div1">
28     <div class="div2"></div>
29     <div class="div2"></div>
30 </div>
31 
32 </body>
33 </html>
34 
35 margin collapse示例

效果以下：

解決方法：如下3局代碼任選一句加入父div的樣式中便可

1 border:1px solid transparent；
2 padding:1px；
3 over-flow:hidden;

5.box-sizing

盒子模型是css中一個重要的概念，其實盒子模型有兩種，分別是 ie 盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各不相同

(1)標準盒模型

標準 w3c 盒子模型的範圍包括 margin、border、padding、content，而且 content 部分不包含其餘部分

(2)IE盒模型

IE盒子模型的範圍也包括 margin、border、padding、content，和標準 w3c 盒子模型不一樣的是：ie 盒子模型的 content 部分包含了 border 和 pading

(3)box-sizing取值

content-box：默認值，讓元素維持W3C的標準盒模型。元素的實際寬度/高度等於border加上元padding加上content的寬度/高度
border-box：讓元素維持IE盒模型，元素的實際寬度/高度等於content的寬度/高度。這裏的content width/height包含元素的border和padding和真正content的內容
content-box：Element Width/Height = border + padding + content width/height
border-box：Element Width/Height =content width/height - border - padding

(4)content-box和border-box的區別

最基本的區別：content-box的content部分不包括其餘部分僅僅是真實的內容而border-box的content部分包含border 和 pading

表現出來的區別：box-sizing默認是content-box，內容區大小不會變，加上padding、border的話，盒子就會往外撐開，從而破壞佈局結構

這時，使用border-box就能夠完美解決了，加上的padding和border會包含在content之中不會直接將佈局結構破壞

實例以下：

當使用content-box時，未加padding時：

加了padding以後：

將盒模型的類型改成border-box以後：

上述實例代碼：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>test</title>
 9     <style>
10         *{
11             /* 設置box-sizing爲border-box */
12             box-sizing: border-box;
13         }
14         body{
15             margin: 0;
16         }
17         .container{
18             width: 100%;
19         }
20         .div-item{
21             float: left;
22             height: 300px;
23             /* 爲div加上padding */
24             padding: 15px;
25         }
26         .div-left{
27             width: 30%;
28             background: lightblue;
29         }
30         .div-right{
31             width: 70%;
32             background: lightcyan;
33         }
34     </style>
35 </head>
36 <body>
37 
38 <div class="container">
39     <div class="div-left div-item">left</div>
40     <div class="div-right div-item">right</div>
41 </div>
42 
43 </body>
44 </html>

相關標籤/搜索

每日一句

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