盒模型規定了元素框處理元素內容width與height值、內邊距padding、邊框border 和 外邊距margin 的數值大小。邊框內的空白是內邊距padding，邊框外的空白是外邊距margin，如下所示，這個盒模型元素框的寬度值=內容區域的寬度+2（內邊距+外邊距+邊框），也就是該示例中的... ...
盒模型規定了元素框處理元素內容width與height值、內邊距padding、邊框border 和 外邊距margin 的數值大小。邊框內的空白是內邊距padding，邊框外的空白是外邊距margin，如下所示，這個盒模型元素框的寬度值=內容區域的寬度+2（內邊距+外邊距+邊框），也就是該示例中的元素寬度為170px，需要註意的是在 css 中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。（瀏覽器查看的時候記得打開控制台F12，點擊對應的元素查看）
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;上下 左右外邊距10px
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>
