css中如何继承父元素的高度？

html-css09

css中如何继承父元素的高度？,第1张

一、布局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>

在开发工具里面的代码截图：

三、未添加样式的在浏览器渲染的截图：

四、添加了样式的在浏览器里面的渲染的截图：

1、首先新建一个html文件，命名为test.html。

2、在test.html文件内，使用p标签创建两行文字，代码如下。

3、在test.html文件内，设置第一个p标签id属性为mp，主要用于下面使用css设置该p元素隐藏。

4、在test.html文件内，编写标签<style type="text/css"></style>，下面将在标签内编写css样式。

5、在css标签内，使用css设置p标签的行高为30px，在浏览器运行test.html。

6、在css标签内，对id为mp的p元素样式进行单独定义，通过dispay属性设置为none，实现该p元素隐藏不可见。

7、最后在浏览器打开test.html文件，查看实现的效果。