---
title: CSS 逻辑属性与值
slug: Web/CSS/CSS_Logical_Properties
tags:
  - CSS
  - CSS Logical Properies
  - CSS 逻辑属性
  - Reference
  - 参考
  - 概览
translation_of: Web/CSS/CSS_Logical_Properties
---
<div>{{CSSRef}}</div>

<p><strong>CSS 逻辑属性与值</strong>是 <a href="/zh-CN/docs/Web/CSS"><abbr title="Cascading Stylesheets">CSS</abbr></a> 的一个模块，其引入的属性与值能做从逻辑角度控制布局，而不是从物理、方向或维度来控制。</p>

<p>The module also defines logical properties and values for properties previously defined in <abbr title="Cascading Stylesheets">CSS</abbr> 2.1. Logical properties define direction‐relative equivalents of their corresponding physical properties.</p>

<h3 id="block_与_inline">block 与 inline</h3>

<p>Logical properties and values use the abstract terms <em>block</em> and <em>inline</em> to describe the direction in which they flow. The physical meaning of these terms depends on the <a href="/en-US/docs/Web/CSS/CSS_Writing_Modes">writing mode</a>.</p>

<dl>
 <dt id="block-dimension">Block dimension</dt>
 <dd>The dimension perpendicular to the flow of text within a line, i.e., the vertical dimension in horizontal writing modes, and the horizontal dimension in vertical writing modes. For standard English text, it is the vertical dimension.</dd>
 <dt id="inline-dimension">Inline dimension</dt>
 <dd>The dimension parallel to the flow of text within a line, i.e., the horizontal dimension in horizontal writing modes, and the vertical dimension in vertical writing modes. For standard English text, it is the horizontal dimension.</dd>
</dl>

<h2 id="参考">参考</h2>

<h3 id="大小属性">大小属性</h3>

<div class="index">
<ul>
 <li>{{CSSxRef("block-size")}}</li>
 <li>{{CSSxRef("inline-size")}}</li>
 <li>{{CSSxRef("max-block-size")}}</li>
 <li>{{CSSxRef("max-inline-size")}}</li>
 <li>{{CSSxRef("min-block-size")}}</li>
 <li>{{CSSxRef("min-inline-size")}}</li>
</ul>
</div>

<h3 id="外边距_、边框与内边距属性">外边距 、边框与内边距属性</h3>

<div class="index">
<ul>
 <li>{{CSSxRef("border-block")}}</li>
 <li>{{CSSxRef("border-block-color")}}</li>
 <li>{{CSSxRef("border-block-end")}}</li>
 <li>{{CSSxRef("border-block-end-color")}}</li>
 <li>{{CSSxRef("border-block-end-style")}}</li>
 <li>{{CSSxRef("border-block-end-width")}}</li>
 <li>{{CSSxRef("border-block-start")}}</li>
 <li>{{CSSxRef("border-block-start-color")}}</li>
 <li>{{CSSxRef("border-block-start-style")}}</li>
 <li>{{CSSxRef("border-block-start-width")}}</li>
 <li>{{CSSxRef("border-block-style")}}</li>
 <li>{{CSSxRef("border-block-width")}}</li>
 <li>{{CSSxRef("border-color")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} keyword)</span></li>
 <li>{{CSSxRef("border-inline")}}</li>
 <li>{{CSSxRef("border-inline-color")}}</li>
 <li>{{CSSxRef("border-inline-end")}}</li>
 <li>{{CSSxRef("border-inline-end-color")}}</li>
 <li>{{CSSxRef("border-inline-end-style")}}</li>
 <li>{{CSSxRef("border-inline-end-width")}}</li>
 <li>{{CSSxRef("border-inline-start")}}</li>
 <li>{{CSSxRef("border-inline-start-color")}}</li>
 <li>{{CSSxRef("border-inline-start-style")}}</li>
 <li>{{CSSxRef("border-inline-start-width")}}</li>
 <li>{{CSSxRef("border-inline-style")}}</li>
 <li>{{CSSxRef("border-inline-width")}}</li>
 <li>{{CSSxRef("border-start-start-radius")}}</li>
 <li>{{CSSxRef("border-start-end-radius")}}</li>
 <li>{{CSSxRef("border-end-start-radius")}}</li>
 <li>{{CSSxRef("border-end-end-radius")}}</li>
 <li>{{CSSxRef("border-style")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} keyword)</span></li>
 <li>{{CSSxRef("border-width")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} keyword)</span></li>
 <li>{{CSSxRef("margin")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} keyword)</span></li>
 <li>{{CSSxRef("margin-block")}}</li>
 <li>{{CSSxRef("margin-block-end")}}</li>
 <li>{{CSSxRef("margin-block-start")}}</li>
 <li>{{CSSxRef("margin-inline")}}</li>
 <li>{{CSSxRef("margin-inline-end")}}</li>
 <li>{{CSSxRef("margin-inline-start")}}</li>
 <li>{{CSSxRef("padding")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} keyword)</span></li>
 <li>{{CSSxRef("padding-block")}}</li>
 <li>{{CSSxRef("padding-block-end")}}</li>
 <li>{{CSSxRef("padding-block-start")}}</li>
 <li>{{CSSxRef("padding-inline")}}</li>
 <li>{{CSSxRef("padding-inline-end")}}</li>
 <li>{{CSSxRef("padding-inline-start")}}</li>
</ul>
</div>

<h3 id="浮动与定位属性">浮动与定位属性</h3>

<div class="index">
<ul>
 <li>{{CSSxRef("clear")}} (<code style="white-space: nowrap;">inline-end</code> and <span style="white-space: nowrap;"><code>inline-start</code> keywords)</span></li>
 <li>{{CSSxRef("float")}} (<code style="white-space: nowrap;">inline-end</code> and <span style="white-space: nowrap;"><code>inline-start</code> keywords)</span></li>
 <li>{{CSSxRef("inset")}}</li>
 <li>{{CSSxRef("inset-block")}}</li>
 <li>{{CSSxRef("inset-block-end")}}</li>
 <li>{{CSSxRef("inset-block-start")}}</li>
 <li>{{CSSxRef("inset-inline")}}</li>
 <li>{{CSSxRef("inset-inline-end")}}</li>
 <li>{{CSSxRef("inset-inline-start")}}</li>
</ul>
</div>

<h3 id="其他属性">其他属性</h3>

<div class="index">
<ul>
 <li>{{CSSxRef("caption-side")}} (<code style="white-space: nowrap;">inline-end</code> and <span style="white-space: nowrap;"><code>inline-start</code> keywords)</span></li>
 <li>{{CSSxRef("overflow-block")}}</li>
 <li>{{CSSxRef("overflow-inline")}}</li>
 <li>{{CSSxRef("overscroll-behavior-block")}}</li>
 <li>{{CSSxRef("overscroll-behavior-inline")}}</li>
 <li>{{CSSxRef("resize")}} (<code>block</code> and <span style="white-space: nowrap;"><code>inline</code> keywords)</span></li>
 <li>{{CSSxRef("text-align")}} (<code>end</code> and <span style="white-space: nowrap;"><code>start</code> keywords)</span></li>
</ul>
</div>

<h3 id="已弃用属性">已弃用属性</h3>

<div class="index">
<ul>
 <li>{{CSSxRef("offset-block-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">(now {{CSSxRef("inset-block-end")}} {{Experimental_Inline}})</span></li>
 <li>{{CSSxRef("offset-block-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">(now {{CSSxRef("inset-block-start")}} {{Experimental_Inline}})</span></li>
 <li>{{CSSxRef("offset-inline-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">(now {{CSSxRef("inset-inline-end")}} {{Experimental_Inline}})</span></li>
 <li>{{CSSxRef("offset-inline-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">(now {{CSSxRef("inset-inline-start")}} {{Experimental_Inline}})</span></li>
</ul>
</div>

<h2 id="指南">指南</h2>

<ul>
 <li><a href="/zh-CN/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts">Basic concepts of logical properties and values</a></li>
 <li><a href="/zh-CN/docs/Web/CSS/CSS_Logical_Properties/Sizing">Logical Properties for sizing</a></li>
 <li><a href="/zh-CN/docs/Web/CSS/CSS_Logical_Properties/Margins_borders_padding">Logical Properties for margins, borders and padding</a></li>
 <li><a href="/zh-CN/docs/Web/CSS/CSS_Logical_Properties/Floating_and_positioning">Logical Properties for floating and positioning</a></li>
</ul>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">备注</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS Logical Properties")}}</td>
   <td>{{Spec2("CSS Logical Properties")}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容熊">浏览器兼容熊</h2>

<p>In general:</p>

<ul>
 <li>Firefox has support for the mapped properties — where there is a direct mapping from the physical to the logical version.</li>
 <li>Chrome, from version 69, has support for the mapped properties.</li>
 <li>Edge, from version 79, has the same support as Chrome.</li>
 <li>Firefox 66 introduces support for two value shorthands, also behind a flag in Chrome.</li>
 <li>Internet Explorer has no support.</li>
</ul>

<p>See the individual property pages for full compatibility information.</p>