min.max宽度和高度最终数值的计算
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素的宽度</title>
<style type="text/css">
p{background-color:yellow;height:200px;}
div{background-color:pink;height:600px;width:600px;}
.p1{width:30%;height:30%;}
.p2{max-width:30%;max-height:30%;}
.p3{max-width:300px;min-height:200px;}
/*补充样式*/
</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>
老师，您好，我想咨询一下，关于上述代码，每个p元素最终的数值计算，我是否是正确的？题目给出height高度数值为200px，宽度width数值为600px，第一个p标签：width：180px，height：60px；第二个p标签：width：180px，height：60px 第三个p标签：height:200px(但是为什么最终显示只有60px的样子？是因为空间排布的问题么？那其实黄色框与框之间的粉红色区域差不多也有20px？) width:180px(因为前面两个p元素都是180px的宽度，为什么最终显示的宽度却比180px要多呢？)感觉有200px的样子。既然设定了宽度和高度的上下限，数值不是随机出现，而是和其他标签进行了比较，这个比较的原则是什么呢？是否为有最小值，但是不能比其他元素的数值要大，有最大值，但是不可以比其他元素的最小值要小？
正在回答
同学你好，这是因为块元素是有默认宽度的，它的默认宽度比限制的宽度大，所以肯定要尽可能在符合要求的情况下，设置做大的那个值。参考如下：
在不设置宽度的情况下，宽度是父元素宽度的100%。这里第三个p元素如果不设置max-width: 300px;的情况下，默认就是600px。可以把最大宽度去掉看看效果：
但是这里设置了最大宽度，上限就是300px。也就是元素本身应该是600px，但是限制了宽度最大只能到300px，所以它的宽度只能到300px，多了就超出限制了。
祝学习愉快 ~
同学你好，问题中的描述与代码最终测试效果完全不符合，所以没有明白同学表述的具体是什么意思。老师这边给你讲解一下，同学有不理解的可以详细去问。
根据代码测试，效果实现是正确的。解析如下：
1.父元素的div的宽高都是600px，代码中是符合的。可以在浏览器中按F12查看元素宽高。
2.第一个P标签是父元素宽、高的30% ,也就是600乘以30% ，得出第一个p宽高都是180px。虽然p设置了高度200px，但是选择器权重不够 ，所以之前的高度会覆盖，最终生效的是180*180
3.第二个P标签的最大宽度是父元素的30%，最大高度是父元素的30%。最大宽高限制了元素的宽高最大不能超过180px。所以p元素设置的高度200px超出了限制，也不生效。最终宽高为180*180
4.三个P标签的最小高度是200px，最大宽度是300px。限制了元素的宽高最小不能低于200*300，之前设置的高度200px是符合的，所以它的最终宽高为200*300
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星