CSS之盒子模型，padding改变实际盒子大小，margintop塌陷问题

此处插播哔哩哔哩Pink老师的RAP

border是边框，content内容哒；
padding内边距，边框与内容的距离主要就靠它；
margin外边距，盒子与盒子的距离它说了算。

• padding 、border 会影响盒子的实际大小

前提：盒子有height/width属性，再设置padding值
解决方案一：height 、width减去相应的padding，border值
解决方案二：添加(添加了padding的盒子)box-size:border-box（css3盒子模型）

• margin 使用margin设置垂直外边距时，可能会出现外边距合并

情景：对于两个嵌套关系（父子关系）的块级元素，父元素有上外边距 同时 子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方案：
1、可以为父元素定义上边框 ，border-top；
2、可以为父元素定义上内边距，padding-top；
3、可以为父元素添加 overflow:hidden；