css盒子模型的几种bug

1.设置padding、borde、margin

问题：盒子变大

解决办法：把width、height值减小

2.浏览器的默认样式

​ *通用选择器，选中页面中所有的标签

​ * {

​ margin: 0;

​ padding: 0;

​ }

3.盒子模型的真实宽高

​ 宽：witdh+padding-left+padding-right+border-left+border-right

​ 高：height+padding-top+padding-bottom+border-top+border-bottom

4.设置重复区域，显示较大值

​ 解决方法：上面的盒子加下边距，左边的盒子加右边距

5.margin允许设置负值，padding不允许设置负值

6.只有普通文档流转农化工块框的垂直外边距才会发生外边距叠加

7.行内标签只有左右外边距，没有上下外边距

8.margin-top的BUG：（五个条件同时具备）

问题：给子元素添加margin-top，作用到父元素身上

1.子元素是父元素的第一个子元素

2.父元素没有内填充

3.父元素没有边框

4.子元素没有浮动

5.父元素没有浮动

​ 解决方法：

​ 1.用父元素的padding-top模拟子元素的margin-top

​ 2.给父元素添加overflow：hidden

​ 3.子元素浮动

​ 4.父元素浮动