CSS盒模型

 

盒模型，它是基于CSS的Web设计中最重要的概念之一。

盒模型是针对HTML元素的一组规则，指定了元素的高度、宽度、内边距、边框和外边距是如何度量的。

　　

• margin属性应用于盒子外面的空间，或者是位于盒子和浏览器窗口之间的区域，或者是位于盒子和文档中其他元素之间的区域。
• 外边距折叠，当一个元素的上或下外边距正好和另一个元素的上或下外边距接触时，就会产生外边距折叠。这个概念很简单：两个外边距中更小的那个减少为零。如果两个元素的外边距具有相同的长度，那么其中一个减少为零。
• margin属性具有另外一个功能： 它用来居中或者对齐元素。
• 边框出现在和模型中的外边距和内边距之间。
• 内边距是元素的内容和边框之间的区域。
• Width属性是一个非常简单的属性，它用来设置一个元素的宽度。width是从左内边距边缘到右内边距边缘的距离。注意：当给一个元素应用宽度时，必须考虑到外边距，边框和内边距也是这个元素水平宽度的一部分。
• Width和height属性的值为auto，所以当不指定宽度和高度时，它们的值意味着auto关键字。auto关键字会根据应用的元素类型变化。当它应用到<div>元素上时，意味着元素将横跨所有可用空间；垂直方面上，会扩展到容纳元素内部的内容，包括文本、图像或者其他盒子。具有这种行为的元素，我们称为块级元素。
• 根据定义，块级元素占据整行。一个元素占据它水平方向上的所有空间，这种设置大小的方法叫做“扩展效应”。
• 块级元素上的auto高度，却表现的有点不同，元素只会扩展到足够可以容纳与元素中的内容，称为“收缩效应”