css 溢出overflow

时间:2021-11-07 03:43:53

css 溢出overflow

当一个元素被设置为固定大小,在这个元素中的内容如果超出元素的界限,就会出现溢出的现象。

通常情况下我们可以通过overflow来控制这个属性。

overflow语法定义

语法如下:

overflow:visible | hidden | scroll | auto | inherit

初始值:visible

注意:除了IE7-浏览器外,其他浏览器都不支持给table-cell元素设置overflow属性。firefox和IE11浏览器不支持给table-cell元素的设置100%高度的子元素设置overflow属性

overflow-x、overflow-y

overflow-x和overflow-y的属性原本是IE浏览器独自拓展的属性,后来被CSS3采用,并标准化。overflow-x主要用来定义对水平方向内容溢出的剪切,而overflow-y主要用来定义对垂直方向内容溢出的剪切

注意:如果overflow-x和overflow-y值相同则等同于overflow。如果overflow-x和overflow-y值不同,且其中一个值显式设置为visible或未设置默认为visible,而另外一个值是非visible的值。则visible值会被重置为auto。

属性介绍

visible

元素的内容在元素框之外也可见

注意1:IE6-浏览器中元素的包含块会延伸,使得可以包裹其超出的内容

.box{
height: 200px;
width: 200px;
background-color: lightgreen;
}
.in{
width: 300px;
height: 100px;
background-color: lightblue;
}
<div class="box">
<div class="in"></div>
</div>

左图为IE6-浏览器,右图为其他浏览器

css 溢出overflow

注意2:IE7-浏览器的按钮(包括和两种)存在bug,当按钮上的文字越多时,按钮两侧的padding就越大。通过设置overflow:visible就可解决该问题

左图为默认情况,右图为设置overflow后的情况

css 溢出overflow

auto

如果内容被剪裁,则浏览器会显示滚动条以便查看其余的内容

注意:对于一般浏览器来说,<html><textarea>默认带有overflow:auto的属性。但IE7-浏览器则不同,默认存在纵向滚动条

scroll

元素的内容会在元素框的边界处剪裁,但浏览器会显示滚动条以便查看其余的内容

注意:firefox和IE8+浏览器在overflow:scroll或auto时,存在padding-bottom缺失现象

.box{
width: 100px;
height: 100px;
padding: 50px;
background-color: pink;
overflow:scroll;
}
.in{
width: 100px;
height: 200px;
background-color: lightgreen;
}
<div class="box">
<div class="in"></div>
</div>

左图为chrome浏览器的情况,右图为firefox浏览器的情况

css 溢出overflow

hidden

元素的内容会在元素框的边界处剪裁,并且超出剪裁区域的内容不可见.

失效

绝对定位元素不总是被父级overflow属性剪裁,尤其是当overflow在绝对定位元素及其包含块之间的时候

注意:由于固定定位是相对于视窗定位的,所以固定定位元素无法被其所有的父级元素overflow属性剪裁

解决方法:

  1. overflow元素自身为包含块。

    给父级设置position:absolute或fixed或relative

  2. overflow元素的子元素为包含块

    在绝对定位元素和overflow元素之间增加一个元素并设置position:absolute或fixed或relative

    <div style="overflow:hidden;">
    <div style="position:relative">
    <div style="position:absolute">绝对定位元素</div>
    </div>
    </div>

常见应用

当overflow设置为auto或scroll或hidden时可以触发BFC,使得overflow可以实现一些相关应用。

例如:父元素在没有设置高度依赖子元素撑起的情况下,子元素脱离标准文档流,那么父元素的高度将会失去效应。这时可以给父元素设置overflowvisible的值。

注意:IE6-浏览器使用overflow这种方式并不能清除浮动,常用的消除浮动的方法是

.clear{
*zoom: 1;
}
.clear:after{
content: '';
display: block;
clear: both;
}