CSS溢出使用overflow隐藏方法

老白 5个月前 259浏览 0评论

CSS定义中的overflow属性,封装了溢出处理的这个概念。在盒子模型中的代表标签的矩形对象,可以通过CSS样式来定义内容区域的高度与宽度,当这个内容无法容纳子矩形对象时,对于这些子矩形对象必须决定怎么显示,显示什么,这样的处理规则就称为溢出处理。浏览器在做显示运算的时候,会依照溢出处理,来计算内容区域无法容纳的子矩形对象在浏览器上的显示方式。

1.visible:

当开发人员将矩形对象的overflow属性设置为visible时,如果内容区域的大小能够容纳子矩形对象,浏览器会正常地显示子矩形对象;当内容区域无法容纳子矩形区域时,浏览器会在内容区域之外,显示完整的子矩形对象。

2.hidden:

当开发人员将矩形对象的overflow属性设置为hidden时,如果内容区域的大小能够容纳子矩形对象,浏览器会正常地显示子矩形对象;当内容区域无法容纳子矩形区域时,浏览器会显示内容区域之内的子矩形对象,超出内容区域的则不显示。

3.scroll:

当开发人员将矩形对象的overflow属性设置为scroll时,如果内容区域的大小能够容纳子矩形对象,浏览器会正常地显示子矩形对象,并且显示预设滚动条;当内容区域无法容纳子矩形区域时,浏览器会在内容区域之内显示完整的子矩形对象,并且显示滚动条、启用滚动条功能,让用户能够浏览完整的子矩形对象。

4.auto:

当开发人员将矩形对象的overflow属性设置为auto时,如果内容区域的大小能够容纳子矩形对象,浏览器会正常地显示子矩形对象;当内容区域无法容纳子矩形区域时,浏览器会在内容区域之内显示完整的子矩形对象,并且显示滚动条、启用滚动条功能,让用户能够浏览完整的子矩形对象。

个人觉得:visible适用于,只有浏览器的一部分内容区域中有矩形对象时。否则,溢出的部分会对其他矩形对象造成遮挡;

hidden做的太绝了,无法显示溢出内容!!!这个世界就不完整了啊。。。。。。

scroll基本能满足人类的需要,通过滚动条的方式显示完整的世界,而且不会遮挡其他矩形对象;

auto简直就是人类的福音,在能够完全显示的情况下,不会加滚动条多此一举,在溢出的时候又能够完整呈现,简直,完美!~

发表评论