[摘要]这次给大家带来html的盒模型详解，使用html盒模型的注意事项有哪些，下面就是实战案例，一起来看一下。1.1. 盒的内容区的尺寸— content width和content height —取决...
这次给大家带来html的盒模型详解，使用html盒模型的注意事项有哪些，下面就是实战案例，一起来看一下。
1.1. 盒的内容区的尺寸— content width和content height —取决于几个因素：
--生成该盒的元素是否设置了'width'或'height'属性。
--该盒是否包含文本以及其它盒。
--该盒是不是表格等等。
1.2. 盒的背景色
--内边距和边框区域的背景样式由生成（该盒的）元素的'background'属性来指定。外边距背景总是透明的
2. 外边距属性： 'margin-top'，'margin-right'，'margin-bottom'，'margin-left'和'margin'
2.1. 外边距属性指定了盒的外边距区的宽度
--'margin'简写属性一次性设置四周的外边距，而其它外边距属性只设置它们各侧的。这些属性适用于所有元素，但非替换的行内元素上的垂直margin将不会产生任何效果
2.2. <margin-width>值类型，可以取下列值之一：
--<length>
指定一个固定宽度
--<percentage>
百分比根据生成盒的包含块的width来计算。注意，这一点对于'margin-top'和'margin-bottom'也适用。如果包含块的宽度取决于该元素，那么产生的布局在CSS 2.1是未定义的
--auto
--margin属性允许负值，但可能存在具体实现限制
2.3. 'margin-top', 'margin-bottom'
'margin-top', 'margin-bottom'
Value: <margin-width>
关键词：html的盒模型详细说明