什么是CSS盒子模型

CSS盒子模型描述了网页周围形成的元素盒子。即使它是一个圆的图像，网页的每个元素也在一个盒子里面，或者就是一个盒子。网页的盒子是由盒子模型定义的规则约束。

CSS盒子属性

CSS盒子模型的部分：

CSS盒子模型是由四部分组成：

边缘

边界

填充

内容

边缘是盒子的最外边缘。它是很明显的，显示了页面的元素和其他内容之间的空隙。边缘能互相破解，以便于一个元素的下边距与它下面的元素的顶部边缘重叠。

接下来就该讲讲边界了。边界能被着色或者透明化。如果边界被设置为0，它实际上是会消失的，边框边缘和填充边缘相同的。

填充是内容和边界之间的间距。填充是和盒子的背景色相同。如果填充设置为0，那么填充边界跟内容边界是相同的。

内容是大多数人所认为的元素。这是文本或者任何显示在盒子内的图像。

你可以用CSS属性来操作盒子模型的不同的部分：

边缘

边界

填充

宽度

高度

盒子模型的问题：

不是所有的网页浏览器都是以同样的方式来处理CSS盒子模型的问题。

简而言之，根据W3C来讲，宽度和高度属性都定义了盒子内容的宽度和高度，比如填充，边界和边缘的宽度和高度。

除了有些IE的版本会把宽度和高度定义为整个元素的宽度和高度，包括填充和边界。

如果你想你的设计看起来和所有浏览器一样，你必须使用窍门，有时候还需要尝试用技巧让IE正常工作。

盒子模型技巧

块级元素：

盒子模型的其他内容就是关于不同的元素怎么表现的。有些是被认为块级元素，这些元素创建了文档内部浮动的盒子。比如，段落，图像和所有块级元素表单。

定义：块级元素

块级标签

内联元素：

内联元素不会破坏文档的流程。因为他们一般是在文本内被发现，所以他们一般被称为文本级元素。内联元素的例子有跨度，加粗，缩写。