内容简介:下面用例子来加深理解:初始
overflow:hidden
的主要功能有三个:
- 隐藏溢出
- 清除浮动
- 解除坍塌
下面用例子来加深理解:
初始 html
内容:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div class="container"> <div class="div1"></div> <div class="div2"></div> </div> </body> </html>
初始 css
样式:
.container{ background-color: black; } .div1{ background-color: aqua; width: 100px; height: 100px; } .div2{ background-color: red; width: 100px; height: 100px; }
运行结果:
使用 overflow: hidden
隐藏溢出
默认情况下,父 div
没有设置高度,它的高度可以被子 div
任意撑大。
当父 div
有固定高度时,如果子 div
的高度超过父 div
的高度,那么子 div
会超出父 div
的束缚,这种情况就叫溢出。
如图:
.container{ background-color: black; height: 150px; /*给父div添加固定高度*/ } .div1{ background-color: aqua; width: 100px; height: 100px; } .div2{ background-color: red; width: 100px; height: 100px; }
为了隐藏子元素溢出的部分,可以为父 div
设置 overflow:hidden
:
.container{ background-color: black; height: 150px; /*给父div添加固定高度*/ overflow: hidden; /*隐藏溢出*/ }
使用 overflow:hidden
清除浮动
当父 div
没有设置高度时,我们为 div1
和 div2
加上一个属性: float:left
后,我们会发现:背景色为黑色父 div
消失了。
这是因为: 浮动的元素脱离文档元素, 不占据空间 。 不浮动的元素会直接无视掉这个元素:父 div
无视了自己的两个孩子,其高度为0(因为我们没有设置父div的高度),所以父 div
没有显现。
.container{ background-color: black; } .div1{ background-color: aqua; width: 100px; height: 100px; } .div2{ background-color: red; width: 100px; height: 100px; } .div1,.div2{ float: left;/*让两个子div浮动*/ }
想让父 div
显现,有两个办法:
(1)让父 div
也浮动起来
.container{ background-color: black; float: right;/*让父div右浮动*/ }
效果:
发现颜色块出现在屏幕右侧,父 div
浮动有效果,但是没有看到父 div
的黑色效果,这是因为 浮动的 div
已经失去了其“独霸一行”的能力 ,我们需要手动为父 div
设置一个宽度,比如 width:500px
,之后可以看到:
.container{ background-color: black; float: right;/*让父div右浮动*/ width: 500px; /*给父div设置宽度*/ }
(2)为父 div
添加: overflow:hidden
属性用以清除浮动
.container{ background-color: black; overflow: hidden; /*给父div清除浮动*/ }
效果:
总结:
(1)(2)一个使用了都浮动的战略,一个使用了清除浮动的战略使父 div
宽容的接受了子 div
。
两者的区别在于都浮动需要额外设定父 div
的宽度,因为 浮动起来的 div
失去了 div
独占一行的特性,而清除浮动的父 div
仍然独占一行 。
使用 overflow:hidden
解除坍塌
可以使用 overflow:hidden
解除 margin
坍塌,坍塌是不分父 div
的高度是否固定的。
什么叫做坍塌:
为 div1
添加一个属性: margin-top: 50px
; 本想得到这样的效果:
可是结果:整体下移了。
.container{ background-color: black; } .div1{ background-color: aqua; width: 100px; height: 100px; margin-top: 50px;/*添加外边距*/ } .div2{ background-color: red; width: 100px; height: 100px; }
CSS中存在一个margin collapse,即边界塌陷或者说边界重叠。
对于上下两个并列的 div
块而言,上面 div
的 margin-bottom
和下面 div
的 margin-top
会塌陷,也就是会取上下两者 margin
里最大值作为显示值,所以从这个意义上说: CSS
及浏览器的设计者们希望我们在布局时,如果遇到上下两个并排内容块的安排,最好只设置其中每个块上或下 margin
的一处即可。
但对于父块 div
内含子块 div
的情况,就会按另一条 CSS
惯例来解释了,那就是:对于有块级子元素的元素(父元素)计算高度的方式,如果元素没有上下边框和填充,那其高度就是第一个子元素顶部和底部边框边缘之间的距离。
解决父子 div
中顶部 margin cllapse
的问题,有下列方法:
(1)为父 div
设置边框,当然可以设置透明边框。
.container{ background-color: black; border: 1px solid;/*设置边框*/ }
效果:
(2)给父div添加padding,让父div将子div挤下去。
.container{ background-color: black; padding-top: 50px; }
效果:
但是上面两种方法都会改变盒子大小。
(3)使用 overflow: hidden
解除坍塌。
.container{ background-color: black; overflow: hidden; /*解除坍塌*/ } .div1{ background-color: aqua; width: 100px; height: 100px; margin-top: 50px;/*添加外边距*/ } .div2{ background-color: red; width: 100px; height: 100px; } 效果: ![clipboard.png](/img/bVbsV8n)
(4)浮动的 div
不会坍塌。
.container{ background-color: black; } .div1{ background-color: aqua; width: 100px; height: 100px; margin-top: 50px;/*添加外边距*/ float: right; /*添加右浮动*/ } .div2{ background-color: red; width: 100px; height: 100px; }
总结:
overflow:hidden
的用法在 隐藏溢出 和 清除浮动 上主要针对父 div
是否有固定的高度加以区分。它还额外肩负了 解除坍塌 的重任。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- CSS深入理解:overflow:hidden——溢出,坍塌,清除浮动
- 缓冲区溢出(栈溢出)
- Linux kernel 4.20 BPF 整数溢出-堆溢出漏洞及其利用
- 缓冲区溢出实战教程系列(一):第一个缓冲区溢出小程序
- 小议缓冲区溢出
- Nginx栈溢出分析
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
电商运营之道:策略、方法与实践
吴伟定、姚金刚、周振兴、郑琰 / 机械工业出版社 / 2015-9-1 / 49
电商运营之道:策略、方法与实践是一本电商的运营指南,适合所有的电商从业人员阅读,也适合打算进入或打算在电商行业创业的读者朋友阅读。分别从策略、方法与实践三个方面全景式展示电商运营的内在商业规律与管理逻辑。一起来看看 《电商运营之道:策略、方法与实践》 这本书的介绍吧!
随机密码生成器
多种字符组合密码
Markdown 在线编辑器
Markdown 在线编辑器