CSS深入理解之overflow

最新推荐文章于 2024-10-05 06:00:00 发布
最新推荐文章于 2024-10-05 06:00:00 发布
阅读量2k 收藏 4
点赞数
分类专栏： html css overflow 文章标签： html CSS overflow
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/muzi187/article/details/78894210
版权
html 同时被 3 个专栏收录
43 篇文章 0 订阅
订阅专栏
css
15 篇文章 0 订阅
订阅专栏
overflow
1 篇文章 0 订阅
订阅专栏

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

overflow

一、overflow基本属性

1、overflow的基本属性值：

visible（默认），hidden（不是裁剪是隐藏），scroll（水平和垂直方向都有滚动条轨道），auto（超出容器的方向出现滚动条），inherit（IE8+）

2、Overflow-x和overflow-y（IE8+）

如果overflow-x和overflow-y值相同，则等同于overflow；

如果overflow-x和overflow-y值不同，且其中一个属性的值被赋予visible，而另外一个被赋予hidden、scroll或者auto，那么这个visible会被重置为auto；

3、兼容性

（1）滚动条样式不同

（2）宽度设定机制

 

宽度设定机制差异导致的。IE7浏览器将content的宽度100%算成box的400px，但出现滚动条之后，可用面积不足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等，还需要table为table-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..5em的margin值，如果滚动条来自于<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）overflow的padding-bottom缺失现象

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

Chrome浏览器下，margin-bottom的100px可以滚动出来看到，而其他所有浏览器是没有margin-bottom的100px的。这就导致了不一样的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+、Chrome、FireFox（win7）均为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

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

2、overflow的属性值auto/scroll/hidden可以触发BFC，visible不能触发。应用如下：

（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只是众多方法中的一个。还可以使用border、padding

（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特性

 

四、overflow与absolute绝对定位

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元素自身transform：IE9+/FireFox支持；Chrome/Safari(win)/Opera不支持

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

五、依赖overflow的样式表现

1、resize拉伸

（1）CSS3有个属性名为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、锚点定位的触发：

A、URL地址中的锚链与锚点元素

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

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


muzi187
关注
专栏目录
CSS的overflow属性
qq2071114140的博客
05-23 260
CSS的overflow属性 这个属性用来设置子元素溢出时，怎样处理 取值 visible 超出父元素的部分，仍然显示 ... /*父元素*/ .block1{ width: 100px; height: 100px; background-color: skyblue; } /*子元素*/ .block2{ width: 50px; height...
CSS之overflow
做一个开心的全栈工程师
07-07 2120
第1章 基本属性1.1overflow的五种取值 visible（默认） hidden scroll auto inherit 1.2overflow-x和overflow-y（IE8+）两种情况： 1.overflow-x和overflow-y值相同，则等同于overflow 2.overflow-x和overflow-y值不同，并且一个被赋予visible，另一个被赋予hidden、scro
CSS Overflow 属性详解
04-24 692
根据CSS的盒模型概念，页面中的每个元素，都是一个矩形的盒子。这些盒子的大小、位置和行为都可以用CSS来控制。对于行为，我的意思是当盒子内外的内容改变的时候，它如何处理。比如，如果你没有设置一个盒子的高度，该盒子的高度将会根据它容纳内容的需要而增长。但是当你给一个盒子指定了一个高度或宽度而里面的内容超出的时候会发生什么？这就是该添加CSS的overflow属性的时候了，它允许你设定该种情况下如何处
0基础学习CSS（十八）Overflow（布局）和Float（浮动）
最新发布
L08130421的博客
10-05 830
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。Float（浮动），往往是用于图像，但它在布局时一样非常有用。
css overflow详解
码农界的小学生
06-27 771
overflow: overflow-x: overflow-y: visible|hidden|scroll|auto|no-display|no-content; visible 不裁剪内容，可能会显示在内容框之外。 hidden 裁剪内容 - 不提供滚动机制。  scroll 裁剪内容 - 提供滚动机制。  auto 如果溢出框，则应该提供滚动机制。  no-dis
CSS中的overflow属性
weixin_30739595的博客
01-15 184
overflow属性 如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条，是否隐藏溢出部分等行为，规定当内容溢出元素框时发生的事情。 可能的值有： visible：默认值。内容不会被修剪，会呈现在元素框之外。 ...
深入理解CSS overflow:hidden——溢出,坍塌,清除浮动
09-22
在CSS布局中，`overflow:hidden` 是一个非常重要的属性，它可以解决多种布局问题，包括隐藏溢出的内容、清除浮动以及防止margin坍塌。...理解和熟练运用 `overflow:hidden` 对于优化和维护CSS布局至关重要。
css中text-overflow属性与文本截断详解
09-27
本文将深入探讨`text-overflow`属性以及与文本截断相关的技巧。 ### text-overflow 属性 `text-overflow`属性在CSS Basic User Interface Module Level 3中定义，标准值包括`clip`和`ellipsis`。`clip`会简单地...
CSS深入学习之让你认识不一样的margin
09-24
为了深入理解margin，文章从几个方面详细介绍了margin的用法和常见问题。 首先，文章对margin的基本概念进行了讲解。我们通常所说的margin指的是物理级别的设置，实际上CSS还提供逻辑级别的设置，如start、end、...
CSS属性探秘系列(二)：overflow及相关属性text-overflow
09-25
在本文中，我们将深入探讨`overflow`及其相关的属性`overflow-x`、`overflow-y`和`text-overflow`，理解它们的用法和应用场景。 首先，我们来看`overflow`属性。它的主要功能是定义当内容超出元素的边界时，浏览器...
CSS中的overflow，
m0_67737085的博客
10-08 3595
相比于1，2的属性，over:scroll;会裁剪内容，浏览器会形成滚动条便于查看超出元素框的文本内容。这里是overflow的基本默认属性，文本不会被修剪，直接超出元素框。这里比较上面的属性，同样的元素框，但是溢出部分却已经被裁剪且无法显示。这个属性内容会被修剪，但是溢出的内容是无法看到的。
《CSS Overflow》
yexiangCSDN的专栏
06-27 3189
CSS 布局 - Overflow CSS overflow 属性用于控制内容溢出元素框时显示的方式。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> #overflowT...
CSS系列之详解overflow
老__L的博客
02-01 9392
本文主要介绍CSS的overflow、overflow-x、overflow-y属性。详解overflow
CSS中的 overflow 属性
CyberPlayer的博客
02-13 2067
overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。 overflow 属性可设置以下值： visible- 默认。溢出没有被剪裁。内容在元素框外渲染 hidden- 溢出被剪裁，其余内容将不可见 scroll- 溢出被剪裁，同时添加滚动条以查看其余内容 auto- 与scroll类似，但仅在必要时添加滚动条 注意：overflow 属性仅适用于具有指定高度的块元素。 ...
CSS overflow 属性(琐碎知识点整理)
黑木令之佛性
07-04 1万+
之前有整理过一部分知识点, 一直没有发布, 因为都是有关 前端 方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家 这个专题 就是 前端CSS 相关的内容; 不积跬步，无以至千里, 戒焦戒躁 。 好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。 一. 定义和用法: 1. overflow 属性规定当内容溢出元素框时发生的事情 。 2. 这个属性定义溢出元素内容区的内容会如何处理 。 如果值为
css属性之overflow深入理解
yingzizizizizizzz的专栏
03-23 563
1.如果overflow-x，overflow-y其中一个被赋值visible，另一个被赋值为其他（auto，hidden，scroll，inherit），那么被赋值visible的会自动重置为auto。 如果overflow-x，overflow-y值相同，等同于overflow。 2.overflow作用的前提 （1）非display:inline水平 （2）对应方位的尺寸限制
解析css中的overflow属性
m0_68845148的博客
11-10 9495
overflow 属性规定当内容溢出时发生的事情overflow有以下几种属性值：不裁剪超出盒子的部分将超出盒子部分的内容隐藏横轴强制出现滚动条4.overflow-y:scroll 纵轴强制出现滚动条5.overflow：scroll x轴和y轴都有滚动条自动判断是否出现滚动条从父元素继承overflow属性的值overflow属性值中visible和hidden是对立的，scroll和auto是对立的。inherent是继承父级元素的overflow属性值，默认是scroll。
CSS overflow 属性
weixin_33701294的博客
04-20 92
2019独角兽企业重金招聘Python工程师标准>>> ...
CSSoverflow属性详解
热门推荐
巧克力很苦的小博客
03-30 1万+
浏览器支持 所有主流浏览器都支持 overflow 属性。 注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。 定义和用法 overflow 属性规定当内容溢出元素框时发生的事情。 说明 这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也...
深入理解CSS布局之浮动技术
3.使用溢出隐藏（overflow）：给浮动元素的父元素添加overflow属性，其值设为hidden、auto或scroll。 4.使用伪元素清除浮动：在浮动元素的父元素上使用伪元素进行清除浮动操作。 5.使用CSS3的display属性：如display...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值