盒模型大小取決於它的padding，margin，border數值

時間 2020-02-16

標籤模型大小取決於 padding margin border 數值欄目 CSS 简体版

原文原文鏈接

盒模型規定了元素框處理元素內容width與height值、內邊距padding、邊框border 和外邊距margin 的數值大小。邊框內的空白是內邊距padding，邊框外的空白是外邊距margin，以下所示，這個盒模型元素框的寬度值=內容區域的寬度+2（內邊距+外邊距+邊框），也就是該示例中的元素寬度爲170px，須要注意的是在 css 中，width 和 height 指的是內容區域的寬度和高度。增長內邊距、邊框和外邊距不會影響內容區域的尺寸，可是會增長元素框的總尺寸。（瀏覽器查看的時候記得打開控制檯F12，點擊對應的元素查看）css

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>盒模型大小取決於它的padding，margin，border數值</title>
 7     <style type="text/css">
 8         div{
 9         padding: 10px;/*內邊距*/
10         margin: 20px;/*外邊距*/
11         margin: 10px 20px 30px 40px;/*上10px 右20px 下30px 左40px*/
12         margin: 10px 20px;/*上下 左右*/
13         margin: 10px 20px ;/*上 上下不同，左右同樣*/
14         margin: 10px 20px 30px;/*外邊距*/
15         border: 5px solid red;/*邊框*/
16         width: 100px;/*內容區域寬度100*/
17         height: 100px;/*內容區域高度100*/
18     }
19     /*盒子大小值=2（內邊距+邊框+外邊距）*//*該div大小*/
20     </style>
21 </head>
22 <body>
23     <div>看再多的書是學不全腳本的，要多實踐。</div>
24 </body>
25 </html>

不管是margin仍是padding,它們都是按照順時針排列的，上右下左定義數值的；比方說這個margin:10px 10px 10px 10px是講這個盒子上下左右都增長了10px的外邊距，簡寫margin：10px；marigin:10px 10px;上下左右外邊距10pxhtml

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>margin所謂bug竟然是重疊，咋解決</title>
 7     <style type="text/css">
 8     .box1,.box2{
 9         width: 200px;
10         height: 200px;
11         margin: 10px 20px;
12         background-color: red;
13     }
14     </style>
15 </head>
16 <body>
17     <div class="box1">功能說明書裏不存在可操做性</div>
18     <div class="box2">軟件在可以複用前必須先能用。</div>
19 </body>
20 </html>

按照正常思惟來說，上面的代碼裏面的2個盒子的上下間距應該是20px縫隙，可是實際咱們在控制檯查看的時候確只有10px，另外10px顯然被重疊了，若是咱們調整2個盒子的margin值大小，會發現上下間距取最大值20px（margin平級元素取最大值 ）；解決辦法：1.float2改變元素結構display:inline-block此外若是margin嵌套關係,也就是父子關係的時候你會發現他們是重合的，沒有縫隙，那麼如何解決margin帶來的這些問題了，解決辦法：盒子是沒有蓋子的，想辦法給2端填充內容，可使用border、padding、overflow:hidden；盒子模型對於咱們後面的網站佈局很重要，利於網站的精肯定位。瀏覽器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>解決margin產生的bug方法</title>
 7     <style type="text/css">
 8     /* .box1,.box2{
 9         width: 200px;
10         height: 200px;
11         background-color: red;
12     } */
13     /* .box1{
14         margin: 10px 20px;
15     }
16     .box2{
17         margin: 20px 10px;
18     }
19     .box3{
20         margin: 20px 10px;
21     }
22     .box4{
23         margin: 10px 20px;
24     } */
25 
26     /* 盒子模型平級帶來的問題解決辦法：1.float 2.display:inline-block 3.直接寫一個最大值，平級取最大值的margin*/
27     div{
28         /* float: left; */
29         display: inline-block;
30         width: 1200px;
31     }
32    .box1{
33         margin: 10px 20px;
34     }
35     .box2{
36         margin: 80px 10px;
37     }
38 
39     /* 盒子模型平級嵌套帶來的問題解決辦法：盒子是沒有蓋子的，想辦法給2端填充內容，可使用border、padding、overflow:hidden；上下填充文字*/
40     p{
41         width: 800px;
42     }
43     .box3,.box4{
44         margin: 30px;
45     }
46     .box3{
47         background-color: green;
48         /* border:1px solid red*//*給父元素加border*/
49         padding: 10px; /*給父元素加padding*/
50         /*overflow: hidden;*//*添加overflow:hidden 超出部分隱藏，帶來效果是全部超出所有裁剪掉*/
51     }
52     .box4{
53         display: block;
54         background-color: greenyellow;
55     }
56     </style>
57 </head>
58 <body>
59     <div class="box1">功能說明書裏不存在可操做性</div>
60     <div class="box2">軟件在可以複用前必須先能用。</div>
61     <p class="box3">
62         <!-- 簡單不先於複雜，而是在複雜以後。 -->
63         <span class="box4">過去的代碼都是未經測試的代碼。</span>
64         <!-- 要麼作第一個，要麼作最好的一個 -->
65     </p>
66 </body>
67 </html>