您的位置:首页 >我爱生活 >

css height自适应(cssheight)

导读 大家好,我是小曜,我来为大家解答以上问题。css height自适应,cssheight很多人还不知道,现在让我们一起来看看吧!1、一、布局HTML:布...

大家好,我是小曜,我来为大家解答以上问题。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、四、添加了样式的在浏览器里面的渲染的截图:

本文到此讲解完毕了,希望对大家有帮助。

免责声明:本文由用户上传,如有侵权请联系删除!