为方便阅读，在文中我将用大写字母A、B、C、D等来表示div。
1.div被设定了宽度，再设定padding将使得div宽度撑大。
假如A被设定了300px的宽度，再设定了padding=10px，此时div的宽度将撑大，变为320px的宽度。
如果想使得宽度仍然为300px，则给div加如下样式代码：
box-sizing:border-box;（默认情况下为content-box）
2.border-box表示div宽度包含padding，跟div的margin无关。
如果A的宽度为300px，而其孩子B的样式如下：
width:100%;border:1px solid black;margin:20px;box-sizing:border-box;
则将看到B冲出了A的体外。
如果B的样式其中margin改为padding，则B就不会冲出A的体外。
3.div没设定宽度样式时，父div宽 = 父div的padding + 子div的宽 + 子div的margin + 子div的padding。
假如B是A的孩子，当我们想固定A的宽度时，但同时又要保证AB之间的空白距离，就可以从调整B的padding和margin入手。
4. background-position里center top left bottom等是相对于屏幕定位的，而不是相对于父div定位的。
屏幕左上角默认为坐标轴的原点。
background:url('./example/product_pic_1.jpg') no-repeat fixed bottom center;
属性顺序记忆口诀：花红有路香两重，风舞竹影枝横纵
花红:background-color
有路：有通U，表示url；路，指代图片路径。background-image
两：表示url里路径需要引号括起来。
重：即重复，对应background-repeat属性
风舞：无风静止有风则起舞，对应background-attachment的fixed和scroll，分别表示背景固定或可随页面滚动而滚动。
横纵：对应background-position属性，先指定x轴坐标，再指定y轴坐标