目录
CSS盒子模型
padding内填充
边框
边框属性
border-radius
margin外边距
CSS盒子模型
- Content(内容): 盒子的内容，显示文本和图像 >>>>类似word 文字A，改变字体与大小
- padding: 用于控制内容与边框之间的距离 >>>>类似word文字填充
- Border(边框): 围绕在内边距和内容外的边框 >>>>边框
- margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。 >>>>文字间隔
padding内填充
.padding-test {padding-top: 5px;padding-right: 10px;padding-bottom: 15px;padding-left: 20px;
}推荐使用简写：
.padding-test {padding: 5px 10px 15px 20px;
}顺序：上右下左
补充padding的常用简写方式：
- 提供一个，用于四边；
- 提供两个，第一个用于上－下，第二个用于左－右；
- 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
- 提供四个参数值，将按上－右－下－左的顺序作用于四边；
边框
边框属性
- border-width
- border-style
- border-color
#i1 {border-width: 2px;border-style: solid;border-color: red;
}通常使用简写方式：
#i1 {border: 2px solid red;
}边框样式
| 值 | 描述 |
|---|---|
| none | 无边框。 |
| dotted | 点状虚线边框。 |
| dashed | 矩形虚线边框。 |
| solid | 实线边框。 |
除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示：
#i1 {border-top-style:dotted;border-top-color: red;border-right-style:solid;border-bottom-style:dotted;border-left-style:none;
}border-radius
用这个属性能实现圆角边框的效果。
将border-radius设置为长或高的一半即可得到一个圆形。
margin外边距
.margin-test {margin-top:5px;margin-right:10px;margin-bottom:15px;margin-left:20px;
}推荐使用简写：
.margin-test {margin: 5px 10px 15px 20px;
}顺序：上右下左
常见居中：
.mycenter {margin: 0 auto;
}
摘抄自：https://www.cnblogs.com/liwenzhou/p/7999532.html
