文章介绍了CSS盒模型的两种主要类型：标准盒模型（content-box）和怪异盒模型（border-box）。在标准模型中，宽度包括内容区、内边距和边框，而在怪异模型中，宽度仅指边框内的区域。box-sizing属性用于切换这两种模型，且不可继承。示例代码展示了两种盒模型在实际布局中的差异。
盒模型由content padding border margin 组成
标准盒模型 box-sizing：content-box（默认值）
width（宽）=width+padding左右+border左右
怪异盒模型（ie盒模型）box-sizing：border-box；
width（宽）=width（包括了padding左右和border左右）
可以通过box-sizing实现盒模型的转换
box-sizing不能继承
例：代码如下
<!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>
*{padding: 0;margin: 0;}
.standard{
width: 300px;
height: 300px;
padding: 20px;
border: 10px solid blue;
background-color: pink;
}
.strange{
width: 300px;
height: 300px;
padding: 20px;
border: 10px solid red;
background-color: gainsboro;
box-sizing: border-box;
margin: 20px;
}
</style>
</head>
<body>
<div class="standard">标准盒模型</div>
<div class="strange">怪异盒模型</div>
</body>
</html>
扫一扫
1035
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
