CSS深入理解之overflow-慕课网技术问答-课程问答

润晗代码 2020-04-09

失效妙用overflow设置为hidden有啥意义呢？默认visible可以不大神解释下

仅对于 img 元素来说的话，overflow 的值是哪个都可以，因为对于 img 都会失效。

既然会失效，那为什么要用 overflow，而且是 hidden，那是因为与 img 同级的兄弟元素可能溢出容器范围。

那你问设置 visible: visible 可以嘛？当然可以，如果 img 元素的兄弟元素里的内容不会溢出容器的话。

再问既然都不会溢出，也没别的需求，那完全不用 overflow 可不可以？当然可以。因为此处用 overflow 完全就是为了防止内容溢出的，而不是防止 img 元素会怎么样怎样的。

总结一下：

0 首先明白，overflow 为什么会对案例中 img 元素无效

① 图片移到右侧使用的是 absolute 跟 text-align，与 overflow 无关

② overflow 只作用于与图片同级的非 absolute 元素里的内容，防止溢出容器

下面给个溢出效果的代码案例：

<div style="height: 300px;overflow:auto">
    <div class="h0 ovh tr" style="height: 700px;width: 600px;
               margin:0 auto;background-image: url(./53937347_p0.png);
               background-repeat: no-repeat;        
               background-position: center center;        
               background-size:cover">        
        &nbsp;
        下面就是会溢出的文本，所以父级会用 overflow: hidden;
        <br>
        dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd        
       <img class="abs ml30 mt30" style="height: 80px;" src="./53937347_p0.png" alt="">
    </div>    
</div>

1回答·849浏览

WDHEleven 2020-02-09

搞的那么复杂干嘛。。。: 你再看一遍就不会这么觉得了; 1回答·829浏览

慕雪8309092 2019-10-17

大神，有没有css设置样式啊: 这样式一共也没几行代码呀，同学; 1回答·891浏览

啥也不会就会扛 2019-04-30

源代码还有吗: 1回答·1157浏览

靠他吃饭 2018-07-31

这个空格符起到什么做用？自己试了以下根本不需要啊！: 不是说占个位置而已吗，; 1回答·1192浏览

qq_妳若是夢我願長眠_0 2018-05-31

各位同学们有没有发现视频有电流声: 已采纳 1sos1 的回答; <a>有的，你不是一个人</a>; 2回答·1600浏览

妈妈说名字越长越好怎么滴 2017-09-26

overflow失效妙用: 3回答·1753浏览

yaoqz 2017-09-22

多行文学垂直居中显示: http://blog.csdn.net/bing0728004/article/details/51509435; 1回答·1281浏览

冷寒轩111 2017-09-06

关于padding-bottom缺失问题的解决办法: 你试试看不就知道了吗; 1回答·2591浏览

zhanbao 2017-08-16

为什么说 .clearfix {overflow: hidden; _zoom: 1;} 让容器之外的普通元素不可见？: 比如，你的使用overflow：hidden；你的图片宽度为100px；而div块的宽度为80px，父元素的高度不会塌陷，但是同样，div块装不下那么宽的图片就只能隐藏掉伸出去的一部分。而这种最佳实践，是在实质是在父元素中添加一个块级元素在其最后一个子元素的位置，当图片浮动时就不会塌陷，因为有了一个块级元素把父元素撑起来了，而父元素的宽度就会根据图片的宽度自适应。; 1回答·1852浏览

小白0913 2017-07-13

没有效果？哪里写错了？求大神指导~~: 为什么overflow是auto; 1回答·1319浏览

orangewangjie3473319 2017-06-28

滚动高度的概念: 这是JavaScript的内容; 1回答·1371浏览

慕粉1112086645 2017-05-05

绝对定位和overflow

对于普通元素，overflow:hidden;会将固定宽高容器内溢出元素隐藏处理；但有些特殊布局例外。例如，部分浮动在容器之外的元素。

使用overflow:hidden;属性，如果其祖先元素，含有position:relative属性等，其后代元素中存在position:absolute属性时，含有position:absolute属性的元素溢出固定宽高的容器后，不会被隐藏。

1回答·3409浏览

慕粉3407380 2017-02-28

右侧图标像fixed一样固定怎么实现的: 1回答·1419浏览

UFO2015 2017-01-16

position: absolute ??? 没有使用场景, are you kidding me!: 人老师说的是两栏自适应布局不适合使用absolute，你整个绝对居中，闹哪样啊？?; 3回答·1714浏览

UFO2015 2017-01-15

html滚动条宽度问题, chrome devtools check !: http://www.cnblogs.com/xgqfrms/p/6288299.html; 1回答·1894浏览

chapery 2017-01-15

表格主体滚动条占据宽度，导致与表头无法对齐问题: 破不了，要不然用JS模拟吧; 1回答·3399浏览

christina976 2017-01-15

两栏自适应布局: BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局; 1回答·1416浏览

慕粉3743212 2016-12-30

两栏自适应布局

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.cell {
	display: table-cell;
	width: 2000px;
	*display: inline-block;
	*width: auto;	
	padding: 20px;
}

.cell:nth-child(1) {
	background-color: green;
}

.cell:nth-child(2) {
	background-color: yellow;
}

.cell:last-child {
	background-color: blue;
}
</style>
</head>
<body>
	<div class="cell">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</div>
	<div class="cell">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</div>
	<div class="cell">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</div>
</body>
</html>

无论有几个cell 都可以实现自适应而且不截断里面的内容

2回答·1373浏览

慕粉3743212 2016-12-29

水平居中跳动问题修复: padding-left:calc(100vw-100%);; 1回答·1273浏览

一直都在路上 2016-12-25

我想问一下为何我IE7显示的button标签或者input text="button"都没有出现老师的情况。有没有人知道是什么原因吗？: 老师说的是你文本被 <span>text</span>，或者啊a，p,div,ul, li等包围！不包括input,和select标签！; 1回答·983浏览

dky 2016-11-22

跟随怎么使用: 已采纳慕粉3913390 的回答; fixed不要用position：absolute; 1回答·1345浏览

dky 2016-11-22

这老师是谁: 已采纳慕粉3913390 的回答; 张鑫旭; 1回答·1332浏览

dky 2016-11-21

横向滚动怎么实现: 已采纳慕粉3913390 的回答; 这样over-flower-x:auto; 1回答·1378浏览

dky 2016-11-21

老师说话为什么这样呢: 已采纳慕粉3913390 的回答; 老师当你是小朋友，其实。。。。。。; 2回答·1515浏览

刘颜 2016-11-02

overflow元素自身为包含块？: 已采纳自然天下的回答; 任何position:absolute需要起作用，那么他的父元素就需要设置position:relative,否则就会一直往上找，直到body。因此，只要设置了自身position:relative,那么他自身就是包含块。; 2回答·1474浏览

慕粉4042427 2016-10-25

失效的妙用，无原代码很难理解，有的请提供，先谢

已采纳哔哩哔哩Hong 的回答

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8" />
	<style>
		html,body{width:100%;height:100%;margin:0;padding:0;}
		.main{width:600px;height:100%;background:#ccc;margin:0 auto;}
		.list{height:0;text-align:right;overflow:hidden;}
		.rightlist{display:inline;position:fixed;bottom:100px;margin-left:20px;}
		.icon{display:block;width:30px;height:30px;border-radius:50%;background:#000;}
	</style>
</head>
<body>
	<!--中间的主界面-->
	<div class="main">
		<!--右边固定条-->
		<div class="list">
			&nbsp;
			<div class="rightlist">
				<a href="#" class="icon"></a>
			</div>
		</div>
		
	</div>
</body>
</html>

可以看老师的absolute，其实主要利用的应该还是absolute的追随性

原理：

list是块状元素，自己占了一行，text-align:right则其中的元素会在右边

将rightlist设为display:inline，本来rightlist会在&nbsp的右边

但rightlist设了position:fixed，则rightlist脱离了文档流，但由于追随性还会在原来的那一行，这样就可以固定在界面的右边了

而且此时，由于rightlist设置了position，overflow元素的子元素含有包含块，所以overflow失效，所以并不会将子元素rightlist隐藏

2回答·1538浏览

Zzzzzzzzjy 2016-09-20

body/html与滚动条-js与滚动高度里那个“或者”的符号怎么打？: 已采纳 _西口褡裢_ 的回答; “shift + 回车上面的斜杠”，连输再次。; 1回答·1905浏览

慕粉3830774 2016-08-23

老湿是如何实现absolute元素表现为fixed的？百思不得其解啊

已采纳 qq_巴萨最强_03768458 的回答

content外面加一层设置高度，出现滚动条就ok了

<style>
    .warp { height:300px; overflow-y:auto;}
    .content { width: 60%; height: 2000px; background: #999; margin: 0 auto;}
    .h0 { height: 0;}
    .ovh { overflow: hidden;}
    .tr { text-align: right;}
    .abs { position: absolute; width: 20px; height: 20px; background: #F00;}
    .ml10 { margin-left: 10px;}
    .mt30 { margin-top: 30px;}
</style>

<body>
<div class="warp">
 <div class="content">
   <div class="h0 ovh tr">
     &nbsp;<a class="abs ml10 mt30"></a>
   </div>
 </div>
</div>
</body>

1回答·1844浏览

前端界的小学生 2016-07-27

关于calc的问题

应该这样写：padding-left: calc(100vw - 100%);

只有属性才有(-webkit.-ms,-moz)兼容写法。

1回答·981浏览