1、组成:
content -> padding -> border -> margin
content:内容区域,由width和height组成
padding:内边距
margin:外边距
注:背景颜色填充到margin以内的区域包括border。
padding不能为负,margin可以为负。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{width: 400px;height: 400px;border: 1px black solid;margin: 40px auto;}
#box2{width: 150px;height: 150px;background: red; padding:20px; margin: 20px}
#box3{width: 150px;height: 150px;background: blue;}
</style>
</head>
<body>
<!-- 1、margin,padding与BFC规范 -->
<div id="box1">
<div id="box2"></div>
<div id="box3"></div>
</div>
</body>
</html>
如图:box2和box3一样大,box2添加了padding和margin,背景填充到padding。
2、box-sizing:盒尺寸
默认值:content-box:指width,height只为content的宽高。
content-border:width,height -> content+padding+border。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{width: 300px;height: 300px;background: blue;border: 1px black solid;}
#box2{width: 100px;height: 100px;background: red; float: left;padding: 20px;}
</style>
</head>
<body>
<!-- 1、margin,padding与BFC规范 -->
<div id="box1">
<div id="box2"></div>
<div id="box2"></div>
<div id="box2"></div>
<div id="box2"></div>
<div id="box2"></div>
<div id="box2"></div>
</div>
</body>
如图:给子元素添加padding值,当未添加box-sizing属性时,默认为content-box,盒子就会变大。此时若规定box-sizing=border-box,盒子大小不变,content区域将自适应变小。
使用场景:
1、不用再去计算一些值。
2、解决了一些100%问题。
3、盒子模型的一些问题:
1、margin叠加:
上下两个块都存在margin时,会取上下两个中较大的一个margin值作为叠加的值,左右不会存在问题。
<style>
#box1{width: 400px;height: 400px;border: 1px black solid;margin: 40px auto;}
#box2{width: 150px;height: 150px;background: red; padding:20px; margin: 20px}
#box3{width: 150px;height: 150px;background: blue;margin: 30px;}
</style>
如图:box2和box3之间margin值应该是50px,但因为上下margin值叠加,取两个的最大值为叠加值,所以为box3的30px。
解决办法:
1、只给一个添加margin值。
2、BFC规范。
2、margin传递问题
出现在嵌套结构中,只针对margin-top的问题。
<style>
#box1{width: 400px;height: 400px;background: blue;}
#box2{width: 150px;height: 150px;background: red; margin-top: 120px;}
</style>
如图:并没有给外层父容器box1添加margin-top值,但box1也向下移动了。
解决办法:
1、给父容器添加边框。
2、将margin换成padding。
3、BFC规范。
4、扩展
1、margin左右自适应是可以的,但上下自适应不行。代码 margin:0 auto。
2、width,height不设置的话,对盒子模型的影响:自适应父容器,会自动计算容器大小,节省代码。