一、布局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>
在开发工具里面的代码截图：
三、未添加样式的在浏览器渲染的截图：
四、添加了样式的在浏览器里面的渲染的截图：
一般父级是不设置高度的，他里面的子级内容就会随子级内容高度的增加而自动增高，这样做的好处是样式很灵活，修改子级内容的时候没必要再修改父级的高度。另外如果父级没设置高度，内部有子级浮动的时候，会使子级页面超出父级，需要给父级加个overflow:hidden属性，这样父级的高度同样也会随子级容器及子级内容的高度而自适应。
需要外面套一个容器，定义这个容器的宽高，也是在这个容器里定义overflow:hidden。父容器里面就是你想设置的内容。子内容超出的部分会被父容器截断。
这时候你就可以用transform进行左移了。
