CSS 属性

CSS 的 inline-size 属性根据元素的书写模式确定元素内联的水平或垂直尺寸。它与CSS的宽度或高度属性相关，基于writing-mode的值。

当书写模式为垂直方向时，inline-size的值与元素的高度相关，否则与元素的宽度有关。

属性值

CSS 属性 inline-size 的值与 height和高width属性相同。

适用范围

除不可替换的内联元素、表格行和行组。

语法

以下是声明 inline-size 的不同方式:

长度值

inline-size: 100px;
inline-size: 20em;

百分比值

inline-size: 45%;

关键字值

inline-size: max-content;
inline-size: min-content;
inline-size: fit-content;
inline-size: auto;

全局值

inline-size: inherit;
inline-size: initial;
inline-size: revert;
inline-size: revert-layer;
inline-size: unset;

CSS inline-size: 使用长度值

以下示例演示了使用写入模式:vertical-rl 和 inline-size 给出长度值的输出:

<html>
<head>
<style>
   .container {
      writing-mode: vertical-rl;
      background-color: pink;
      border: 2px solid blue;
      display: inline-block;
   }

   .sampleText-px {
      inline-size: 100px;
   }

   .sampleText-em {
      inline-size: 20em;
   }
</style>
</head>
<body>
   <h2>inline-size: length value with writing-mode: vertical-rl</h2>
   <div class="container sampleText-px">Sample Text-px</div>
   <div class="container sampleText-em">Sample Text-em</div>
</body>
</html>

以下示例演示了使用写入模式:horizontal-tb 和 inline-size 的输出inline-size 被赋予一个长度值:

<html>
<head>
<style>
   .container {
      writing-mode: horizontal-tb;
      background-color: pink;
      border: 2px solid blue;
      display: inline-block;
   }

   .sampleText-px {
      inline-size: 100px;
   }

   .sampleText-em {
      inline-size: 20em;
   }
</style>
</head>
<body>
   <h2>inline-size: length value with writing-mode: horizontal-tb</h2>
   <div class="container sampleText-px">Sample Text-px</div>
   <div class="container sampleText-em">Sample Text-em</div>
</body>
</html>

CSS inline-size: 使用百分比值

以下示例演示了使用写入模式的输出:vertical-rl 和 inline-size 为以百分比值给出:

<html>
<head>
<style>
   .container {
      writing-mode: vertical-rl;
      background-color: pink;
      border: 2px solid blue;
      display: inline-block;
   }

   .sampleText-10per {
      inline-size: 10%;
   }

   .sampleText-65per {
      inline-size: 65%;
   }
</style>
</head>
<body>
   <h2>inline-size: percentage value with writing-mode: vertical-rl</h2>
   <div class="container sampleText-10per">Sample Text-10%</div>
   <div class="container sampleText-65per">Sample Text-65%</div>
</body>
</html>

以下示例演示了使用writing-mode:horizontal-tb 和 inline-size 的输出，以百分比值给出:

<html>
<head>
<style>
   .container {
      writing-mode: horizontal-tb;
      background-color: pink;
      border: 2px solid blue;
      display: inline-inline;
   }

   .sampleText-10per {
      inline-size: 10%;
   }

   .sampleText-65per {
      inline-size: 65%;
   }
</style>
</head>
<body>
   <h2>inline-size: percentage value with writing-mode: horizontal-tb</h2>
   <div class="container sampleText-10per">Sample Text-10%</div>
   <div class="container sampleText-65per">Sample Text-65%</div>
</body>
</html>

CSS inline-size: 使用关键字值

以下示例演示了使用写入模式的输出:vertical-rl 和 inline-size 作为关键字值给出:

<html>
<head>
<style>
   .container {
      writing-mode: vertical-rl;
      background-color: pink;
      border: 2px solid blue;
      display: inline-block;
   }

   .sampleText-auto {
      inline-size: auto;
   }

   .sampleText-max {
      inline-size: max-content;
   }

   .sampleText-min {
      inline-size: min-content;
   }

   .sampleText-fit {
      inline-size: fit-content;
   }
</style>
</head>
<body>
   <h2>inline-size: keyword value with writing-mode: vertical-rl</h2>
   <div class="container sampleText-auto">Sample Text: auto</div>
   <div class="container sampleText-max">Sample Text: max-content</div>
   <div class="container sampleText-min">Sample Text: min-content</div>
   <div class="container sampleText-fit">Sample Text: fit-content feature</div>
</body>
</html>

以下示例演示了使用写入模式的输出-mode:horizontal-tb 和 inline-size 作为关键字值给出:

<html>
<head>
<style>
   .container {
      writing-mode: horizontal-tb;
      background-color: pink;
      border: 2px solid blue;
      display: inline-block;
   }

   .sampleText-auto {
      inline-size: auto;
   }

   .sampleText-max {
      inline-size: max-content;
   }

   .sampleText-min {
      inline-size: min-content;
   }

   .sampleText-fit {
      inline-size: fit-content;
   }
</style>
</head>
<body>
   <h2>inline-size: keyword value with writing-mode: horizontal-tb</h2>
   <div class="container sampleText-auto">Sample Text: auto</div>
   <div class="container sampleText-max">Sample Text: max-content</div>
   <div class="container sampleText-min">Sample Text: min-content</div>
   <div class="container sampleText-fit">Sample Text: fit-content feature</div>
</body>
</html>