深入理解CSS溢出overflow - 小火柴的蓝色理想

程序员文章站 2022-04-15 11:31:07

...

前面的话

　　当一个元素固定为某个特定大小，但内容在元素中放不下。此时就可以利用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

　　应用于: 块级元素、替换元素、表单元格

　　继承性: 无

属性

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-浏览器，右图为其他浏览器

　　[注意2]IE7-浏览器的按钮(包括

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

auto

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

　　[注意]对于一般浏览器来说，

和

默认带有overflow:auto的属性。但IE7-浏览器则不同，默认存在纵向滚动条
<div class="cnblogs_code">
<pre class="brush:php;toolbar:false">//IE7-浏览器 
html{overflow-y: scroll;}
//其他浏览器
html{overflow: auto;}
//去除页面默认滚动条
html{overflow: hidden;}</pre>
</div>
scroll
　　元素的内容会在元素框的边界处剪裁，但浏览器会显示滚动条以便查看其余的内容
　　[注意]firefox和IE8+浏览器在overflow:scroll或auto时，存在padding-bottom缺失现象
<div class="cnblogs_code">
<pre class="brush:php;toolbar:false">.box{
 width: 100px;
 height: 100px;
 padding: 50px;
 background-color: pink;
 overflow:scroll;
}
.in{
 width: 100px;
 height: 200px;
 background-color: lightgreen;
}</pre>
</div>
<div class="cnblogs_code">
<pre class="brush:php;toolbar:false">div class="box">
 div class="in">div>
div></pre>
</div>
　　左图为chrome浏览器的情况，右图为firefox浏览器的情况
<table border="0"><tbody><tr>
<td><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczIwMTUuY25ibG9ncy5jb20vYmxvZy83NDA4MzkvMjAxNjAzLzc0MDgzOS0yMDE2MDMxNzIzNDExMDgzNC0xNDA1NDgwNzA0LmpwZw==" alt="深入理解CSS溢出overflow - 小火柴的蓝色理想" title="深入理解CSS溢出overflow - 小火柴的蓝色理想"></td>
<td><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczIwMTUuY25ibG9ncy5jb20vYmxvZy83NDA4MzkvMjAxNjAzLzc0MDgzOS0yMDE2MDMxNzIzNDExODUyMS0yMDEzNTcwMzYxLmpwZw==" alt="深入理解CSS溢出overflow - 小火柴的蓝色理想" title="深入理解CSS溢出overflow - 小火柴的蓝色理想"></td>
</tr></tbody></table>
hidden
　　元素的内容会在元素框的边界处剪裁，并且超出剪裁区域的内容不可见
no-display
　　当内容溢出容器时不显示元素，类似于元素添加了display:none属性一样
no-content
　　当内容溢出窗口时不显示内容，类似于元素添加了visibility: hidden属性一样
　　[注意]no-display和no-content这两个属性目前没有浏览器支持
 
<h3 id="anchor3">失效</h3>
 　　绝对定位元素不总是被父级overflow属性剪裁，尤其是当overflow在绝对定位元素及其包含块之间的时候
 　　　　[注意]由于固定定位是相对于视窗定位的，所以固定定位元素无法被其所有的父级元素overflow属性剪裁 
<iframe style="width: 100%; height: 230px;" src="http://sandbox.runjs.cn/show/ggqxnrl4" frameborder="0" width="320" height="240"></iframe>
【解决办法】
【1】overflow元素自身为包含块
　　给父级设置position:absolute或fixed或relative
<iframe style="width: 100%; height: 260px;" src="http://sandbox.runjs.cn/show/wlndlyuh" frameborder="0" width="320" height="240"></iframe>
【2】overflow元素的子元素为包含块
　　在绝对定位元素和overflow元素之间增加一个元素并设置position:absolute或fixed或relative
<div class="cnblogs_code">
<pre class="brush:php;toolbar:false">div style="overflow:hidden;">
 div style="position:relative">
 div style="position:absolute">绝对定位元素div> 
 div> 
div></pre>
</div>
 
<h3 id="anchor4">应用</h3>
　　当overflow设置为auto或scroll或hidden时可以触发BFC，使得overflow可以实现一些相关应用。<a href="http://www.cnblogs.com/xiaohuochai/p/5248536.html" target="_blank" rel="nofollow">关于BFC的详细信息移步至此</a>
【1】清除浮动影响
<iframe style="width: 100%; height: 230px;" src="http://sandbox.runjs.cn/show/au010jbz" frameborder="0" width="320" height="240"></iframe>
　　[注意]IE6-浏览器使用overflow这种方式并不能清除浮动，常用的消除浮动的方法是
<div class="cnblogs_code">
<pre class="brush:php;toolbar:false">.clear{
 *zoom: 1;
}
.clear:after{
 content: '';
 display: block;
 clear: both;
}</pre>
</div>
 
【2】避免margin穿透
<iframe style="width: 100%; height: 230px;" src="http://sandbox.runjs.cn/show/8eqzbwqx" frameborder="0" width="320" height="240"></iframe>
　　[注意]使用overflow属性只是避免margin穿透的很多方法中的一个，其他的方法还有BFC化、设置padding、设置border等 
 
【3】两栏自适应布局
<iframe style="width: 100%; height: 230px;" src="http://sandbox.runjs.cn/show/q7u2vxgh" frameborder="0" width="320" height="240"></iframe>
　　[注意]使用overflow属性的场景限制比较明显，常用的两栏自适应布局的方法:
<div class="cnblogs_code">
<pre class="brush:php;toolbar:false">.cell{
 display: table-cell; width: 2000px;
 *display: inline-block; *width:auto;
}</pre>
</div>
 
【4】选项卡
 　　overflow选项卡主要用于单页应用
<div class="cnblogs_code">
<pre class="brush:php;toolbar:false">div class="box">
 ul class="show">
 li class="show-in" id="one">1li>
 li class="show-in" id="two">2li>
 li class="show-in" id="three">3li>
 li class="show-in" id="four">4li>
 ul>
 nav class="con">
 a class="con-in" href="#one">1a>
 a class="con-in" href="#two">2a>
 a class="con-in" href="#three">3a>
 a class="con-in" href="#four">4a>
 nav> 
div> </pre>
</div>
<div class="cnblogs_code">
<pre class="brush:php;toolbar:false">body{
 margin: 0;
 text-align: center;
}
ul{
 margin: 0;
 padding: 0;
 list-style: none;
}
a{
 text-decoration: none;
 color: inherit;
}
.show{
 width: 100px;
 height: 100px;
 overflow: hidden;
 border: 1px solid black;
 line-height: 100px;
 font-size: 40px;
} 
.show-in{
 width: 100px;
 height: 100px;
}
#one{
 background-color: lightgreen;
}
#two{
 background-color: lightyellow;
}
#three{
 background-color: lightblue;
}
#four{
 background-color: pink;
}
.con{
 margin: 10px 0 0 10px;
 width: 100px;
}
.con-in{
 display:inline-block;
 width: 16px;
 line-height: 16px;
 border: 1px solid black;
 background-color: gray;
}</pre>
</div>
<iframe style="width: 100%; height: 200px;" src="http://sandbox.runjs.cn/show/9w3vdrhw" frameborder="0" width="320" height="240"></iframe>

相关标签：深入理解CSS溢出overflow - 小火柴的蓝色理想

上一篇： javascript实现在光标处插入指定内容_javascript技巧

下一篇： php实现比较两个字符串日期大小的方法，php字符串

深入理解CSS溢出overflow - 小火柴的蓝色理想

目录

前面的话

定义

属性

深入理解CSS中的margin负值 - 小火柴的蓝色理想

深入理解CSS变形transform(3d) - 小火柴的蓝色理想

CSS三列布局 - 小火柴的蓝色理想

CSS全屏布局的5种方式 - 小火柴的蓝色理想

深入理解CSS变形transform(3d) - 小火柴的蓝色理想

理解CSS相对定位和固定定位 - 小火柴的蓝色理想

CSS全屏布局的5种方式 - 小火柴的蓝色理想

深入理解CSS变形transform(2d) - 小火柴的蓝色理想

CSS文本方向 - 小火柴的蓝色理想

CSS多列布局 - 小火柴的蓝色理想