盒子模型组成
- 内容区域 -width&height
- 内边距-padding （出现在内容与盒子边缘之间）
- 边框线-border
- 外边距-margin （出现在盒子外面）
div {
width: 200px;
height: 200px;
background-color: rgb(85, 226, 193);
padding: 20px;
border: 2px solid #000;
margin: 20px;
}
盒子模型——边框线
属性名：border(bd)
属性值：边框线粗细 线条样式 颜色（不区分顺序）
常用的线条样式
| 属性值 | 线条样式 |
|---|---|
| solid | 实线 |
| dashed | 虚线 |
| dotted | 点线 |
同时还能设置单方向边框线
属性名：border-方位名词（bd+方位名词首字母）
例如：
盒子模型——内边距
作用：设置内容与盒子边缘之间的距离
属性名：padding/padding-方位名词
padding的多值写法
| 取值个数 | 示例 | 含义 |
| 一个值 | padding:20px | 四个方向均为20px |
| 四个值 | padding:10px 20px 30px 40px | 分别代表上，右，下，左 |
| 三个值 | padding:10px 20px 30px | 上：10px ；左右20px ；下30px |
| 两个值 | padding:10px 20px | 上下：10px；左右20px |
盒子模型——尺寸计算
盒子尺寸=内容尺寸+boder尺寸+内边距尺寸
解决盒子撑大的问题：
- 手动做减法，减掉border/padding的尺寸
- 内减模式：box-sizing:border-box
示例：
最开始的盒子为
div {
width: 200px;
height: 200px;
background-color: rgb(85, 226, 193);
}
在添加边框和内边距后
div {
width: 200px;
height: 200px;
background-color: rgb(85, 226, 193);
border: 20px solid rebeccapurple;
padding: 30px;
}
盒子由原来的200×200变为300×300（原因是四边都要加上border和padding）
此时使用手动减法，减去border和padding的尺寸
div {
width: 100px;
height: 100px;
background-color: rgb(85, 226, 193);
border: 20px solid rebeccapurple;
padding: 30px;
}
或者使用第二种内减模式
div {
width: 200px;
height: 200px;
background-color: rgb(85, 226, 193);
border: 20px solid rebeccapurple;
padding: 30px;
box-sizing: border-box;
}
以上两种可以避免盒子被撑大。
盒子模型——外边距
属性名：margin
与padding属性写法完全相同，包括多值写法，同时margin不会撑大盒子。
实现版心居中的效果：要求盒子必须要有width属性
margin: 0 auto;
