盒子模型可以说是css中调整样式最基本的东西，弄懂它有助于你去调整一些间距和小样式，有必要掌握它。
盒模型基础
image.png
- 最里层是你内容（文本/图片等等）所占的大小
- 再往外就是内边距，它是内容与外直接接触部分的距离
- 外层 与 内层隔离带 是边框
- 最外层是外边距，一般用于调整盒子与盒子间间距
PS：调整时，明确你调整的是哪一层次，就很好下手了。
整个盒子大小计算公式：
宽度 = 左右外边距 + 2倍边框大小 + 左右内边距 + 内容宽度
高度 = 上下外边距 + 2倍边框大小 + 上下内边距 + 内容高度
盒模型参照标准
先来看看下图：
Snip20180617_1.png
对应html如下：
<!DOCTYPE html>
<html>
<head>
<title>盒模型</title>
</head>
<style>
#box1 {
width: 400px;
height: 300px;
border: 10px solid green;
margin-bottom: 5px;
}
#box2 {
width: 400px;
height: 300px;
border: 10px solid green;
box-sizing: border-box; // 设置盒子为宽、高为整个盒子高宽
}
</style>
<body>
<div id="box1">
我是默认的盒子,box-sizing: content-box
</div>
<div id="box2">
盒子等同于宽高大小，所以显的小些：box-sizing: border-box
</div>
</body>
</html>
盒模型参照标准有两个：
- 默认情况下，content-box(宽度、高度仅仅指内容宽高）
- box-sizing: border-box(宽、高指整个盒子大小）
网友评论