CSS盒模型详解
快递车上包裹盒子模型
盒子的特征： 每个盒子都有 边距、边框、填充、内容四个属性
CSS盒子模型
在浏览器中，把一个个html元素当成一个个盒子。把一个个盒子摆放到浏览器的窗口当中。
boder、padding、margin 都有top、right、bottom、left 四部分
语法：
width：<length> | <percentage> | auto | inherit
默认值：auto | inherit
适用于：除非置换内联元素，table-row, table-row-group之外的所有元素
继承性：无
动画性：当值为<length> | <percentage>时
计算值：指定的值
取值：
auto： 无特定宽度值，取决于其它属性值 <length>： 用长度值来定义宽度。不允许负值 <percentage>： 用百分比来定义宽度。百分比参照包含块宽度。不允许负值
说明：
检索或设置对象的宽度。
- 对于img对象来说，仅指定此属性，其height值将根据图片源尺寸等比例缩放。
- 对于盒模型规则，请参阅box-sizing属性。
- 对应的脚本特性为width。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>width宽度</title> <style type="text/css"> body{ padding: 0; margin: 0; width: 100%; height: 100%; } div,span{ background-color: pink; } .sample{ /*width: 200px;*/ width: 50%; } span{ width: 50%;/*给 inline元素设置宽度是无效的*/ } </style> </head> <body> <div class="sample">sample</div> <br> <span>inline</span> </body> </html>
最大宽度
语法：
max-width：<length> | <percentage> | none
默认值：none
适用于：除非置换内联元素，table-row, table-row-group之外的所有元素
继承性：无
动画性：当值为<length> | <percentage>时
计算值：指定的值
取值：
-
none： 无最大宽度限制
<length>： 用长度值来定义最大宽度。不允许负值
<percentage>： 用百分比来定义最大宽度。不允许负值
说明：
设置或检索对象的最大宽度。
- 如果max-width属性的值小于min-width属性的值，max-width将会自动以min-width的值作为自己的值。
- IE6尚不支持此属性
- 对应的脚本特性为maxWidth。
height --- 高度
语法：
height：<length> | <percentage> | auto | inherit
默认值：auto | inherit
适用于：除非置换内联元素，table-column, table-column-group之外的所有元素
继承性：无
动画性：当值为<length> | <percentage>时
计算值：指定的值
取值：
-
auto： 无特定高度值，取决于其它属性值
<length>： 用长度值来定义高度。不允许负值
<percentage>： 用百分比来定义高度。不允许负值
说明：
检索或设置对象的高度。
- 对于img对象来说，仅指定此属性，其width值将根据图片源尺寸等比例缩放。
- 对于盒模型规则，请参阅box-sizing属性。
- 对应的脚本特性为height。
min-height --- 最小高度
语法：
min-height：<length> | <percentage>
默认值：0
适用于：除非置换内联元素，table-row, table-row-group之外的所有元素
继承性：无
动画性：当值为<length> | <percentage>时
计算值：指定的值
取值：
-
<length>： 用长度值来定义最小高度。不允许负值
<percentage>： 用百分比来定义最小高度。不允许负值
说明：
检索或设置对象的最小高度。
- 如果min-height属性的值大于max-height属性的值，max-height将会自动以min-height的值作为自己的值。
- IE6尚不支持此属性。IE6的变通实现方法请参考 最小高度min-height实现详解。
- 对应的脚本特性为minHeight。
扫一扫
5906
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
