深入理解CSS溢出overflow
2016-10-13 21:08
453 查看
实例
设置 overflow 属性:div { width:150px; height:150px; [code]overflow:scroll;
}
[/code]
亲自试一试
浏览器支持
所有主流浏览器都支持 overflow 属性。注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。
定义和用法
overflow 属性规定当内容溢出元素框时发生的事情。说明
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。默认值: | visible |
---|---|
继承性: | no |
版本: | CSS2 |
JavaScript 语法: | object.style.overflow="scroll" |
可能的值
值 | 描述 |
---|---|
visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
hidden | 内容会被修剪,并且其余内容是不可见的。 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
inherit | 规定应该从父元素继承 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 | hidden | scroll | auto | inherit | no-display | no-content 初始值: 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-浏览器,右图为其他浏览器
左图为默认情况,右图为设置overflow后的情况
如果内容被剪裁,则浏览器会显示滚动条以便查看其余的内容
[注意]对于一般浏览器来说,<html>和<textarea>默认带有overflow:auto的属性。但IE7-浏览器则不同,默认存在纵向滚动条
//IE7-浏览器 html{overflow-y: scroll;} //其他浏览器 html{overflow: auto;} //去除页面默认滚动条 html{overflow: hidden;}
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浏览器的情况
元素的内容会在元素框的边界处剪裁,并且超出剪裁区域的内容不可见
no-display
当内容溢出容器时不显示元素,类似于元素添加了display:none属性一样
no-content
当内容溢出窗口时不显示内容,类似于元素添加了visibility: hidden属性一样
[注意]no-display和no-content这两个属性目前没有浏览器支持
失效
绝对定位元素不总是被父级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可以实现一些相关应用。关于BFC的详细信息移步至此【1】清除浮动影响
[注意]IE6-浏览器使用overflow这种方式并不能清除浮动,常用的消除浮动的方法是
.clear{ *zoom: 1; } .clear:after{ content: ''; display: block; clear: both; }
【2】避免margin穿透
[注意]使用overflow属性只是避免margin穿透的很多方法中的一个,其他的方法还有BFC化、设置padding、设置border等 【3】两栏自适应布局
[注意]使用overflow属性的场景限制比较明显,常用的两栏自适应布局的方法:
.cell{ display: table-cell; width: 2000px; *display: inline-block; *width:auto; }
【4】选项卡
overflow选项卡主要用于单页应用
<div class="box"> <ul class="show"> <li class="show-in" id="one">1</li> <li class="show-in" id="two">2</li> <li class="show-in" id="three">3</li> <li class="show-in" id="four">4</li> </ul> <nav class="con"> <a class="con-in" href="#one">1</a> <a class="con-in" href="#two">2</a> <a class="con-in" href="#three">3</a> <a class="con-in" href="#four">4</a> </nav> </div>
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; }
好的代码
相关文章推荐
- 深入理解CSS溢出overflow
- 深入理解CSS溢出overflow
- 深入理解CSS溢出overflow
- 深入理解:overflow:hidden——溢出,坍塌,清除浮动
- CSS深入理解之overflow
- CSS深入理解之overflow
- css属性之overflow深入理解
- CSS深入理解之overflow(HTML/CSS)
- CSS深入理解之overflow
- 深入理解:overflow:hidden——溢出,坍塌,清除浮动
- CSS深入理解之overflow
- 深入理解:overflow:hidden——溢出,坍塌,清除浮动
- 深入理解css中的position定位和z-index属性,CSS的定位属性共有9个
- 第2章 Java内存区域与内存溢出异常--《深入理解 Java 虚拟机》笔记
- CSS文本溢出:text-overflow:ellipsis
- css行高line-height的一些深入理解及应用
- CSS基础:text-overflow:ellipsis溢出文本的显示样式
- css行高line-height的一些深入理解及应用
- CSS中背景background-position负值定位深入理解
- CSS中背景background-position负值定位深入理解-CSS教程