感觉最后效果有问题，特别是第二个P标签（不是应该与第一个P标签长高一样吗？），又不知道哪里错了？

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>元素的宽度</title>

<style type="text/css">

/*补充样式*/

div{

height: 600px;

width: 900px;

background-color: pink;

}

p{background-color: yellow;}

.p1{

height: 30%;

width: 30%;

}

.p2{

max-width: 30%;

max-height: 30%;

}

.p3{

min-height: 50px;

max-height: 100px;

}

</style>

</head>

<body>

<div>

<p class="p1">第一个P标签是父元素宽、高的30%</p>

<p class="p2">第二个P标签的最大宽度是父元素的30%，最大高度是父元素的30%</p>

<p class="p3">第三个P标签的最小高度是200px，最大高度是300px</p>

</div>

</body>

</html>

源自：盒子模型 3-9 哪些元素可设置width和height属性

收起

2回答

精慕门6555066 2017-08-14 10:04:00

div和p标签没有继承关系，前两个百分比根据父元素大小变化而变化，最后一个具体数值是根据P元素本身而设置？

小于飞飞 2017-04-06 21:54:56

你好，经审核，将题目代码进行详细调整，这个题主要考核height和max-heigth\min-height ，添加 p{background-color:yellow;height:200px;}代码，在根据新的代码，试一试。感谢反馈问题，祝学习愉快。

bby365 #1

你好，我也是遇到了同样的问题，为什么要在p中加了height:200px？，

2017-04-15 10:41:05
小于飞飞回复 bby365 #2

你好，一个元素同时设置 height和max-heigth\min-height ，如何采取什么值。如没有height , 采取值与max-heigth\min-height 有关。

2017-04-15 15:06:17