2 files changed, 249 insertions, 0 deletions
diff --git a/files/zh-cn/web/css/css_logical_properties/basic_conceptsjie/index.html b/files/zh-cn/web/css/css_logical_properties/basic_conceptsjie/index.html
new file mode 100644
index 0000000000..cfce90ff34
--- /dev/null
+++ b/files/zh-cn/web/css/css_logical_properties/basic_conceptsjie/index.html
@@ -0,0 +1,71 @@
+---
+title: 逻辑属性的和值的基本概念
+slug: Web/CSS/CSS_Logical_Properties/Basic_conceptsjie
+translation_of: Web/CSS/CSS_Logical_Properties/Basic_concepts
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">逻辑属性与值详述中为CSS中许多属性和值引入相对浮动功能。本文介绍了详述，同时对浮动相关的属性和值做出了解释。</p>
+
+<h2 id="我们为什么需要逻辑属性">我们为什么需要逻辑属性?</h2>
+
+<p>传统CSS根据屏幕的物理大小定义了 traditionally has sized things according to the physical dimensions of the screen. Therefore we describe boxes as having a {{CSSxRef("width")}} and {{CSSxRef("height")}}, position items from the <code>top</code> and <code>left</code>, float things left, assign borders, margin, and padding to the <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>, etc. The <a href="https://drafts.csswg.org/css-logical/">Logical Properties and Values specification</a> defines mappings for these physical values to their logical, or flow relative, counterparts — e.g. <code>start</code> and <code>end</code> as opposed to <code>left</code> and <code>right</code>/<code>top</code> and <code>bottom</code>.</p>
+
+<p>An example of why these mappings might be needed is as follows. I have a Layout using CSS Grid, the grid container has a width applied and I am using the {{CSSxRef("align-self")}} and {{CSSxRef("justify-self")}} properties to align the items. These properties are flow relative — <code>justify-self: start</code> aligns the item to the start on the inline dimension, <code>align-self: start</code> does the same on the block dimension.</p>
+
+<p><img alt="A grid in a horizontal writing mode" src="https://mdn.mozillademos.org/files/16338/grid-horizontal-width-sm.png" style="display: block; margin: 0 auto; width: 350px;"></p>
+
+<p>If I now change the writing mode of this component to <code>vertical-rl</code> using the {{CSSxRef("writing-mode")}} property, the alignment continues to work in the same way. The inline dimension is now running vertically and the block dimension horizontally. The grid doesn't look the same however, as the width assigned to the container is a horizontal measure, a measure tied to the physical and not the logical or flow relative running of the text.</p>
+
+<p><img alt="A grid in vertical writing mode." src="https://mdn.mozillademos.org/files/16339/grid-vertical-width-sm.png" style="display: block; margin: 0 auto; width: 350px;"></p>
+
+<p>If instead of the <code>width</code> property we use the logical property {{CSSxRef("inline-size")}}, the component now works the same way no matter which writing mode it is displayed using.</p>
+
+<p><img alt="A grid layout in vertical writing mode" src="https://mdn.mozillademos.org/files/16337/grid-vertical-inline-size-small.png" style="display: block; height: 382px; margin: 0 auto; width: 200px;"></p>
+
+<p>You can try this out in the live example below. Change <code>writing-mode</code> from <code>vertical-rl</code> to <code>horizontal-tb</code> on <code>.box</code> to see how the different properties change the layout.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/intro-grid-example.html", '100%', 700)}}</p>
+
+<p><span style="letter-spacing: -0.00278rem;">When working with a site in a writing mode other than a horizontal, top to bottom one, or when using writing modes for creative reasons, being able to relate to the flow of the content makes a lot of sense.</span></p>
+
+<h2 id="Block_and_inline_dimensions">Block and inline dimensions</h2>
+
+<p>A key concept of working with flow relative properties and values is the two dimensions of block and inline. As we saw above, newer CSS layout methods such as Flexbox and Grid Layout use the concepts of <code>block</code> and <code>inline</code> rather than <code>right</code> and <code>left</code>/<code>top</code> and <code>bottom</code> when aligning items.</p>
+
+<p>The <code>inline</code> dimension is the dimension along which a line of text runs in the writing mode in use. Therefore, in an English document with the text running horizontally left to right, or an Arabic document with the text running horizontally right to left, the inline dimension is <em>horizontal</em>. Switch to a vertical writing mode (e.g. a Japanese document) and the inline dimension is now <em>vertical</em>, as lines in that writing mode run vertically.</p>
+
+<p>The block dimension is the other dimension, and the direction in which blocks — such as paragraphs — display one after the other. In English and Arabic these run vertically, whereas in any vertical writing mode these run horizontally.</p>
+
+<p>The below diagram shows the inline and block directions in a horizontal writing mode:</p>
+
+<p><img alt="diagram showing the inline axis running horizontally, block axis vertically." src="https://mdn.mozillademos.org/files/16340/mdn-horizontal.png" style="display: block; height: 382px; margin: 0 auto; width: 521px;"></p>
+
+<p>This diagram shows block and inline in a vertical writing mode:</p>
+
+<p><img alt="Diagram showing the block axis running horizontally the inline axis vertically." src="https://mdn.mozillademos.org/files/16341/mdn-vertical.png" style="display: block; height: 382px; margin: 0 auto; width: 418px;"></p>
+
+<h2 id="Browser_support">Browser support</h2>
+
+<p>Logical Properties and Values can be thought of as a couple of groups in terms of current browser support. Some of the properties are essentially mappings from the physical versions, for example {{CSSxRef("inline-size")}} for {{CSSxRef("width")}} or {{CSSxRef("margin-inline-start")}} rather than {{CSSxRef("margin-left")}}. These mapped properties are starting to see good browser support, and if you look at the individual pages for the properties in the <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties#Reference">reference here on MDN</a> you will see that Edge is the only modern browser currently missing these.</p>
+
+<p>There are then a group of properties which do not have a direct mapping in terms of existing physical properties. These are shorthands made possible by the fact that we can refer to both edges of the block or inline dimension at once. An example would be {{CSSxRef("margin-block")}}, which is a shorthand setting for {{CSSxRef("margin-block-start")}} and {{CSSxRef("margin-block-end")}}. These currently have no browser support.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: The CSS Working Group are currently trying to decide what to do about the four-value shorthands for logical properties, for example the equivalents to setting four physical properties at once, like margins with the {{CSSxRef("margin")}} property. We would need some kind of modifier if we were to reuse <code>margin</code> for flow-relative properties. If you would like to read the suggestions or comment on them the relevant GitHub issue is <a href="https://github.com/w3c/csswg-drafts/issues/1282">#1282</a>.</p>
+</div>
+
+<h3 id="Testing_for_browser_support">Testing for browser support</h3>
+
+<p>You can test for support of logical properties and values using feature queries. For example you could set a {{CSSxRef("width")}}, test for {{CSSxRef("inline-size")}} and, if it is supported, set the <code>width</code> to <code>auto</code> and the <code>inline-size</code> to the original <code>width</code> value.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/intro-feature-queries.html", "100%", 700)}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box Alignment in Grid Layout</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">Box Alignment in Flex Layout</a></li>
+ <li><a href="https://www.smashingmagazine.com/2018/03/understanding-logical-properties-values/">Understanding Logical Properties and Values</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">Writing Modes</a></li>
+</ul>
diff --git a/files/zh-cn/web/css/css_logical_properties/index.html b/files/zh-cn/web/css/css_logical_properties/index.html
new file mode 100644
index 0000000000..3fc98c3952
--- /dev/null
+++ b/files/zh-cn/web/css/css_logical_properties/index.html
@@ -0,0 +1,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>