CSS盒子模型（结构图+border+padding+margin+基本计算）

css盒子模型

• HTML元素都可以被认为是盒子。
• css盒模型代表网站的设计和布局。
• 包括三个部分：margin border padding content
• 工作顺序为：顺时针方向： 上 右 下 左
• css通过盒模型来确定元素的大小以及如何放置这些元素。

知识点清单：

1. 结构图
2. border 边框
3. padding 填充
4. margin 边距
5. 基本计算

1.结构图：

2.border 边框

• border-width : 指定边框的宽度。
• border-color: 指定边框颜色
• border-style: 默认值是none。此外还有dotted点线、 dashed虚线 、double双精度等 。针对不同的边框样式，可以指定： border-top-style等格式

3.padding 填充

• 在盒模型中设置背景颜色时，将覆盖content内容区域+padding填充区域。