css的两种盒模型(标准盒模型与怪异盒模型(不算IE哦))
标准盒模型 | 怪异盒模型 |
---|---|
box-sizing: content-box; | box-sizing: border-box; |
总宽度= width + margin(左右) + padding(左右) + border(左右) | 总宽度 = width = margin(左右) + padding(左右) + border(左右) +内容宽度(content) |
总高度= height+ margin(上下) + padding(上下) + border(上下) | 总高度 = height= margin(上下) + padding(上下) + border(上下) +内容高度(content) |
- 标准盒模型
可以运行康康
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标准盒模型</title>
</head>
<style>
.main{
border: 5px solid black;
display: inline-block; //将元素显示为块级元素,效果更明显一点
background-color: #53802a;
}
.box{
//box-sizing: content-box; //默认标准盒模型
display: inline-block; //将元素显示为块级元素,效果更明显一点
width: 200px;
height: 200px;
border: 10px solid black;
padding: 20px;
margin: 20px;
background-color: red;
}
</style>
<body>
<div class="main">
<div class="box"></div>
</div>
</body>
</html>
上面的逻辑不复杂,外层div没有设置宽高,包裹住内层div,完全由内层div把整个盒子撑大。然后我们来看效果:
这里我们看到,内层div的宽高都是260,可是宽高都是设置的200啊?
再看看这个
在这张图中,我们发现我们设置的200*200出现在了最里面的那个蓝框中,与此同时我们可以发现在这个盒模型中除了我们设置的内容(content),还有margin(外边距)、border(边框)、padding(内边框)
margin(外边距) - 清除边框外的区域,外边距是透明的。
border(边框) - 围绕在内边距和内容外的边框。
padding(内边距) - 清除内容周围的区域,内边距是透明的。
content(内容) - 盒子的内容,显示文本和图像。
总结一下:在标准盒模型下
一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
一个块的总高度= height+ margin(上下) + padding(上下) + border(上下)
- 怪异盒模型
运行康康
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>怪异盒模型</title>
</head>
<style>
.main{
border: 5px solid black;
display: inline-block; //将元素显示为块级元素,效果更明显一点
background-color: #53802a;
}
.box{
box-sizing: border-box; //设置怪异盒模型
display: inline-block; //将元素显示为块级元素,效果更明显一点
width: 200px;
height: 200px;
border: 10px solid #000000;
padding: 20px;
margin: 20px;
background-color: red;
}
</style>
<body>
<div class="main">
<div class="box"></div>
</div>
</body>
</html>
与上面的逻辑一样,只是我们给内层盒子设置了 “border-box” 。然后我们来看效果:
这里我们看到,内层div的宽高都是200,和我们设置的宽高一样
再看看这个
在这张图中,我们发现我们设置的200*200是整体盒子的大小,与此同时我们可以发现在这个盒模型中包括了margin(外边距)、border(边框)、padding(内边框)、内容(content)
总结一下:在怪异盒模型下
一个块的总宽度 = width = margin(左右) + padding(左右) + border(左右) +内容宽度(content)
一个块的总高度 = height = margin(上下) + padding(上下) + border(上下) +内容高度(content)