父元素固定height值后的视觉陷阱

首先，

浏览器按照height和width渲染：对于每个元素
父元素不设或设height：auto，子元素会撑开父元素
父元素设置overflow属性，在渲染上，可以限制子元素的显示

问题

黄块跑到绿块中间
视觉上让人怀疑人生，我的布局怎么坏了...


// 结构如下
// a 红 b 绿 c 黄
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="widrh=device-width,initial-scale=1.0,maximum-scale=2.0,user-scarable=yes"/>
		<title>test</title>
		<style type="text/css">
			#a {
				height: 60px;
				width: 100%;
				background: #FF0000;
			}
			#b {
				height: 200px;
				width: 100%;
				background: #008000;
			}
			#c {
				height: 20px;
				width: 100px;
				background: #FFFF00;
			}
		</style>
	</head>A
	<body>
		<div id="a">
			<div id="b"></div>
		</div>
		<div id="c"></div>A
	</body>
</html>

原因

b的父元素a设置了height：60px；
b设置height：200px；并且b没有被限制显示，所以渲染后视觉上覆盖了a
a的兄弟元素c，按流渲染在a下面，a的占位是60px的高度，所以c紧接着在60px处开始渲染

<style type="text/css">
			#a {
				height: 60px;
				width: 100%;
				padding: 20px; /* 偏移一下b即可看到a */
				background: #FF0000;
			}
			#b {
				height: 200px;
				width: 100%;
				background: #008000;
			}
			#c {
				height: 20px;
				width: 100px;
				background: #FFFF00;
			}
</style>

如图

解决

给a加overflow: hidden; 限制b的显示大小

``` #a { height: 60px; width: 100%; padding: 20px; background: #FF0000; overflow: hidden; } ```

取消a的height，或设置height：auto; 渲染的时候，子元素会撑开父元素

#a {
				width: 100%;
				padding: 20px;
				background: #FF0000;
}

写在最后的话

踩坑++

posted on 2019-12-17 15:53 亭早阅读(238) 评论(0) 收藏举报