有没有宝子，开发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区