如何解决CSS 高度属性不适用于 h1 元素
CSS 文件
div {
width: 200px;
height: 200px;
color: rgb(245,82,191);
}
.box1 {
background-color: rgb(55,39,160);
}
.box2 {
background-color: firebrick;
}
.box3 {
background-color: goldenrod;
}
**HTML FILE**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="styles8.css" />
</head>
<body>
<div class="boxes">
<h1 class="box1">I'm with border-box and padding.</h1>
<h1 class="box2">I'm normal.</h1>
<h1 class="box3">I'm without border-box and with padding.</h1>
</div>
</body>
</html>
上面我已经提到了 html 文件以及链接到它的 CSS 文件。所有属性都被正确遵循,但不知何故 div 选择器内的高度属性不适用于三个元素中的任何一个。我也试过为 div 元素分配一个类,但它仍然不起作用。我认为问题可能出在 div 选择器上,因为当我使用 h1 选择器和所有三个类 box1、box2、box3 代替 div 选择器时,它可以正常工作,并且高度属性应用于所有三个 h1 元素.
解决方法
div {
color: rgb(245,82,191);
}
h1 {
width: 200px;
height: 400px;
}
.box1 {
background-color: rgb(55,39,160);
}
.box2 {
background-color: firebrick;
}
.box3 {
background-color: goldenrod;
}
**HTML FILE**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="styles8.css" />
</head>
<body>
<div class="boxes">
<h1 class="box1">I'm with border-box and padding.</h1>
<h1 class="box2">I'm normal.</h1>
<h1 class="box3">I'm without border-box and with padding.</h1>
</div>
</body>
</html>
您应该将高度和宽度放在要应用高度/宽度的元素上,而不是其父元素上。
,试试这个。你是这个意思吗?
div h1 {
width: 200px;
height: 200px;
color: rgb(245,191);
}
.box1 {
background-color: rgb(55,160);
}
.box2 {
background-color: firebrick;
}
.box3 {
background-color: goldenrod;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="styles8.css" />
</head>
<body>
<div class="boxes">
<h1 class="box1">I'm with border-box and padding.</h1>
<h1 class="box2">I'm normal.</h1>
<h1 class="box3">I'm without border-box and with padding.</h1>
</div>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。