CSS深入理解之overflow_muzi187的博客-程序员信息网

技术标签: css  CSS  overflow  html  

慕课学习-->前端开发-->HTML/CSS-->CSS深入理解之overflow

overflow

一、overflow基本属性

1、overflow的基本属性值:

visible(默认),hidden(不是裁剪是隐藏),scroll(水平和垂直方向都有滚动条轨道),auto(超出容器的方向出现滚动条),inheritIE8+

2、Overflow-xoverflow-yIE8+

如果overflow-xoverflow-y值相同,则等同于overflow

如果overflow-xoverflow-y值不同,且其中一个属性的值被赋予visible,而另外一个被赋予hiddenscroll或者auto,那么这个visible会被重置为auto

3、兼容性

(1)滚动条样式不同

(2)宽度设定机制

 

宽度设定机制差异导致的。IE7浏览器将content的宽度100%算成box400px,但出现滚动条之后,可用面积不足400px,于是在IE7下就出现了水平方向的滚动条。

4、overflow起作用的前提

(1)display:inline水平

(2)对应方位的尺寸限制。Width/height/max-width/max-height/absolute拉伸

.size{max-width:200px;max-height:300px;overflow:auto;}

<div class=”size”><img src=”img.jpg” width=”256” height=”191”></div>

图片img的宽度大于父元素,但高度小于父元素,按道理来讲会出现水平滚动条,但是IE7小还出现了垂直滚动条。

(3)对于单元格td等,还需要tabletable-layout:fixed状态才行

5、overflow:visible妙用

IE7浏览器下,文字越多,按钮两侧padding留白就越大!在IE8下,padding对白长度是一定的,正常的。如果给所有按钮添加CSS样式overflow:visible,那么IE7下的按钮padding留白就会变得正常。

二、overflow与滚动条

1、滚动条出现的条件:

Overflow:auto/overflow:scroll。有些元素原本就具有overflow,例如<html><textarea>

内容的尺寸超出了容器的限制

2、html/body与滚动条

(1)无论什么浏览器,默认滚动条均来自<html>,而不是<body>标签。

原因:新建一个空白HTML页面,<body>默认0..5emmargin值,如果滚动条来自于<body>,则滚动条于浏览器边缘又间距,而不是靠着浏览器边缘。

(2)IE7- 浏览器默认右边有垂直滚动条,效果类似:html{overflow-y:scroll;}

IE8+等浏览器默认html{overflow:auto;}的效果。

所以,如果我们想要去除页面默认滚动条,只需要:html{overflow:hidden;}

(3)JS与滚动高度

Chrome浏览器:document.body.scrollTop;

其他浏览器:document.documentElement.scrollTop;

获取滚动高度可以使用这样的写法:

var st = document.documentElement.scrollTop || document.body.scrollTop;

(4)overflowpadding-bottom缺失现象

.box{width:400px;height:100px;padding:100px 0 ;overflow:auto;}

Chrome浏览器下,margin-bottom100px可以滚动出来看到,而其他所有浏览器是没有margin-bottom100px的。这就导致了不一样的scrollHeight(元素内容高度)

3、滚动条的宽度机制

滚动条会占用容器的可用宽度或者高度。

滚动条的宽度。准确的说法应该是滚动栏的宽度。获取方法:

<style type="text/css">
.box{width:400px;overflow:scroll;}
.in{*zoom:1;/*for IE7*/}
</style>
<body>
<div class="box">
<div id="in" class="in"></div>
</div>
</body>
<script type="text/javascript">
console.log(400-document.getElementById('in').clientWidth);
</script>

结果:IE7+ChromeFireFoxwin7)均为17像素

4、overflow:auto的潜在布局隐患

滚动条会占用容器尺寸,原本和谐的布局可能会因为出现滚动条打破整个布局。

5、水平居中跳动问题

.container{ width:1150px;margin:0 auto;};使用这种方法设定页面居中对齐。但是由于滚动栏会占据页面的可用宽度,当滚动条出现时,auto计算的margin值就会减小,整个居中显示的页面会向左偏移。

修复水平居中的问题:

第一种方法:html{overflow-y:scroll;}

第二种方法:.container增加CSS样式padding-left:calc(100vw-100%);100vw是浏览器宽度,100%是可用内容宽度(IE9+支持)

6、自定义滚动条

 

利用jQuery滚动条自定义插件(兼容IE8+

项目页面http://manos.malihu.gr/jquery-custom-content-scroller/

Github地址:https://github.com/malihu/malihu-custom-scrollbar-plugin

三、Overflow与块状格式上下文(BFC

1、BFC

BFCBlock formatting context-“块级格式化上下文”,就像是页面结界,内部元素怎样变化都不会影响外部。

2、overflow的属性值auto/scroll/hidden可以触发BFCvisible不能触发。应用如下:

1)清除浮动影响:

.clearfix{overflow:hidden;_zoom:1;}IE7+才支持overflow。但是overflow:hidden副作用很大,会造成超过容器尺寸的内容不显示,所以应该使用:

.clearfix{*zoom:1;}  IE7

.clearfix:after{content:’’;display:table;clear:both;}  IE8+

2)避免margin穿透问题:设置overflow:visible/scroll/auto/hidden。避免margin穿透问题,overflow只是众多方法中的一个。还可以使用borderpadding

3)两栏自适应布局:

 

使用padding做流体自适应布局的时候,万万不可让自适应层BFC化。

3、各种BFC属性由于自身特性,具体表现不一:

overflow:hidden;------自适应,但“溢出不可见”限制应用场景

float+float;------包裹性+破坏性,无法自适应,块状浮动布局

position:absolute;------脱离文档流,自娱自乐

display:inline-block;------包裹性,无法自适应;IE6/IE7 block水平不相识

display:table-cell;------包裹性,但天生无溢出特性,绝对宽度也能自适应

4、实现两栏自适应布局

跟清除浮动影响类似:.cell{overflow:hidden;_display:in-line-block;}。但是副作用明显,会造成超过容器尺寸的内容不显示,无法广泛应用,广为流传的是:

.cell{display:table-cell;width:2000px;}  //IE8+ BFC特性

.cell{*display:inline-block;*width:auto;}  //IE7- BFC特性

 

四、overflowabsolute绝对定位

1、overflow:hidden失效

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>Document</title>
	</head>
<style type="text/css">
	.overflow-hidden{width:300px;height:200px;border:5px solid #deceeb;overflow:hidden;}
	img{position:absolute;}
	/*未设置absolute时,超过容器的图片被隐藏,设置后,图片超出容器的部分也显示,hidden失效*/
</style>
<body>
	<div class="overflow-hidden">
		<img src="1.png">
	</div>
</body>
</html>

图片未设置absolute时,超过容器的图片被隐藏,设置后,图片超出容器的部分也显示,hidden失效。

2、overflow滚动失效

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>Document</title>
	</head>
<style type="text/css">
	.overflow-hidden{width:300px;height:200px;border:5px solid #deceeb;overflow:auto;}
	img{position:absolute;}
	/*未设置absolute时,图片尺寸大于容器,出现滚动条。设置后,图片超出容器的部分也显示,overflow滚动失效*/
</style>
<body>
	<div class="overflow-hidden">
		<img src="1.png">
	</div>
</body>
</html>

图片未设置absolute时,图片尺寸大于容器,出现滚动条。设置后,图片超出容器的部分也显示,overflow滚动失效

3、失效原因:

绝对定位元素不总是被父级overflow属性剪裁,尤其当overflow在绝对定位元素及其包含块之间的时候。包含块指“含position:relative/absolute/fixed声明的父级元素,没有则是body元素”

4、如何避免失效?

(1)overflow元素自身为包含块

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>Document</title>
	</head>
<style type="text/css">
	.overflow-hidden{width:300px;height:200px;border:5px solid #deceeb;overflow:hidden;position:relative;}
	img{position:absolute;}
	/*img未设置absolute时,超过容器的图片被隐藏,设置后,图片超出容器的部分也显示,hidden失效。当overflow元素设置relative后,hidden生效*/
</style>
<body>
	<div class="overflow-hidden">
		<img src="1.png">
	</div>
</body>
</html>

img未设置absolute时,超过容器的图片被隐藏,设置后,图片超出容器的部分也显示,hidden失效。当overflow元素设置relative后,hidden生效。

(2)overflow元素的子元素为包含块

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>Document</title>
	</head>
<style type="text/css">
	.overflow-hidden{width:300px;height:200px;border:5px solid #deceeb;overflow:hidden;}
	img{position:absolute;}
	/*img未设置absolute时,超过容器的图片被隐藏,设置后,图片超出容器的部分也显示,hidden失效。当overflow元素的子元素relative时,hidden生效*/
</style>
<body>
	<div class="overflow-hidden">
		<div style="position:relative;">
			<img src="1.png">
		</div>
	</div>
</body>
</html>

img未设置absolute时,超过容器的图片被隐藏,设置后,图片超出容器的部分也显示,hidden失效。当overflow元素的子元素relative时,hidden生效。

(3)任意合法transform声明当做包含块:

a、overflow元素自身transformIE9+/FireFox支持;Chrome/Safari(win)/Opera不支持

b、Overflow子元素transformIE9+/FireFox支持;Chrome/Safari(win)/Opera支持。动态渲染异常:Chrome包含块重定位/Opera同,但点击重绘自修正/Safari非定位overflow元素左上角

五、依赖overflow的样式表现

1、resize拉伸

1CSS3有个属性名为resize,可以拉伸元素尺寸:

resize:both水平垂直两个方向都拉伸;resize:horizontal只有水平方向拉伸;resize:vertical只有垂直方向拉伸;但是,此声明要想起作用,元素的overflow属性值不能是visible

例子1<button style="resize:both;overflow:hidden;">BUTTON按钮</button>,只设置resize:both;是不能拉伸,设置overflow:hidden;之后才能拉伸。

例子2:文本域textarea,天生外挂resize特性?因为textarea默认overflow:auto

Resize拖拽区域大小是17像素*17像素,也就是滚动条的尺寸。

2、ellipsis文字溢出省略号显示

text-overflow:ellipsis;------文本溢出省略号表示,要配合overflow:hidden来使用。例子:<button style="width:200px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;">我是一个BUTTON按钮,宽度200px</button>

六、Overflow与锚点技术

锚点定位的本质就是:改变容器的滚动高度。

1、锚点定位:

A、触发锚点定位

B、锚点元素通过scrollTop值改变向上便宜定位

C、锚元素的上边缘和可滚动容器上边缘对齐

2、锚点定位的触发:

AURL地址中的锚链与锚点元素

B、可focus的锚点元素处于focus状态

3、锚点定位作用:快速定位


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/muzi187/article/details/78894210

智能推荐

《程序猿的第n+4天》_焦虑的说说的博客-程序员信息网

今天在linux虚拟机上装了phpstudy,要进入数据库时,直接在终端输入 mysql -u root -p时,报错,说没有mysql这个命令 后来查了一下,知道环境配置没配好,所以要这么写[[email protected] ~]# /phpstudy/mysql/bin/mysql -u root -p后来要我输入密码,我之前是安装过Mysql的,设过密码,不过我早就忘到九霄云外去了。然后各种想

程序员面试时这样介绍自己的项目经验,成功率能达到98.99%_程序猿总指挥的博客-程序员信息网

大多数小伙伴都知道,2019年是互联网行业最不平凡的一年。各类平台的倒闭、破产、清算,尤其是去年6、7月分全国大范围P2P集中爆雷跑路,,居多因素,裁员的、失业的大有人在,所以,虽近年底,找工作的伙伴应该还不在少数,所以,今天,给大家分享一些面试技巧文章。假如去面试要问10个问题,那么至少5个问题会根据你所介绍的项目背景来问。面试时7份靠能力,3份靠技能,而刚开始时的介绍项目又是...

Linux进程间通信命名管道_chengh_chh的博客-程序员信息网

Linux进程间通信命名管道在前一篇文章——Linux进程间通信——使用匿名管道中,我们看到了如何使用匿名管道来在进程之间传递数据,同时也看到了这个方式的一个缺陷,就是这些进程都由一个共同的祖先进程启动,这给我们在不相关的的进程之间交换数据带来了不方便。这里将会介绍进程的另一种通信方式——命名管道,来解决不相关进程间的通信问题。一、什么是命名管道命名管道也被称为FIFO文件,它

ubuntu 18.04 - server版 开机启动脚本_Dom_留声机的博客-程序员信息网

ubuntu 18.04 - server版 开机启动脚本systemd 默认读取 /etc/systemd/system 下的文件,该目录下的文件会链接/lib/systemd/system/下的文件。 执行 ls /lib/systemd/system 你可以看到有很多启动脚本,其中就有我们需要的 rc.local.service打开脚本内容:[Unit]Description...

[Unity3D]使用OnGUI函数显示状态栏并且使用触发器修改玩家当前信息_请叫我汪海的博客-程序员信息网

在Unity官网上有相关OnGUI函数的讲解,点击查看官网说明文档将这段代码贴在Unity的脚本中并且拖拽到主摄像机上,便会发现运行时左上角多了一个小按钮:但是这样显然不能满足正常的需求,一般来说游戏需要在界面显示当前角色的相关信息,比如剩余血量什么的,下面就来看下如何在Unity中使用OnGUI函数显示Health信息。将在MonoDevelopment中将代码做

awk合并行、linux shell 字符串操作、sed字符替换_iteye_10060的博客-程序员信息网

四行合一行 cat filename111111111222222222333333333444444444555555555666666666777777777888888888999999999awk '{if (NR%4==0){print $0} else {printf&quot;%s &quot;,$0}}' f...

随便推点

Linux命令与下载_ldybk的博客-程序员信息网

Linux命令切换目录 cd显示一个目录下的文件和文件夹:lllsls -lls -a文件目录操作创建文件 vim touch创建目录 mkdir删除文件或目录 rm -rf 文件/文件夹移动文件或文件夹 mv 源文件 目标文件复制文件或文件夹 cp查看端口号: netstat查看正在运行的进程:ps aux修改权限:chmod动态查看一个日志文件:t...

WEBLOGIC 内存溢出 解决方案_六楼外的风景的博客-程序员信息网

前几天部署WebLogic出现线程阻塞情况,查看后台报错:<[STUCK] ExecuteThread: '58' for queue: 'weblogic.kernel.Default (self-tuning)' has been busy for "697" seconds working on the request "Http Request: aaa.do", which is m

SVN+Jenkins+Maven+Appium+TestNG+ReportNG 实战 Android 自动化测试_python爱好部落的博客-程序员信息网

http://testerhome.com/topics/658言归正传,本文主要是讲述如何使用这些工具来整合流程,实现Android平台的自动化测试.首先说下背景,因为我测试的东西面向多个国家,对于不同的地域可能有不同的功能,对应不一样的发行渠道,需要测试工具有便捷的case管理功能,能方便地面对不同的发行渠道选择不同的case.而TestNG可以很方便地配置这些,所以选择这个框架.

SUSE linux 安装zabbix agent_图图的QQ的博客-程序员信息网_suse安装zabbix

下载rpm包:http://download.opensuse.org/repositories/server:/monitoring/SLE_11_SP3/x86_64/然后:rpm -ivh zabbix-agent-2.2.14-2.1.x86_64.rpm修改/etc/zabbix/zabbix-agent.confPidFile=/var/run/zabbix/zabbix-age...

@ApiModel and @ApiModelProperty 用法_Lanje Wang的博客-程序员信息网_apimodelproperty依赖

import io.swagger.annotations.ApiModel;import io.swagger.annotations.ApiModelProperty;import java.io.Serializable;@ApiModelpublic class XXXX implements Serializable { private static final long serialVersionUID = XXXXL; @ApiModelProperty( ...