css height自适应(cssheight)
大家好,我是小曜,我来为大家解答以上问题。css height自适应,cssheight很多人还不知道,现在让我们一起来看看吧!
1、一、布局HTML:布局就是将整体的框架给搭建起来,让用户知道你的布局
2、<!DOCTYPE html>
3、<html lang="en">
4、<head>
5、<meta charset="UTF-8">
6、<title>继承父亲的高度</title>
7、</head>
8、<body>
9、<div class="father">
10、<div class="son"></div>
11、</div>
12、</body>
13、</html>
14、二、css中如何继承父元素的高度:(1)添加CSS样式,父级盒子的高度要明确是多少,子级盒子的高度可以直接写成100%,那这样就直接继承了父级盒子的高度。
15、<!DOCTYPE html>
16、<html lang="en">
17、<head>
18、<meta charset="UTF-8">
19、<title>继承父亲的高度</title>
20、<style type="text/css">
21、.father {
22、width: 200px;
23、height: 200px;
24、background-color: orange;
25、}
26、.son {
27、width: 100px;
28、/*height: 20px;*/
29、height: 100%;
30、background-color: teal;
31、}
32、</style>
33、</head>
34、<body>
35、<div class="father">
36、<div class="son"></div>
37、</div>
38、</body>
39、</html>
40、在开发工具里面的代码截图:
41、三、未添加样式的在浏览器渲染的截图:
42、四、添加了样式的在浏览器里面的渲染的截图:
本文到此讲解完毕了,希望对大家有帮助。