【学习笔记】html基础第九更/盒子模型（css布局②）

CSS盒子模型：W3C组织建议把所有的网页上的对象都放在一个盒子中(在定义盒子宽高的时候，要考虑到内填充，边框，边界的存在）

一个盒子的构成：
盒子中的内容：content
盒子的边框：border
盒子边框与内容之间的距离：称为填充---padding内边距（内补丁）
如果有多个盒子存在，盒子与盒子之间的距离：称为边界---margin，外边距（外补丁）

整个盒子模型在网页中所占的宽度：左边界+左边框+左填充+内容+右填充+右边框+右边界

CSS盒子模型的属性：
内容属性：宽=width 高=height
内填充属性（内容与边框之间的距离）：padding
外边距属性：margin（使用该属性的时候注意浏览器的兼容性）
内填充与边界的规则：
如果有四个参数：表示上右下左,也可以单单指定某个方向
如果只有一个参数：表示上右下左
如果有两个参数： 第一个参数表示上下 第二个参数表示左右
如果三个参数：表示上 左右 下
边框属性：border

盒子模型有两种，分为IE盒子模型和标准W3C盒子模型，我们只学习标准盒子模型，如下图

标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

上面提到了，我们只学习标准盒子模型，并且期望在实际操作中也去选择标准盒子模型，那么如何选择“标准 W3C 盒子模型”呢？

很简单——在网页的顶部加上 DOCTYPE 声明

(如果不加 DOCTYPE 声明，那么各个浏览器会根据自己的行为去理解网页，即 IE 浏览器会采用 IE 盒子模型去解释你的盒子，而 FF 会采用标准 W3C 盒子模型解释你的盒子,所以网页在不同的浏览器中就显示的不一样了。) 如果加上了 DOCTYPE 声明，那么所有浏览器都会采用标准 W3C 盒子模型去解释你的盒子，就能保证我们的网页在各个浏览器中显示一致了。

本笔记整理自imooc课程及度娘，感兴趣的童鞋可以自行搜索之~多谢观看啦!!☆⌒(*＾-゜)v