有沒有寶子，開發html，給一個父元素padding-right，子元素卻毫無反應，萬分捉急，在線等，急！
我知道你着急，但是你先別急
我會在這裏娓娓道來，帶你走上一個新的技術臺階
1、一段基礎代碼
代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { padding: 0; margin: 0; } .parent { width: 100%; height: 300px; background-color: rgb(83, 145, 63); } .child { width: 100%; height: 200px; background-color: rgb(101, 210, 175); } </style> </head> <body> <div class="parent"> <div class="child"> child </div> </div> </body> </html>
代碼執行效果如下
這裏，parent元素 width: 100%; 佔滿了瀏覽器，child元素 width: 100%; 佔滿了parent。
2、這時，想child與parent有個20px的左邊距，如下，給parent 添加要給padding-left: 20px;
代碼執行效果如下圖：
3、得到了我們想要的效果，child偏移了20px，這時又想，child與parent有個20px的右邊距，自然而然想到給parent 添加要給padding-right: 20px;
沒有得到預想的child對parent右偏移，但是偏移值是有效的，看圖右下角圓圈。怎麼回事？
4、先給出解決方法，給parent添加一行 box-sizing: border-box;
代碼執行效果圖
得到了想要的偏移，看右小角圓圈：700的寬度變成了660，怎麼回事？
5、首先得先理解html的盒子模型
看第一張圖
看紅色框，每個元素佔據的空間，包括
- Margin(外邊距) -
- Border(邊框) -
- Padding(內邊距) -
- Content(內容) -子元素能使用的空間
這裏Margin、Border、Padding都是0，而Content是700x300 ，
瀏覽器的寬度是700，Content內容區佔據了全部的width，也就是700.
第二張圖，給了一個padding
Content內容區依然佔據了全部的width：700. padding 的20沒有起到什麼作用。因爲box-sizing 這個屬性
box-sizing ，用於指定盒模型的計算方式，即如何計算元素的總寬度和總高度。它有以下兩個常用的參數：
-
content-box：- 默認值。
- 在計算元素的總寬度和總高度時，只包括內容區域（content area）的尺寸，不包括邊框（border）和內邊距（padding）。
- 即元素的寬度和高度由內容的寬度和高度決定。
-
border-box：- 在計算元素的總寬度和總高度時，包括內容區域（content area）的尺寸、邊框（border）和內邊距（padding）。
- 即元素的寬度和高度包括了邊框和內邊距，內容區域的尺寸會自動調整以適應剩餘的空間
於是，我們在第四張圖，設置了box-sizing: border-box;
Content內容區變成了660，兩邊padding分別是20，加起來是700
parent元素的Content內容區變成了660，child元素是其父元素的Content，所有隻有660，效果就是有了左右的偏移。
兩個重點：
1、元素with的計算方式
2、child元素是其父元素的Content，無法超出Content區