css盒子模型的几种bug
2017-08-14 本文已影响0人
程少辉
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.父元素浮动
