css尺寸的自适应

最新推荐文章于 2024-05-05 18:28:16 发布

Kratial

最新推荐文章于 2024-05-05 18:28:16 发布

阅读量1.6k

点赞数

分类专栏： CSS 文章标签： css css3 html

本文链接：https://blog.csdn.net/Kratial/article/details/122471341

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

css自适应关键字:

fill-available,max-content,min-content,fit-content

fill-available:

撑满空闲空间（inline-block可以撑满可用空间）
若inline-block的高度需要撑满可用空间则父级元素需要设置固定像素的值，否则生效
实例如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>fill-available</title>
  <style>
    .box1{
      background-color: rebeccapurple;
    }
    /* inline-block可以撑满可用空间 */
    .box2{
      display: inline-block;
      background-color: pink;
      width: -webkit-fill-available;
      height: -webkit-fill-available;
    }
    /* 若inline-block的高度需要撑满可用空间则父级元素需要设置固定像素的值，否则生效 */
    .box{
      height: 200px;
    }
    .child{
      display: inline-block;
      background-color: royalblue;
      height: -webkit-fill-available;
    }
  </style>
</head>
<body>
  <!-- 正常参考 -->
  <div class="box1">111</div>
  <!-- 设置fill-available,但是父级元素没指定高度 -->
  <div class="box2">222</div>
  <!-- 设置fill-available,父级元素指定高度  -->
  <div class="box">
    <div class="child">child</div>
    <div class="child">child</div>
    <div class="child">child</div>
  </div>
</body>
</html>

在这里插入图片描述

fit-content:

收缩到内容尺寸(针对block元素有效)
实例如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>fit-content</title>
  <style>
    .box{
      background-color: royalblue;
    }
    .box2{
      background-color: sandybrown;
      margin: auto;
      width: -webkit-fit-content;
    }
  </style>
</head>
<body>
  <!-- 参考盒子 -->
  <div class="box">111</div>
  <!-- 设置了fit-content -->
  <div class="box2">222</div>
</body>
</html>

在这里插入图片描述

min-content

min-content的宽度：以容器中子元素的最大值为准
min-content的宽度：以容器中子元素的最大值为准,若是文本则参考的是不换行的文本的最大值，换行的文本就不考虑了

max-content

以容器中元素的最大值为准，如果出现文本，所有的文本的最大值为准，文本都会处理成不换行的形式

实例如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>min&max-content</title>
  <style>
    /* min-content的宽度： 以容器中子元素的最大值为准,若是文本则参考的是不换行的文本的最大值，换行的文本就不考虑了 ，*/
    .box1{
      width: -webkit-min-content;
    }
    /* 以容器中元素的最大值为准， 如果出现文本，所有的文本的最大值为准， 文本都会处理成不换行的形式 */
    .box2{
      width: -webkit-max-content;
    }
    .c:nth-child(1) {
      background: seagreen;
    }
    .c:nth-child(2){
      background: sienna;
    }
  </style>
</head>
<body>
  <!-- min-content -->
  <div class="box1">
    <div class="c">1111</div>
    <div class="c">12222222sdfghjkhgfdsadfghfd</div>
  </div>
  <br/>
  <!-- max-content -->
  <div class="box2">
    <div class="c">1</div>
    <div class="c">测试测试测试测试测试测试测试测试测试测试测试测测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
  </div>
</body>
</html>

在这里插入图片描述

Kratial

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css尺寸的自适应

css自适应关键字:fill-available,max-content,min-content,fit-contentfill-available:撑满空闲空间（inline-block可以撑满可用空间）若inline-block的高度需要撑满可用空间则父级元素需要设置固定像素的值，否则生效实例如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <
复制链接

扫一扫