标准盒子与怪异盒子
从0到0.1学习实践盒子模型盒子模型概念
预备知识
[*]margin：外边距
[*]border：边框
[*]padding：内边距
[*]height：文本高度
[*]width：文本宽度
content-box
.father{
box-sizing: content-box;
}content-box --- >只计算内容区域的宽度和高度
*{
margin: 0;
padding: 0;
box-sizing: content-box;
}
.father{
height: 500px;
width: 500px;
background-color: plum;
border: 5px solid;
margin: 20px auto;
padding: 20px;
}
[*]盒子总宽度 = content-width（500px） + padding-left（20px） + padding-right（20px） + border-left（5px①） + border-right（5px①）
[*]总高度 = content-height（500px） + padding-top（20px） + padding-bottom（20px） + border-top（5px①） + border-bottom（5px①） = 130px
①：这里只有border不准确，border越小，误差越大
这里的4.984涉及到卷积，机器学习了，反正是浏览器的锅
总结：在 content-box 模型下,考虑四部分
border-box
border-box 包括内容,内边距和边框
这意味着在 border-box 模式下，元素的总宽度和高度更易于控制。
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.father{
height: 500px;
width: 500px;
background-color: plum;
border: 5px solid;
margin: 20px auto;
padding: 20px;
}
总宽度 = 520px
总高度 = 520px
总结：在 border-box 模型下,考虑两部分
盒子模型实践--制作一个九宫格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]