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填充区域。

4.margin 边距

空白边位于盒子的最外围，是添加在边框外周围的空间。空白边使盒子之间不会紧凑地连接在一起，是CSS 布局的一个重要手段。

5.基本计算

总元素高度 = 高度(height) + 顶部填充(padding-top) + 底部填充(padding-bottom) + 顶部边框(border-top) + 底部边框(border-bottom) + 顶部边距(margin-top) + 底部边距(margin-bottom)

遇到内容div想居中于外部div中，可以使用 margin : 0 auto 这样会根据内部div宽度自动填充左右两侧的margin值以达到居中效果