一、布局HTML:布局就是将整体的框架给搭建起来,让用户知道你的布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>继承父亲的高度</title>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
二、css中如何继承父元素的高度:(1)添加CSS样式,父级盒子的高度要明确是多少,子级盒子的高度可以直接写成100%,那这样就直接继承了父级盒子的高度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>继承父亲的高度</title>
<style type="text/css">
.father {
width: 200px
height: 200px
background-color: orange
}
.son {
width: 100px
/*height: 20px*/
height: 100%
background-color: teal
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
在开发工具里面的代码截图:
三、未添加样式的在浏览器渲染的截图:
四、添加了样式的在浏览器里面的渲染的截图:
最开始就是这样子啦,可是我脑子一热,想让b浮动(工作中确实会遇到这种情况),然后float:left,发现父元素没高度了(看起来就像父元素没了)。
就像这样子:
(其实我最开始是发现给了个border-bottom属性,它跑去顶部了)
这种情况,给父元素一个height值就可以了,可是我不能给它一个固定的高度,我想让它随内容的高度变化。
怎么办呢。
诶,我想到一个办法:
我在父元素最后添加了一个空的元素c,用c清空左右浮动,就又回到最开始的效果了,而且动态添加其他元素的话,父元素高度也会像开始那样随之变化了。