注:
1.背景颜色会填充到margin以内的区域。
2.文字会在content区域。
3.padding不能出现负值,margin是可以出现负值。
box-sizing:盒尺寸,可以改变盒子模型的展示形态。
默认值:
content-box:width、height->content
border-box:width、height->content padding border
使用的场景:
1.不用再去计算一些值
2.解决一些100%的问题
实践
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS盒子模型</title>
<style>
#box{
width: 200px;
height: 200px;
padding: 30px 50px;
background-color: rebeccapurple;
border: 1px brown solid;
box-sizing: border-box;
}
input{
width: 100%;
padding: 30px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="box">MW</div>
<input type="text">
</body>
</html>
效果图
margin叠加
当给两个盒子同时添加上下外边距的时候,就会出现叠加的问题。这个问题,只在上下有,左右是没有这个叠加问题的。
解决方案:
1.BFC规范
2.想办法只给一个元素添加间距。
实践
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS盒子模型</title>
<style>
#box1{
width: 200px;
height: 200px;
background-color: rebeccapurple;
margin-bottom: 70px;
}
#box2{
width: 200px;
height: 200px;
background-color: red;
margin-top: 40px;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
效果图
margin传递
margin传递的问题只会出现在嵌套的结构中,且只有margin-top会有传递的问题,其它三个方向是没有传递问题的。
解决方案:
1.BFC规范
2.给父容器加边框。
3.margin换成padding。
实践
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS盒子模型</title>
<style>
#box1{
width: 200px;
height: 100px;
background-color: rebeccapurple;
padding-top: 100px;
}
#box2{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
</html>
效果图
扩展:
1.margin左右自适应是可以的,但是上下自适应是不行的。(如果想实现上下自适应的话,需要自己琢磨)
2.width、height不设置的时候,对盒子模型的影响,会自动去计算容器的大小,节省代码。