CSS盒子模型
盒子模型组成
content->padding->border->margin
用快递类比:物品 -> 填充物->包装盒->盒子与盒子之间的间距
content:内容区域,由width 和 height组成
padding:内边距(内填充);padding-left/padding-right/padding-top/padding-bottom
只写一个值时:上下左右
只写两个值时:上下、左右
写四个值时:上、右、下、左(顺时针方向)
border:边框线
margin:外边距(外填充)margin-left/margin-right/margin-top/margin-bottom
只写一个值时:上下左右
只写两个值时:上下、左右
写四个值时:上、右、下、左(顺时针方向)
注意
1.背景色填充到margin以内的区域(不包括margin区域)
2.文字会在content区域
3.padding不能为负数,margin可以为负数
box-sizing:盒尺寸
可以改变盒子模型的一个展示形态
默认值(content-box):width,height->content
border-box:width,height->content,padding,border
盒子模型的一些问题
1.margin叠加
当给两个盒子同时添加上下外边距的时候,就会出现叠加的问题。这个问题,只有在上下有,左右是没有这个叠加问题的。
出现上下Margin同时存在的时候,会取上下中值较大的作为叠加的值。
解决方案:
1.BFC规范
2.想办法只给一个元素添加间距
2.margin传递
出现在嵌套结构中,只是针对margin-top的问题
解决方案:
1.BFC规范
2.给父容器加边框
3.margin换成Padding
扩展:
1.margin左右自适应是可以的,但是上下自适应是不行的
2.width/height不设置的时候,对模型的影响,会自动取计算容器的大小,节省代码