CSS使用@R_978_2419@模型的原因是:
+---------------------
| Margin
| +-------------------
| | Border
| | +-----------------
| | | Padding
| | | +---------------
| | | | Width x Height
是因为CSS是一种文档样式语言。(最初)设计时考虑了研究论文和其他正式文件,而不是用来制作漂亮的图形。因此,模型围绕内容而不是容器旋转。
CSS不是一种编程语言,而是一种样式语言。它没有明确告诉文档应如何显示,而是提出了浏览器应遵循的一些准则。所有这些都可以由实际的编程语言:JavaScript 覆盖和修改。
回到内容模型的想法,考虑以下CSS:
p
{
background-color: #EEE;
border: 1px solid #CCC;
color: #000;
margin: 10px;
padding: 9px;
width: 400px;
}
height未指定,因为内容定义了高度,它可能会很长,可能会很短,但这是未知且无关紧要的。该width设置,因为这是有多宽400像素的内容(文本)应该是。
该padding仅仅是延长的背景颜色,使的手段文字可以从边缘清晰漂亮了,就像你如何留出空间上的一张纸上写时/打印。
这border是一种围绕某些内容以使其与其他背景区分开的方法,或在各种元素之间提供边框(图形)。
该margin通知段落离开边缘之间一定的空间,并与容限塌陷,每组将保持均匀,而不必隔开指定不同的余量为所述第一或最后一个元素。
为了保持流畅性,width默认为auto,这意味着宽度将尽可能宽:
不会不合理地压缩内容没有填充物超出其容器当然,在边缘情况下,填充内容将扩展到其容器之外,因为内容可能会被压缩。这都是关于内容的。