css 溢出overflow
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-浏览器,右图为其他浏览器
注意2:IE7-浏览器的按钮(包括和两种)存在bug,当按钮上的文字越多时,按钮两侧的padding就越大。通过设置overflow:visible就可解决该问题
左图为默认情况,右图为设置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浏览器的情况
hidden
元素的内容会在元素框的边界处剪裁,并且超出剪裁区域的内容不可见.
失效
绝对定位元素不总是被父级overflow属性剪裁,尤其是当overflow在绝对定位元素及其包含块之间的时候
注意:由于固定定位是相对于视窗定位的,所以固定定位元素无法被其所有的父级元素overflow属性剪裁
解决方法:
给
overflow
元素自身为包含块。给父级设置position:absolute或fixed或relative
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可以实现一些相关应用。
例如:父元素在没有设置高度依赖子元素撑起的情况下,子元素脱离标准文档流,那么父元素的高度将会失去效应。这时可以给父元素设置overflow
除visible
的值。
注意:IE6-浏览器使用overflow这种方式并不能清除浮动,常用的消除浮动的方法是
.clear{
*zoom: 1;
}
.clear:after{
content: '';
display: block;
clear: both;
}
css 溢出overflow的更多相关文章
- 深入理解CSS溢出overflow & overflow:hidden真的失效了吗[转载]
深入理解CSS溢出overflow http://www.cnblogs.com/xiaohuochai/p/5289653.html overflow:hidden真的失效了吗 http://www ...
- 深入理解CSS溢出overflow
× 目录 [1]定义 [2]属性 [3]失效[4]应用 前面的话 当一个元素固定为某个特定大小,但内容在元素中放不下.此时就可以利用overflow属性来控制这种情况 定义 overflow溢出 值: ...
- css之overflow
也说css之overflow:细探之下有意想不到的结果 2016-11-5 滴滴出行·DDFE 作者:dolymood overflow 是一个非常常用的 CSS 属性,一般来说会认为很简单,其实细究 ...
- 转:css中overflow:hidden 不起作用了吗?
css中overflow:hidden 不起作用了吗? 有同学遇到这样的问题,现象是给元素设置了overflow:hidden,但超出容器的部分并没有被隐藏,难道是设置的hidden失效了吗?其实看似 ...
- CSS 布局 - Overflow
CSS 布局 - Overflow CSS overflow 属性用于控制内容溢出元素框时显示的方式. 这里的文本内容是可以滚动的,滚动条方向是垂直方向.dd马达价格 这里的文本内容是可以滚动的,滚动 ...
- 眼见为实 — CSS的overflow属性
1. overflow属性 CSS的overflow属性指定当内容溢出一个元素的框,会发生什么.举个栗子: <!DOCTYPE html> <html> <head> ...
- css中overflow:hidden的属性 可能会导致js下拉菜单无法显示
css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...
- CSS中overflow:scroll怎么设置只上下滚动而不左右滚动
CSS中"overflow:scroll"默认是左右,上下都滚动.怎么设置只上下滚动而不左右滚动,下面有个不错的解决方法 CSS中"overflow:scroll&quo ...
- 对CSS了解-overflow:hidden
overflow:hidden 列出我在项目中,运用到此属性的例子: (1)暴力清除浮动 <style type="text/css"> .wrap {;backgro ...
随机推荐
- IBM Watson启示录:AI不应该仅仅是炫技
IBM Watson启示录:AI不应该仅仅是炫技 https://mp.weixin.qq.com/s/oNp8QS7vQupbi8fr5RyLxA 导 ...
- Webpack4教程:第一部分,入口、输入和ES6模块
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://wanago.io/2018/07/16/webpack-4-course-par ...
- Fragment已经被added了导致的异常。
java.lang.IllegalStateException: Fragment already added: ******Effect 出现的原因是commit方法提交是异步的,所以容易出现,判 ...
- Spark之Yarn提交模式
一.Client模式 提交命令: ./spark-submit --master yarn --class org.apache.examples.SparkPi ../lib/spark-examp ...
- C# Math的说有函数 以及说明
Math.Abs(x) x绝对值 Math.Acos(x) ...
- frameset基础了解
frameset 元素可定义一个框架集.它被用来组织多个窗口(框架). 列子:一个分为头部导航栏.左边目录.右侧主体信息.(暂时没设计底部栏) <frameset rows="100, ...
- git执行cherry-pick时修改提交信息
git执行cherry-pick时修改提交信息 在本地分支执行cherry-pick命令时有时需要修改commit message信息,可以加参数-e实现: git cherry-pick -e co ...
- 对于windows操作系统磁盘访问权限修改的手残教训
最近公司新配置的win10电脑,由于测试关于windows系统上项目的安装程序时默认使用了c盘安装,发现安装后的项目不是崩溃就是运行没结果的,偶然间发现同一个安装程序在d盘或其他非系统盘安装则正常.很 ...
- Linix基本命令
基本命令关机:shutdown -h halt init 0 poweroff重启:shutdown -r reboot init 6pwd:查看工作目录ls:查看指定目录的内容-l:列表显示-a:显 ...
- MongoDB的常用命令和增查改删
数据库操作 Mongodb MySQL 查询库 show databases | show dbs show databases 选中库 use databaseName use databaseNa ...