aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/css/css_logical_properties/index.html
blob: 3fc98c395211b4c5beba4e36eb073ec6e10b95a0 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
---
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>