width、height和overflow属性
一、Width
1、语法：width:auto/ length
2、参数：
（1）auto：默认值，无特殊定位，根据HTML定位规则分配。
（2）length：由浮点数字和单位标识符组成的长度值或者百分数。百分数是基于父对象的宽度。不可为负数。请参阅长度单位
3、说明：
设置对象的宽度。
对于img对象来说，仅指定此属性，其height值将根据图片源尺寸等比例缩放。
如果不设置width属性，未设置float属性的块级对象的宽度等于其父对象的宽度减去对象当前距父对象边缘的宽度。设置float属性的块级对象和内联对象的宽度根据内容的大小自适应，但最大不超过其父对象。
对应的脚本特性为：width。
4、相关属性：
（1）max-width：设置对象的最大宽度。（2）min-width：设置对象的最小宽度。二者的语法、参数和width相同。二者在IE下不被支持，FireFox下有时也会出问题，建议不使用，如果必须使用，则可以靠JavaScript编程实现。对应的脚本特性分别为：maxWidth和minWidth
二、Height
1、语法：height:auto/ length
2、参数：
（1）auto：默认值，无特殊定位，根据HTML定位规则分配。
（2）length：由浮点数字和单位标识符组成的长度值或者百分数。百分数是基于父对象的宽度。不可为负数。请参阅长度单位
3、说明：
设置对象的高度。
对于img对象来说，仅指定此属性，其width值将根据图片源尺寸等比例缩放。
对应的脚本特性为：height。
4、相关属性：
（1）max-height：设置对象的最大高度。（2）min-height：设置对象的最小高度。二者的语法、参数和width相同。二者在IE下不被支持，FireFox下有时也会出问题，建议不使用，如果必须使用，则可以靠JavaScript编程实现。对应的脚本特性分别为：maxHeight和minHeight
在IE下，当对象中的内容超出了对象规定的范围时，对象的高度会适应内容而增加。在FireFox中，对象的大小不变，可对象中的内容显示在对象的外面，这就需要用另一种属性来限制它。
三、Overflow
1、语法：overflow : visible/ auto / hidden / scroll
2、参数：
（1）visible：默认值，不剪切内容也不添加滚动条。IE下对象的大小自适应内容，FireFox下对象的大小不变，但内容溢出对象显示。
（2）auto：此为body对象和textarea的默认值，在需要时剪切内容并添加滚动条。通常都是添加右侧上下滚动条。
（3）hidden：隐藏超过对象尺寸的内容。
（4）scroll：总是显示滚动条。
3、说明：
设置当对象的内容超过其指定高度及宽度时如何管理内容。
所有对象的默认值是visible，除了textarea对象和body对象的默认值是auto。设置textarea对象此属性值为hidden将隐藏其滚动条。
对应的脚本特性为：overflow。
4、相关属性：
（1）overflow-x：设置当对象的内容超过其指定宽度时如何管理内容。（2）overflow-y：设置当对象的内容超过其指定高度时如何管理内容。二者皆为IE专有的属性，不推荐使用。因为这两个属性不兼容其它浏览器。
5、示例：
6、提示：
（1）当宽度选择“100px”，overflow属性选择“visible”时，在IE中，all对象的高度自动适应内容而增加；在FireFox中，all对象的尺寸没有发生变化，但内容却溢出显示。FireFox下效果如图：
所以，我们建议不要轻易使用visible。通常选用hidden隐藏超出的内容，或结合JavaScript截取内容。
Comments(0)
话题搜索
文章推荐