width宽度自适应属性值fill-available、fit-
2023-11-20 本文已影响0人
keknei
先把html写出来
<body>
<div class="box">
<h1>我是h1</h1>
<span>Against Tourist Trade要求Directions:</span>
</div>
</body>
下面挨个解析属性值到底是怎么用
fill-available、-webkit-fill-available
可以让元素宽度自行填充，类似width:100%，但是跟width:100%不一样，fill-available会影响padding的解析，就是说加上padding == 元素常规不加padding的width:100%的宽度
*{
margin: 0;
padding: 0;
}
.box{
width: -webkit-fill-available;
width: fill-available;
padding: 20px;
background: yellow;
margin: 0 auto;
}
.box h1{
width: 100px;
height: 100px;
background: red;
}
.box span{
background: blue;
}
fill-available.png
fit-content
根据子元素内容宽度进行填充，默认使用max-content;如果available<max-content，那就用available；如果available<min-content，那就使用min-content;available表示元素在视口中的可用空间，可以结合margin:0 auto来实现居中
*{
margin: 0;
padding: 0;
}
.box{
width: fit-content;
padding: 20px;
background: yellow;
margin: 0 auto;
}
.box h1{
width: 100px;
height: 100px;
background: red;
}
.box span{
background: blue;
}
fit-content.png
min-content
表示内在最小宽度或者最小高度，但是如果有英文的话，会等于最长的那个单词宽度，可以结合margin:0 auto来实现居中
*{
margin: 0;
padding: 0;
}
.box{
width: min-content;
padding: 20px;
background: yellow;
margin: 0 auto;
}
.box h1{
width: 100px;
height: 100px;
background: red;
}
.box span{
background: blue;
}
min-content.png
max-content
等于元素内容的宽，可以结合margin:0 auto来实现居中
*{
margin: 0;
padding: 0;
}
.box{
width: max-content;
padding: 20px;
background: yellow;
margin: 0 auto;
}
.box h1{
width: 100px;
height: 100px;
background: red;
}
.box span{
background: blue;
}
max-content.png
