如何理解盒模型及其content、padding、border、margin？

分享人：林璇

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

盒子模型的简介
盒子模型的英文名字是叫做box model,而且HTML也是一个盒子
自然就包括了div a span 都可以成为盒子的，盒子模型是分为这几个的
1 content（中心）2 padding（内边距）3 border（边框）
4 margin（外边距）
盒子模型分为IE盒子模型和标准盒子模型

关于这五个属性
width(宽度)：内容中心的一个宽度
height(高度)：内容中心的一个高度
padding（内边距）：在边框和内容的一个中间地方，可以直接用padding属性来控制
border（边框）：在内边距和外边距之间的一个边框
margin（外边距）：在最外面的叫做外边距，可以控制margin来创建一个距离外边的一个空白




2.知识剖析

1. 盒子模型：
1>. IE盒子模型和标准盒子模型的区别？
在 CSS的标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。
增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。
2>.每一个属性的四个部分
盒子模型边框部分，都有上，下，左，右这样的属性可以设置














3.常见问题

盒子模型为什么无法贴边？

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

博客
b站视频

8.更多讨论

1.盒子模型的最终元素的总宽度计算公式是怎么样的呢？

2.盒子模型的最终元素的总高度计算公式是怎么样的呢？

3.那我们怎样让我们的元素都遵循W3C标准盒子模型呢？

1.总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

2.总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

3.html的文件头部是不是有一个!DOCTYPE html，有这个，就说明你已经遵循W3C标准盒子模型了。

鸣谢

感谢大家观看

By 林璇