您的位置：首页 > 其它

盒子模型

2016-11-25 11:17 176 查看

快递车上包裹盒子模型

盒子的特征：每个盒子都有边距、边框、填充、内容四个属性

CSS盒子模型

在浏览器中，把一个个html元素当成一个个盒子。把一个个盒子摆放到浏览器的窗口当中。

boder、padding、margin 都有top、right、bottom、left 四部分

盒模型属性

语法：

取值：

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 --- 高度

语法：

取值：

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。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航