盒子模型
组成:content(内容)+padding(填充物/内边距)+border(边框)+margin(盒子与盒子之间的距离)
content:内容区域,由width和height组成
padding:内边距(内填充)。值为三个时表(上 左右 下)、两个值(上下 左右)
margin:外边距(外填充),盒子与盒子之间的距离。
注意:
- 背景颜色会填充到margin以内的区域(不包括margin)即content、padding、border。
- 文字固定在content区域显示
- padding不能出现负值,而margin是可以出现负值的
box-sizing属性
取值有content-box:是一个默认值,指盒子设置的宽width高height只赋给content
border-box:指盒子设置的宽width高height由content、padding、border三者来分配。使用场景:1.不用再去计算一些值 2.解决一些100%的问题。
盒子模型的一些问题:
- margin叠加问题:即当两个盒子同时存在,给上面margin-botom:30px;下面margin-top:30px;是不会出现叠加情况,而是取上下中值较大的作为margin。解决方案:1. BFC规范(较抽象) 2.只给一个元素添加margin间距
- margin传递问题:只出现在嵌套的结构中,且只有margin-top具有传递问题。解决方案:1.BFC规范 2.给父容器加边框 3.子容器的margin换成父容器的padding
扩展:
- margin左右自适应是可以的,但是上下自适应是不行的。(如果想实现上下自适应的话,也不是不可以,只是Eileen我还没学到那里)
- width、height不设置的时候,对盒子模型的影响,不设置width时系统会自动去计算容器的大小,而不是超出父容器范围,节省代码。