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
|
---
title: 浮动和定位的逻辑属性
slug: Web/CSS/CSS_Logical_Properties/浮动和定位
translation_of: Web/CSS/CSS_Logical_Properties/Floating_and_positioning
---
<div>{{CSSRef}}</div>
<p class="summary"><a href="https://drafts.csswg.org/css-logical/">逻辑属性和值指南</a> 包含了 {{cssxref("float")}} 和{{cssxref("clear")}}逻辑属性到物理属性的映射, 以及与定位布局一起使用的<a href="/en-US/docs/Web/CSS/CSS_Positioning">定位属性</a>. 通过本文，我们来看看如何使用它们。</p>
<h2 id="Mapped_properties_and_values">Mapped properties and values</h2>
<p>The table below details the properties and values discussed in this guide along with their physical mappings. They assume a horizontal {{cssxref("writing-mode")}}, with a left-to-right direction.</p>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Logical property or value</th>
<th scope="col">Physical property or value</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{cssxref("float")}}: inline-start</td>
<td>{{cssxref("float")}}: left</td>
</tr>
<tr>
<td>{{cssxref("float")}}: inline-end</td>
<td>{{cssxref("float")}}: right</td>
</tr>
<tr>
<td>{{cssxref("clear")}}: inline-start</td>
<td>{{cssxref("clear")}}: left</td>
</tr>
<tr>
<td>{{cssxref("clear")}}: inline-end</td>
<td>{{cssxref("clear")}}: right</td>
</tr>
<tr>
<td>{{cssxref("inset-inline-start")}}</td>
<td>{{cssxref("left")}}</td>
</tr>
<tr>
<td>{{cssxref("inset-inline-end")}}</td>
<td>{{cssxref("right")}}</td>
</tr>
<tr>
<td>{{cssxref("inset-block-start")}}</td>
<td>{{cssxref("top")}}</td>
</tr>
<tr>
<td>{{cssxref("inset-block-end")}}</td>
<td>{{cssxref("bottom")}}</td>
</tr>
<tr>
<td>{{cssxref("text-align")}}: start</td>
<td>{{cssxref("text-align")}}: left</td>
</tr>
<tr>
<td>{{cssxref("text-align")}}: end</td>
<td>{{cssxref("text-align")}}: right</td>
</tr>
</tbody>
</table>
<p>In addition to these mapped properties there are some additional shorthand properties made possible by being able to address block and inline dimensions. These have no mapping to physical properties, aside from the {{cssxref("inset")}} property.</p>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Logical property</th>
<th scope="col">Purpose</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{cssxref("inset-inline")}}</td>
<td>Sets both of the above inset values for the inline dimension simultaneously.</td>
</tr>
<tr>
<td>{{cssxref("inset-block")}}</td>
<td>Sets both of the above inset values for the block dimension simultaneously.</td>
</tr>
<tr>
<td>{{cssxref("inset")}}</td>
<td>Sets all four inset values simultaneously with physical mapping of multi-value.</td>
</tr>
</tbody>
</table>
<h2 id="Float_and_clear_example">Float and clear example</h2>
<p>The physical values used with the {{cssxref("float")}} and {{cssxref("clear")}} properties are <code>left</code>, <code>right</code> and <code>both</code>. The Logical Properties specification defines the values <code>inline-start</code> and <code>inline-end</code> as mappings for <code>left</code> and <code>right</code>.</p>
<p>In the example below I have two boxes — the first has the box floated with <code>float: left</code>, the second with <code>float: inline-start</code>. If you change the <code>writing-mode</code> to <code>vertical-rl</code> or the <code>direction</code> to <code>rtl</code> you will see that the left-floated box always sticks to the left, whereas the <code>inline-start</code>-floated item follows the <code>direction</code> and <code>writing-mode</code>.</p>
<p>{{EmbedGHLiveSample("css-examples/logical/float.html", '100%', 700)}}</p>
<h2 id="Example_Inset_properties_for_positioned_layout">Example: Inset properties for positioned layout</h2>
<p>Positioning generally allows us to position an element in a manner relative to its containing block — we essentially inset the item relative to where it would fall based on normal flow. To do this we have historically used the physical properties {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} and {{cssxref("left")}}.</p>
<p>These properties take a length or a percentage as a value, and relate to the user's screen dimensions.</p>
<p>New properties have been created in the Logical Properties specification for when you want the positioning to relate to the flow of text in your writing mode. These are as follows: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}} and {{cssxref("inset-inline-end")}}.</p>
<p>In the below example I have used the <code>inset-block-start</code> and <code>inset-inline-end</code> properties to position the blue box using absolute positioning inside the area with the grey dotted border, which has <code>position: relative</code>. Change the <code>writing-mode</code> property to <code>vertical-rl</code>, or add <code>direction: rtl</code>, and see how the flow relative box stays with the text direction.</p>
<p>{{EmbedGHLiveSample("css-examples/logical/positioning-inset.html", '100%', 700)}}</p>
<h2 id="New_two-_and_four-value_shorthands">New two- and four-value shorthands</h2>
<p>As with other properties in the specification we have some new shorthand properties, which give the ability to set two or four values at once.</p>
<ul>
<li>{{cssxref("inset")}} — sets all four sides together with physical mapping.</li>
<li>{{cssxref("inset-inline")}} — sets both logical inline insets.</li>
<li>{{cssxref("inset-block")}} — sets both logical block insets.</li>
</ul>
<div class="blockIndicator note">
<p><strong>Note</strong>: The browsers that have implemented the Logical Properties specification have so far implemented the direct mappings and not the new shorthands. Look to the browser compatibility data section on each property page reference for more details.</p>
</div>
<h2 id="Example_Logical_values_for_text-align">Example: Logical values for text-align</h2>
<p>The {{cssxref("text-align")}} property has logical values that relate to text direction — rather than using <code>left</code> and <code>right</code> we can use <code>start</code> and <code>end</code>. In the below example I have set <code>text-align: right</code> in the first block and <code>text-align: end</code> in the second.</p>
<p>If you change the value of <code>direction</code> to <code>rtl</code> you will see that the alignment stays to the right for the first block, but goes to the logical end on the left in the second.</p>
<p>{{EmbedGHLiveSample("css-examples/logical/text-align.html", '100%', 700)}}</p>
<p>This works in a more consistent way when using box alignment that uses start and end rather than physical directions for alignment.</p>
|
