<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
.box{
width:600px;
height: 100px;
background: red;
margin: 100px auto;
}
.box1{
height: 50px;
background: pink;
width: -webkit-fill-available;/*让元素的宽度与父元素宽度一致*/
}
.con{
width:fit-content;/*内容撑起的宽度*/
height: 300px;
background: red;
margin:100px auto;
}
/*子元素不确定有多少个,那父元素不好设置宽度,又想居中显示*/
.con1{
width:100px;
height: 100px;
background: pink;
margin:10px;
float:left;
}
/*max-content*/
.main1{
width: min-content;
width: max-content;
height: 100px;
background: pink;
margin: 100px;
padding:20px;
}
.con3{
width:200px;
height:50px;
background: red;
margin: 10px;
}
</style>
</head>
<body>
<!--
width:; height:;
-webkit-fill-available
让元素自适应父元素的宽度或者高度
fit-content 让一个元素适应内容的一个宽度
max-content 适应元素撑起来的最大宽度/最大高度
min-content 适应元素撑起来的最小宽度/最小高度
-->
<div class="box">
<div class="box1"></div>
</div>
<div class="con">
<div class="con1"></div>
<div class="con1"></div>
<div class="con1"></div>
</div>
<div class="main1">
更新中！更新中！更新中！更新中！更新中！
<div class="con3"></div>
<div style="width:100px;height:30px;background:blue;"></div>
</div>
</body>
</html>
CSS3宽高属性值
最新推荐文章于 2022-08-14 17:33:53 发布
1311
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
