diff options
Diffstat (limited to 'files/zh-cn/web/css')
59 files changed, 3450 insertions, 2645 deletions
diff --git a/files/zh-cn/web/css/@viewport/height/index.html b/files/zh-cn/web/css/@viewport/height/index.html deleted file mode 100644 index 92d33a292c..0000000000 --- a/files/zh-cn/web/css/@viewport/height/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: height -slug: Web/CSS/@viewport/height -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/height ---- -<div>{{CSSRef}}</div> - -<div><code><strong>height</strong></code><strong> </strong>CSS 属性是同时设置可视区 {{cssxref("@viewport/min-height", "min-height")}} and {{cssxref("@viewport/max-height", "max-height")}} 的简写。当你设置一个值的时候，最小高度（minimum height）和最大高度（maximum height）会被同时设置。</div> - -<p>如果提供两个值，第一个值会被设置为最小高度，第二个值将会被设置为最大高度。</p> - -<h2 id="语法">语法</h2> - -<pre class="brush: css notranslate">/* One value */ -height: auto; -height: 320px; -height: 15em; - -/* Two values */ -height: 320px 200px; -</pre> - -<h3 id="合法值">合法值</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>真实生效的高度值将根据其他 CSS 属性计算得出。</dd> - <dt><code><length></code></dt> - <dd>一个非负的绝对或相对值。</dd> - <dt><code><percentage></code></dt> - <dd>一个相对于缩放因子是 1.0 的初始可视区宽高的百分比值，水平和垂直方向的长度分别计算。不能是负值。</dd> -</dl> - -<h2 id="正式定义">正式定义</h2> - -<p>{{cssinfo}}</p> - -<h2 id="正式语法">正式语法</h2> - -<pre class="syntaxbox notranslate">{{csssyntax}}</pre> - -<h2 id="示例">示例</h2> - -<h3 id="设置最小和最大高度">设置最小和最大高度</h3> - -<pre class="brush: css notranslate">@viewport { - height: 500px; -}</pre> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>初始定义</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("css.at-rules.viewport.height")}}</p> - -<h2 id="同时查看">同时查看</h2> - -<ul> - <li>{{cssxref("@viewport")}}</li> -</ul> diff --git a/files/zh-cn/web/css/@viewport/orientation/index.html b/files/zh-cn/web/css/@viewport/orientation/index.html deleted file mode 100644 index 11519cee6e..0000000000 --- a/files/zh-cn/web/css/@viewport/orientation/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: orientation -slug: Web/CSS/@viewport/orientation -tags: - - CSS - - CSS Description -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/orientation ---- -<div>{{CSSRef}}</div> - -<h2 id="摘要">摘要</h2> - -<p>此 <strong><code>orientation</code></strong> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> 描述符控制由{{cssxref("@viewport")}}定义文档的方向。</p> - -<p><span style="line-height: 1.5;">通过设备的倾斜摆动情况来决定文档显示的方向，作者可以通过设置这个描述符来抑制方向的变化{{cssinfo}}</span></p> - -<h2 id="语法">语法</h2> - -<pre class="brush:css">/* Keyword values */ -orientation: auto; -orientation: portrait;/*锁定为纵向*/ -orientation: landscape;/* 锁定为横向*/ -</pre> - -<h3 id="取值">取值</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>用户代理将文档的方向设置为自动，通常基于设备的定位由加速度传感器 （如果设备具有这种硬件传感器），但是用户控制，OS 级别的"锁方向"往往会优先于加速度传感器的设置。</dd> - <dt><code>portrait</code></dt> - <dd>文档被锁定为纵向。</dd> - <dt><code>landscape</code></dt> - <dd>文档被锁定为横向。</dd> -</dl> - -<h3 id="标准语法">标准语法</h3> - -<pre class="syntaxbox">{{csssyntax}}</pre> - -<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('CSS3 Device', '#the-lsquoorientationrsquo-descriptor', '"orientation" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>10 {{property_prefix("-ms")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>8 {{property_prefix("-o")}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/zh-cn/web/css/@viewport/viewport-fit/index.html b/files/zh-cn/web/css/@viewport/viewport-fit/index.html deleted file mode 100644 index 2716ef1d6f..0000000000 --- a/files/zh-cn/web/css/@viewport/viewport-fit/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: viewport-fit -slug: Web/CSS/@viewport/viewport-fit -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/viewport-fit ---- -<div>{{CSSRef}} {{Draft}} {{SeeCompatTable}}</div> - -<p><strong><code>viewport-fit</code></strong> CSS {{CSSxRef("@viewport")}} {{Glossary("Descriptor (CSS)", "descriptor")}} 是为了控制文档是如何填充满屏幕的。</p> - -<h2 id="语法">语法</h2> - -<pre class="brush: css; no-line-numbers">/* 关键值*/ -viewport-fit: auto; -viewport-fit: contain; -viewport-fit: cover; -</pre> - -<h3 id="属性值">属性值</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>此值不影响初始布局视图端口，并且整个web页面都是可查看的。</dd> - <dt><code>contain</code></dt> - <dd>视图端口按比例缩放，以适合显示内嵌的最大矩形。</dd> - <dt><code>cover</code></dt> - <dd>视图端口被缩放以填充设备显示。强烈建议使用 <a href="/en-US/docs/Web/CSS/env">safe area inset 变量</a>，以确保重要内容不会出现在显示之外。</dd> -</dl> - -<h3 id="形式语法">形式语法</h3> - -<pre><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, initial-scale=1.0, <strong>viewport-fit=cover</strong>"</span><span style="color: #0000ff;">></span></pre> - -<h2 id="注意">注意</h2> - -<p>在使用 <code>viewport-fit</code> 描述符时，必须记住并不是所有的设备显示都是矩形的，因此应该使用<a href="/en-US/docs/Web/CSS/env">safe area inset 变量</a>。</p> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Round Display", "#viewport-fit-descriptor", '"viewport-fit" descriptor')}}</td> - <td>{{Spec2("CSS Round Display")}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<div class="hidden">兼容性表是由结构化数据生成的。如果您要为数据做出贡献，请点击连接 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 向我们发送请求。</div> - -<p>{{Compat("css.at-rules.viewport.viewport-fit")}}</p> - -<h2 id="另请参见">另请参见</h2> - -<ul> - <li>{{CSSxRef("env", "env()")}}</li> -</ul> diff --git a/files/zh-cn/web/css/@viewport/width/index.html b/files/zh-cn/web/css/@viewport/width/index.html deleted file mode 100644 index ed5c585a7e..0000000000 --- a/files/zh-cn/web/css/@viewport/width/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: width -slug: Web/CSS/@viewport/width -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/width ---- -<div>{{CSSRef}}</div> - -<p>The <strong>width</strong> CSS descriptor is shorthand for setting both the <a href="/zh-CN/docs/Web/CSS/@viewport/min-width"><code>min-width</code></a> and the <a href="/zh-CN/docs/Web/CSS/@viewport/max-width"><code>max-width</code></a> descriptors of the viewport. By providing one viewport length value, that value will determine both the <code>min-width</code> and the <code>max-width</code> to the value provided.</p> - -<p>If two viewport values are provided the first value will be set to the <code>min-width</code> and the second value will be set <code>max-width</code>.</p> - -<h2 id="Syntax" name="Syntax">Syntax</h2> - -<pre class="brush: css">/* An example with one viewport value: */ -@viewport { - width: 320px; -} - -/* An example with two viewport values: */ -@viewport { - width: 320px, 120px; -} - -</pre> - - - -<h3 id="Values" name="Values">Values</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>The used value is calculated from the other CSS descriptors' values.</dd> - <dt><code><length></code></dt> - <dd>A non-negative absolute or relative length.</dd> - <dt><code><percentage></code></dt> - <dd>A percentage value relative to the width or height of the <span class="css">initial viewport</span> at zoom factor 1.0, for horizontal and vertical lengths respectively. Must be non-negative.</dd> -</dl> - -<h3 id="Formal_syntax">Formal syntax</h3> - -<pre class="syntaxbox">auto <a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar">|</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length"><length></a> <a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar">|</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/percentage" title=""><percentage></a></pre> - -<h2 id="Specifications" name="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#descdef-viewport-min-width', '"min-width" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table" style="height: 93px; width: 950px;"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>29 (behind a flag)</td> - <td>{{CompatNo}}</td> - <td>10 {{property_prefix("-ms")}}</td> - <td>11.10<br> - Removed in 15<br> - Reintroduced behind a flag in 16</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table" style="height: 93px; width: 948px;"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td> - <table class="compat-table"> - <tbody> - <tr> - <td>4.4</td> - </tr> - </tbody> - </table> - </td> - <td> - <table class="compat-table"> - <tbody> - <tr> - <td>29</td> - </tr> - </tbody> - </table> - </td> - <td>{{CompatNo}}</td> - <td>10{{property_prefix("-ms")}}</td> - <td>11.10<br> - Removed in 15<br> - Reintroduced behind a flag in 16</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/zh-cn/web/css/@viewport/zoom/index.html b/files/zh-cn/web/css/@viewport/zoom/index.html deleted file mode 100644 index 894e8a6c73..0000000000 --- a/files/zh-cn/web/css/@viewport/zoom/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: zoom -slug: Web/CSS/@viewport/zoom -tags: - - CSS - - CSS Descriptor -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/zoom ---- -<div>{{ CSSRef }}</div> - -<p><strong><code>zoom</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> 属性会根据 {{cssxref("@viewport")}} 来初始化一个缩放因数。</p> - -<p>当设置<code>1.0</code> 或 <code>100%</code>时表示不缩放。更大的值放大，更小的值缩小。</p> - -<p>{{cssinfo}}</p> - -<h2 id="语法">语法</h2> - -<pre class="brush:css">/* Keyword value */ -zoom: auto; - -/* <number> values */ -zoom: 0.8; -zoom: 2.0; - -/* <percentage> values */ -zoom: 150%; -</pre> - -<h3 id="值">值</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>根据`viewport`来既定当前标签的缩放。</dd> - <dt><code><number></code></dt> - <dd>必须是一个非负数。1表示没有缩放，大于1表示放大的倍数，小于1亦然。</dd> - <dt><code><percentage></code></dt> - <dd>必须是一个非负的百分比。以100%为基础进行缩放。</dd> -</dl> - -<h3 id="形式语法">形式语法</h3> - -<pre class="syntaxbox">{{csssyntax}}</pre> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#zoom-desc', '"zoom" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>Initial specification</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容">浏览器兼容</h2> - - - -<p>{{Compat("css.at-rules.viewport.zoom")}}</p> diff --git a/files/zh-cn/web/css/_colon_-moz-placeholder/index.html b/files/zh-cn/web/css/_colon_-moz-placeholder/index.html deleted file mode 100644 index f7493e4757..0000000000 --- a/files/zh-cn/web/css/_colon_-moz-placeholder/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: ':-moz-placeholder' -slug: 'Web/CSS/:-moz-placeholder' -tags: - - CSS - - CSS Pseudo-class - - CSS Reference - - Non-standard -translation_of: 'Web/CSS/:placeholder-shown' -translation_of_original: 'Web/CSS/:-moz-placeholder' ---- -<p> </p> - -<div class="note"><strong>提示:</strong> <code><em>在Firefox 19+版本中</em> :-moz-placeholder</code> 伪类将被 {{ cssxref('::-moz-placeholder') }} 伪元素所替代.</div> - -<div class="note"><strong>Note: </strong>The CSSWG have decided to introduce <code>:placeholder-shown</code>. This functionality will be reintroduced in Gecko at some point in the future, unprefixed and under the new name. {{bug(1069012)}}</div> - -<p>{{ CSSRef() }}{{Non-standard_header}}{{ gecko_minversion_header("2.0") }}</p> - -<h2 id="Summary" name="Summary">摘要</h2> - -<p><code> :-moz-placeholder</code><a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">伪类</a>控制元素所显示的文字占位符<a href="/en/HTML/Forms_in_HTML#The_placeholder_attribute" title="en/HTML/HTML5/Forms in HTML5#The placeholder attribute">文字占位符</a>. 它允许开发者/设计师改变文字占位符样式. 默认的文字占位符颜色为浅灰色,当你的表单背景色为类似的颜色时它可能效果并不是很明显,那么你就可以使用这个伪类来改变文字占位符的颜色.</p> - -<h2 id="示例">示例</h2> - -<p>这个示例将文字占位符改变为了绿色.</p> - -<pre class="brush: html"><!doctype html> -<html> -<head> - <title>Placeholder demo</title> - <style type="text/css"> - input:-moz-placeholder { - color: green; - } - </style> -</head> -<body> - <input id="test" placeholder="Placeholder text!"> -</body> -</html> -</pre> - -<p><a href="/samples/cssref/moz-placeholder.html" title="https://developer.mozilla.org/samples/cssref/moz-placeholder.html">查看这个示例</a>.</p> - -<h2 id="溢出">溢出</h2> - -<p>在手机等设备上搜索框和表单字段经常会缩的很短,有时输入框并不能完全显示文字占位符,那么它便会被生硬的"切断".为了防止出现这种难看的效果,可以使用CSS <code>text-overflow: ellipsis;</code> 来省略一中间部分文字.</p> - -<pre class="brush: css">input[placeholder] { text-overflow: ellipsis; } -::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */ -input:-moz-placeholder { text-overflow: ellipsis; } -</pre> - -<p>It was David Walsh, the man on fire who introduced this to a lot of designers. <a class="external" href="http://davidwalsh.name/placeholder-overflow" title="Placeholders and Overflow">Placeholders and Overflow</a>.</p> - -<h2 id="Bugzilla" name="Bugzilla">Bugzilla</h2> - -<p>{{ Bug(457801) }}</p> - -<h2 id="SeeAlso" name="SeeAlso">See also</h2> - -<ul> - <li><a href="/en/HTML/HTML5/Forms_in_HTML5" title="en/HTML/HTML5/Forms in HTML5">Forms in HTML5</a></li> - <li>{{ HTMLElement("input") }}</li> - <li>{{ HTMLElement("textarea") }}</li> -</ul> diff --git a/files/zh-cn/web/css/_colon_any/index.html b/files/zh-cn/web/css/_colon_any/index.html deleted file mode 100644 index e9f8527a79..0000000000 --- a/files/zh-cn/web/css/_colon_any/index.html +++ /dev/null @@ -1,190 +0,0 @@ ---- -title: ':any' -slug: 'Web/CSS/:any' -tags: - - CSS - - 伪类选择器 - - 实验性 -translation_of: 'Web/CSS/:is' -translation_of_original: 'Web/CSS/:any' ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<h2 id="Summary" name="Summary">概要</h2> - -<p>The <code>:any()</code> <a href="/en-US/docs/CSS/Pseudo-classes" title="CSS/Pseudo-classes">pseudo-class</a> lets you quickly construct sets of similar selectors by establishing groups from which any of the included items will match. This is an alternative to having to repeat the entire selector for the one item that varies.</p> - -<p>译文：any()伪类可以让您快速构建类似的选择器集合，通过建立包含所有包含项的组来匹配。这是另一种选择，它必须重复整个选择器，因为其中一个项目是不同的。</p> - -<div class="note"><strong>Note : </strong>This pseudo-class is in progress to be standardized in <a class="external" href="http://dev.w3.org/csswg/selectors4/#matches" title="http://dev.w3.org/csswg/selectors4/#matches"><em>CSS Selectors Level 4</em></a> under the name <code>:matches()</code>. It is likely that the syntax and name of <code>:-<em>vendor</em>-any()</code> will be changed to reflect it in the near future.</div> - -<div class="note">注意:这个伪类正在CSS选择器第4级按照名称:matches()进行标准化。很可能的语法和名称:- vendor-any()将在不久的将来被更改以反映它。</div> - -<h2 id="Syntax" name="Syntax">语法</h2> - -<pre class="syntaxbox">{{csssyntax}}</pre> - -<h3 id="Values" name="Values">值</h3> - -<dl> - <dt><code>selector</code></dt> - <dd>选择器。这可以是由 <a class="external" href="http://www.w3.org/TR/css3-selectors/#simple-selectors" title="http://www.w3.org/TR/css3-selectors/#simple-selectors">CSS 3 简单选择器</a> 组成的简单选择器或多重选择器，并且可以包含后代组合器。</dd> -</dl> - -<div class="note"><strong>注意：</strong>选择器可以<strong>不</strong>包含伪元素，并且仅允许的组合器是后代组合器。</div> - -<h2 id="Examples" name="Examples">例子</h2> - -<p>举个例子，如以下 CSS：</p> - -<pre class="brush: css">/* 3 deep (or more) unordered lists use a square */ -ol ol ul, ol ul ul, ol menu ul, ol dir ul, -ol ol menu, ol ul menu, ol menu menu, ol dir menu, -ol ol dir, ol ul dir, ol menu dir, ol dir dir, -ul ol ul, ul ul ul, ul menu ul, ul dir ul, -ul ol menu, ul ul menu, ul menu menu, ul dir menu, -ul ol dir, ul ul dir, ul menu dir, ul dir dir, -menu ol ul, menu ul ul, menu menu ul, menu dir ul, -menu ol menu, menu ul menu, menu menu menu, menu dir menu, -menu ol dir, menu ul dir, menu menu dir, menu dir dir, -dir ol ul, dir ul ul, dir menu ul, dir dir ul, -dir ol menu, dir ul menu, dir menu menu, dir dir menu, -dir ol dir, dir ul dir, dir menu dir, dir dir dir { - list-style-type: square; -} -</pre> - -<p>可以写成这样：</p> - -<pre class="brush: css">/* 3 deep (or more) unordered lists use a square */ -:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul, -:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu, -:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir { - list-style-type: square; -}</pre> - -<p>但是，不能写成这样（详见<a href="#Issues_with_performance_and_specificity">the section on performance</a>）：</p> - -<pre class="brush: css">:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) { - list-style-type: square; -}</pre> - -<h2 id="Notes" name="Notes">Notes</h2> - -<p>译文： 这个伪类选择器会在处理 HTML5 的 <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">sections and headings</a> 中尤其有用。因为 {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, 和 {{HTMLElement("nav")}} 可以被嵌套，如果不使用 <code>:any()</code> ，为了去匹配这些标签来给予样式会变得困难。</p> - -<p>举个例子，当不使用 <code>:any()</code> ，给予不同的 DOM 结点层次深度下的所有的 {{HTMLElement("h1")}} 的元素样式时，将会变得特别的复杂。</p> - -<pre class="brush: css">/* Level 0 */ -h1 { - font-size: 30px; -} -/* Level 1 */ -section h1, article h1, aside h1, nav h1 { - font-size: 25px; -} -/* Level 2 */ -section section h1, section article h1, section aside h1, section nav h1, -article section h1, article article h1, article aside h1, article nav h1, -aside section h1, aside article h1, aside aside h1, aside nav h1, -nav section h1, nav article h1, nav aside h1, nav nav h1, { - font-size: 20px; -} -/* Level 3 */ -/* ... don't even think about it*/ -</pre> - -<p>然而，通过使用 <code>:any()</code> ，这将变得很简单：</p> - -<pre class="brush: css">/* Level 0 */ -h1 { - font-size: 30px; -} -/* Level 1 */ -:-moz-any(section, article, aside, nav) h1 { - font-size: 25px; -} -/* Level 2 */ -:-moz-any(section, article, aside, nav) -:-moz-any(section, article, aside, nav) h1 { - font-size: 20px; -} -/* Level 3 */ -:-moz-any(section, article, aside, nav) -:-moz-any(section, article, aside, nav) -:-moz-any(section, article, aside, nav) h1 { - font-size: 15px; -}</pre> - -<h3 id="Issues_with_performance_and_specificity" name="Issues_with_performance_and_specificity">性能与特异性问题</h3> - -<p><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=561154" title="https://bugzilla.mozilla.org/show_bug.cgi?id=561154">Bug 561154</a> 追踪了一个关于 Gecko 作为内核的浏览器在使用 <code>:-moz-any()</code> 不正确的问题。在最新的浏览器(从 Firefox 12) 实现 <code>:-moz-any()</code> 有一个通用的规则，在使用这个伪类选择器时，当使用它作为最右边的选择器会比使用 ID, Class, 标签选择器作为最右边的选择器要来的慢。</p> - -<p>例如:</p> - -<pre class="brush: css">.a > :-moz-any(.b, .c) -</pre> - -<p>会比下面的表达式慢</p> - -<pre class="brush: css">.a > .b, .a > .c -</pre> - -<p>而下面的表达式将会是最快的</p> - -<pre class="brush: css">:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c -</pre> - -<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoDesktop("2")}}{{property_prefix("-moz")}}</td> - <td>12.0 (534.30){{property_prefix("-webkit")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>5<br> - {{property_prefix("-webkit")}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>5<br> - {{property_prefix("-webkit")}}</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/zh-cn/web/css/_colon_blank空白伪类/index.html b/files/zh-cn/web/css/_colon_blank/index.html index adcaa5c998..adcaa5c998 100644 --- a/files/zh-cn/web/css/_colon_blank空白伪类/index.html +++ b/files/zh-cn/web/css/_colon_blank/index.html diff --git a/files/zh-cn/web/css/_doublecolon_-moz-placeholder/index.html b/files/zh-cn/web/css/_doublecolon_-moz-placeholder/index.html deleted file mode 100644 index 3c08f433c8..0000000000 --- a/files/zh-cn/web/css/_doublecolon_-moz-placeholder/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: '::-moz-placeholder' -slug: 'Web/CSS/::-moz-placeholder' -tags: - - CSS - - CSS Pseudo-class - - CSS Reference - - Non-standard -translation_of: 'Web/CSS/::placeholder' -translation_of_original: 'Web/CSS/::-moz-placeholder' ---- -<div>{{Non-standard_header}}{{CSSRef}}</div> - -<div class="note"><strong>提示:</strong> {{cssxref('::-moz-placeholder')}} 伪元素在Firefox 19+替代了之前的 <code>:-moz-placeholder </code>伪类.</div> - -<div>{{gecko_minversion_header("19.0")}}</div> - -<h2 id="摘要">摘要</h2> - -<p> <code>::-moz-placeholder</code> 伪元素控制元素所显示的文字占位符.它允许开发者/设计师改变文字占位符的样式.默认的文字占位符为浅灰色,当你的表单背景色为类似的颜色时它可能效果并不是很明显,那么你就可以使用这个伪类来改变文字占位符的颜色.</p> - -<h2 id="示例">示例</h2> - -<h3 id="HTML_内容">HTML 内容</h3> - -<pre class="brush: html"><input id="test" placeholder="Placeholder text!"></pre> - -<h3 id="CSS_内容">CSS 内容</h3> - -<pre class="brush: css">input::-moz-placeholder { - color: green; -}</pre> - -<p>{{EmbedLiveSample('%E7%A4%BA%E4%BE%8B', '100%', 100)}}</p> - -<p> </p> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{CompatibilityTable}}</p> - -<table> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("19.0")}}<sup>[1]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> - -<table> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile("19.0")}}<sup>[1]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> - -<p>[1] Firefox 对placeholder文本默认应用<code>{{cssxref("opacity")}}:0.54。详见</code>{{Bug("556145")}}。大多数主流浏览器目前不会对placeholder文本伪元素或者伪类应用默认样式。</p> - -<p>Gecko 此前将本属性视为 {{cssxref(":-moz-placeholder")}}。详见 {{Bug("737786")}}.</p> - -<h2 id="See_also" name="See_also">See also</h2> - -<ul> - <li>{{cssxref("::placeholder")}}</li> - <li>{{cssxref("::-webkit-input-placeholder")}}</li> - <li>{{cssxref(":-ms-input-placeholder")}}</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Forms_in_HTML">Forms in HTML</a></li> - <li>{{HTMLElement("input")}}</li> - <li>{{HTMLElement("textarea")}}</li> -</ul> diff --git a/files/zh-cn/web/css/common_css_questions/index.html b/files/zh-cn/web/css/common_css_questions/index.html deleted file mode 100644 index 0e0593054b..0000000000 --- a/files/zh-cn/web/css/common_css_questions/index.html +++ /dev/null @@ -1,183 +0,0 @@ ---- -title: CSS 常见问题 -slug: Web/CSS/Common_CSS_Questions -translation_of: Learn/CSS/Howto/CSS_FAQ ---- -<h2 id="为什么我有效的CSS没有正确的渲染？">为什么我有效的CSS没有正确的渲染？</h2> - -<p>浏览器使用DOCTYPE声明来选择是否使用更符合Web标准或兼容旧浏览器的bug的模式。在你的HTML的开始使用一个正确的和现代的DOCTYPE声明将改善浏览器标准执行。</p> - -<p>现代浏览器主要有两种渲染模式：</p> - -<ul> - <li><em>怪异模式：</em> 又称向后兼容模式,，允许将传统网页渲染为作者意图。 旧浏览器使用的非标准渲染规则。 不完整的、不正确的、缺少DOCTYPE声明或已知的DOCTYPE声明中普遍使用2001年以前的文件将在怪异模式中呈现。</li> - <li><em>标准模式：</em>浏览器试图严格遵守W3C标准。新HTML网页有望被设计为符合标准的浏览器，这样做的结果就是，用现代DOCTYPE声明的页面将被用标准模式呈现。</li> -</ul> - -<p>基于Gecko的浏览器， 有三分之一 <em><a href="https://developer.mozilla.org/en-US/docs/Gecko's_%22Almost_Standards%22_Mode">Almost Standards Mode</a></em>， 只有一些小怪癖。</p> - -<p>这是最常用的触发标准模式或准标准模式的DOCTYPE声明列表：</p> - -<pre><!DOCTYPE html> /* 这一行是 HTML5 的 doctype 声明。，使用该声明会使现代浏览器使用 - HTML5 解析器处理页面，这是推荐的 doctype 声明。*/ - -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" -"http://www.w3.org/TR/html4/loose.dtd"> - -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" -"http://www.w3.org/TR/html4/strict.dtd"> - -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" -"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" -"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> -</pre> - -<h2 id="My_CSS_is_valid.2C_but_not_correctly_rendered" name="My_CSS_is_valid.2C_but_not_correctly_rendered">为什么我有效的css完全没有被渲染？ </h2> - -<p>为了使浏览器渲染样式文件，CSS样式表必须用text/css的MIME。如果Web服务器不服务于这种类型，则CSS也不会被应用。</p> - -<h2 id="Difference_between_id_and_class" name="Difference_between_id_and_class">id和class有什么不同？</h2> - -<p>HTML元素可以拥有一个id/或class属性。 id属性为元素指定应用一个有效名称，只能有一个具有该名称的元素。class属性指定一个类名的元素，而这个名称可以被页面内的许多元素被使用。 CSS允许你可以对特定的id和/或类名的元素应用样式。<br> - <br> - 当你想给一个特定元素或块应用样式规则时就使用ID选择符。此样式将只用于与该特定id匹配的元素。</p> - -<p><br> - 当你想要将样式规则应用于多个块和元素时，你应该使用class选择符。</p> - -<p>较少样式的样式表通常性能更高。因此建议尽可能多地使用类， 保留id作为特定用途 (比如链接label标签和form元素或者为语义上唯一的元素应用样式)。</p> - -<p>查看 <a href="/en/CSS/Getting_Started/Selectors" title="en/CSS/Getting_Started/Selectors">CSS selectors</a></p> - -<h2 id="Restoring_the_default_property_value" name="Restoring_the_default_property_value">我如何还原属性的默认值？</h2> - -<p>最初CSS没有提供“defaule”关键字和还原默认属性的值，唯一途径是显式地重新声明该属性。</p> - -<p>与CSS2相比，已经发生了改变。 关键字 <a href="/es/CSS/initial" title="initial">initial</a> 现在是一个有效的CSS属性。它将给定的CSS属性值重置为默认值。</p> - -<h2 id="Derived_styles" name="Derived_styles">我如何才可以从一个样式中衍生出另一种样式?</h2> - -<p>CSS 不允许这样做。(See <a class="external" href="http://archivist.incutio.com/viewlist/css-discuss/2685">Eric Meyer's note about the Working Group's stance)</a>. 但是，将多个类分配给单个元素，可以提供相同的效果。</p> - -<h2 id="Assigning_multiple_classes" name="Assigning_multiple_classes">我该如何给一个元素分配多个类？</h2> - -<p>HTML元素可以通过列出的类属性，用空格分开它们。</p> - -<pre><style type="text/css"> -.news { background: black; color: white; } -.today { font-weight: bold; } -</style> - -<div class="news today"> -... content of today's news ... -</div> -</pre> - -<p>如果相同的属性中声明的规则，解决冲突首先通过特异性，然后根据CSS声明的顺序。在class属性类的顺序是不相关的。</p> - -<h2 id="Style_rules_that_don.27t_work" name="Style_rules_that_don.27t_work">为什么我的样式规则不能正确地工作？</h2> - -<p>在语法上正确的样式规则可能在某些情况下不适用。你可以使用 <a href="/en/DOM_Inspector" title="en/DOM_Inspector">DOM Inspector</a>'s <em>CSS Style Rules</em> 调试这类问题。 下面列出了最常见的忽略样式规则的实例：</p> - -<h3 id="HTML_elements_hierarchy" name="HTML_elements_hierarchy">HTML元素层次结构</h3> - -<p>The way CSS styles are applied to HTML elements depends also on the elements hierarchy. It is important to remember that a rule applied to a descendent overrides the style of the parent, in spite of any specificity or priority of CSS rules.</p> - -<pre>.news { color: black; } -.corpName { font-weight: bold; color: red; } - -<!-- news item text is black, but corporate name is red and in bold --> -<div class="news"> - (Reuters) <span class="corpName">General Electric</span> (GE.NYS) announced on Thursday... -</div> -</pre> - -<p>In case of complex HTML hierarchies, if a rule seems to be ignored, check if the element is inside another element with a different style.</p> - -<h3 id="Explicitly_re-defined_style_rule" name="Explicitly_re-defined_style_rule">显式重定义样式规则</h3> - -<p>In CSS stylesheets, order <strong>is</strong> important. If you define a rule and then you re-define the same rule, the last definition is used.</p> - -<pre>#stockTicker { font-weight: bold; } -.stockSymbol { color: red; } -/* other rules */ -/* other rules */ -/* other rules */ -.stockSymbol { font-weight: normal; } - -<!-- most text is in bold, except "GE", which is red and not bold --> -<div id="stockTicker"> - NYS: <span class="stockSymbol">GE</span> +1.0 ... -</div> -</pre> - -<p>To avoid this kind of error, try to define rules only once for a certain selector, and group all rules belonging to that selector.</p> - -<h3 id="Use_of_a_shorthand_property" name="Use_of_a_shorthand_property">使用便捷属性</h3> - -<p>Using shorthand properties for defining style rules is good because it uses a very compact syntax. Using shorthand with only some attributes is possible and correct, but it must be remembered that undeclared attributes are automatically reset to default. This means that a previous rule for a single attribute could be implicitly overridden.</p> - -<pre>#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; } -.stockSymbol { font: 14px Arial; color: red; } - -<div id="stockTicker"> - NYS: <span class="stockSymbol">GE</span> +1.0 ... -</div> -</pre> - -<p>In the previous example the problem occurred on rules belonging to different elements, but it could happen also for the same element, because rule order <strong>is</strong> important.</p> - -<pre>#stockTicker { - font-weight: bold; - font: 12px Verdana; /* font-weight is now normal */ -} -</pre> - -<h3 id="Use_of_the_.2A_selector" name="Use_of_the_.2A_selector">使用 <code>*</code> 选择器</h3> - -<p>The <code>*</code> wildcard selector refers to any element, and it has to be used with particular care.</p> - -<pre>body * { font-weight: normal; } -#stockTicker { font: 12px Verdana; } -.corpName { font-weight: bold; } -.stockUp { color: red; } - -<div id="section"> - NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ... -</div> -</pre> - -<p>In this example the <code>body *</code> selector applies the rule to all elements inside body, at any hierarchy level, including the .stockUp class. So <code>font-weight: bold;</code> applied to the .corpName class is overridden by <code>font-weight: normal;</code> applied to all elements in the body.</p> - -<p>The use of the * selector should be minimized as it is a slow selector, especially when not used as the first element of a selector. Its use should be avoided as much as possible.</p> - -<h3 id="Specificity_in_CSS" name="Specificity_in_CSS">CSS 中的优先级</h3> - -<p>When multiples rules apply to a certain element, the rule chosen depends on its style <a href="/en/CSS/Specificity" title="Specificity">specificity</a>. Inline style (in HTML <code>style</code> attributes) comes first, followed by ID selectors, then class selectors and eventually element-name selectors.</p> - -<pre>div { color: black; } -#orange { color: orange; } -.green { color: green; } - -<div id="orange" class="green" style="color: red;">This is red</div> -</pre> - -<p>The rules are more complicated when the selector has multiple parts. More detailed information about how selector specificity is calculated can be found in the <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html#specificity">CSS 2.1 Specification chapter 6.4.3</a></p> - -<h2 id="What_do_the_-moz-.2A_properties_do.3F" name="What_do_the_-moz-.2A_properties_do.3F"> -moz-*， -ms-*， -webkit-*， -o-* 以及 -khtml-* 属性有什么用？</h2> - -<h2 id="What_do_the_-moz-.2A_properties_do.3F" name="What_do_the_-moz-.2A_properties_do.3F"><span style="font-size: 14px; font-weight: normal; line-height: 1.5;">These properties, called </span><em>prefixed properties</em><span style="font-size: 14px; font-weight: normal; line-height: 1.5;">, are extension to the CSS standard. They are used to use experimental and non-standard features without polluting the regular namespace, preventing future incompatibilities to arise when the standard is extended.</span></h2> - -<p>The use of such properties on production websites is not recommended. If nevertheless needed, you are hinted to make a plan for the website evolution: these prefixed properties can be modified or even suppressed when the standard evolve.</p> - -<p>Please see the <a class="internal" href="/en/CSS/CSS_Reference/Mozilla_Extensions" title="en/CSS Reference/Mozilla Extensions">Mozilla CSS Extensions</a> page for more information on the Mozilla-prefixed CSS properties.</p> - -<h2 id="z-index_属性与定位有什么关系？">z-index 属性与定位有什么关系？</h2> - -<p>z-index属性指定了元素的栈序。</p> - -<p>有较高z-index/栈序的元素总是在有着较低z-index/栈序的元素之前。</p> - -<p>z-index只会在有着指定position (<code>position:absolute</code>, <code>position:relative</code>, or <code>position:fixed</code>)的元素上工作。</p> diff --git a/files/zh-cn/web/css/all_about_the_containing_block/index.html b/files/zh-cn/web/css/containing_block/index.html index bf35aa8c04..bf35aa8c04 100644 --- a/files/zh-cn/web/css/all_about_the_containing_block/index.html +++ b/files/zh-cn/web/css/containing_block/index.html diff --git a/files/zh-cn/web/css/css_background_and_borders/圆角边框发生器/index.html b/files/zh-cn/web/css/css_background_and_borders/border-radius_generator/index.html index b9f50d5332..b9f50d5332 100644 --- a/files/zh-cn/web/css/css_background_and_borders/圆角边框发生器/index.html +++ b/files/zh-cn/web/css/css_background_and_borders/border-radius_generator/index.html diff --git a/files/zh-cn/web/css/css_box_model/box-shadow_generator/index.html b/files/zh-cn/web/css/css_background_and_borders/box-shadow_generator/index.html index 3fb264bc40..3fb264bc40 100644 --- a/files/zh-cn/web/css/css_box_model/box-shadow_generator/index.html +++ b/files/zh-cn/web/css/css_background_and_borders/box-shadow_generator/index.html diff --git a/files/zh-cn/web/css/css_background_and_borders/index.html b/files/zh-cn/web/css/css_background_and_borders/index.html deleted file mode 100644 index 96d540eedd..0000000000 --- a/files/zh-cn/web/css/css_background_and_borders/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: CSS Background and Borders -slug: Web/CSS/CSS_Background_and_Borders -tags: - - CSS - - CSS Backgrounds and Borders - - CSS Reference - - NeedsTranslation - - Overview - - TopicStub -translation_of: Web/CSS/CSS_Backgrounds_and_Borders -translation_of_original: Web/CSS/CSS_Background_and_Borders ---- -<p>{{CSSRef}}</p> - -<p><strong>CSS 背景与边框</strong> 是 CSS中描述元素背景与边框的组件。边框的实现方式包含直线、图片。盒模型可以具有单个或多个背景、圆角以及阴影。</p> - -<h2 id="参考">参考</h2> - -<h3 id="CSS_属性">CSS 属性</h3> - -<div class="index"> -<ul> - <li>{{cssxref("background")}}</li> - <li>{{cssxref("background-attachment")}}</li> - <li>{{cssxref("background-clip")}}</li> - <li>{{cssxref("background-color")}}</li> - <li>{{cssxref("background-image")}}</li> - <li>{{cssxref("background-origin")}}</li> - <li>{{cssxref("background-position")}}</li> - <li>{{cssxref("background-repeat")}}</li> - <li>{{cssxref("background-size")}}</li> - <li>{{cssxref("box-shadow")}}</li> - <li>{{cssxref("border")}}</li> - <li>{{cssxref("border-bottom")}}</li> - <li>{{cssxref("border-bottom-color")}}</li> - <li>{{cssxref("border-bottom-left-radius")}}</li> - <li>{{cssxref("border-bottom-right-radius")}}</li> - <li>{{cssxref("border-bottom-style")}}</li> - <li>{{cssxref("border-bottom-width")}}</li> - <li>{{cssxref("border-collapse")}}</li> - <li>{{cssxref("border-color")}}</li> - <li>{{cssxref("border-image")}}</li> - <li>{{cssxref("border-image-outset")}}</li> - <li>{{cssxref("border-image-repeat")}}</li> - <li>{{cssxref("border-image-slice")}}</li> - <li>{{cssxref("border-image-source")}}</li> - <li>{{cssxref("border-image-width")}}</li> - <li>{{cssxref("border-left")}}</li> - <li>{{cssxref("border-left-color")}}</li> - <li>{{cssxref("border-left-style")}}</li> - <li>{{cssxref("border-left-width")}}</li> - <li>{{cssxref("border-radius")}}</li> - <li>{{cssxref("border-right")}}</li> - <li>{{cssxref("border-right-color")}}</li> - <li>{{cssxref("border-right-style")}}</li> - <li>{{cssxref("border-right-width")}}</li> - <li>{{cssxref("border-style")}}</li> - <li>{{cssxref("border-top")}}</li> - <li>{{cssxref("border-top-color")}}</li> - <li>{{cssxref("border-top-left-radius")}}</li> - <li>{{cssxref("border-top-right-radius")}}</li> - <li>{{cssxref("border-top-style")}}</li> - <li>{{cssxref("border-top-width")}}</li> - <li>{{cssxref("border-width")}}</li> -</ul> -</div> - -<h2 id="导航">导航</h2> - -<dl> - <dt><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">应用CSS多重背景</a></dt> - <dd>阐述设置元素背景方法以及背景、元素之间的交互方式</dd> - <dt><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images">缩放背景图片</a></dt> - <dd>阐述如何通过拉伸、重复使背景图片覆盖或不全部覆盖元素的背景区域，更改背景图片的呈现方式。</dd> -</dl> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Backgrounds') }}</td> - <td>{{ Spec2('CSS3 Backgrounds') }}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'box.html')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#border')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="浏览器支持">浏览器支持</h2> - -<p>{{CompatibilityTable()}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>4.0</td> - <td>3.5</td> - <td>1.0 (85)</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatGeckoMobile("1.9.2")}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>1.0</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/zh-cn/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html b/files/zh-cn/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html deleted file mode 100644 index 66cd1921d5..0000000000 --- a/files/zh-cn/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: 使用CSS的多背景 -slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds -tags: - - CSS - - CSS Background - - Example - - Guide - - Intermediate -translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds -translation_of_original: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds ---- -<p>{{CSSRef}}</p> - -<p><span class="seoSummary">通过使用 <a href="/en/CSS/CSS3" title="CSS3">CSS3</a>，你可以向元素应用<strong>多个背景</strong>。这些背景相互堆叠，第一个背景放在最上面，最后一个背景放在最下面。</span> 仅最后一个背景允许拥有背景色。</p> - -<p>指定多个背景很简单：</p> - -<pre class="brush: css">.myclass { - background: background1, background 2, ..., backgroundN; -} -</pre> - -<p>你既可以使用简写属性 {{ cssxref("background") }} 来设置多个背景，也可以使用除 {{ cssxref("background-color") }} 外的独立属性来设置多个背景。即下面的属性可以用属性列表来设置每一个背景： {{ cssxref("background") }}，{{ cssxref("background-attachment") }}，{{ cssxref("background-clip") }},<code> </code>{{ cssxref("background-image") }}，{{ cssxref("background-origin") }}，{{ cssxref("background-position") }}， {{ cssxref("background-repeat") }}， {{ cssxref("background-size") }}。</p> - -<h2 id="示例">示例</h2> - -<p>该例中，三个背景进行堆叠：火狐标志,一个<a href="/en/CSS/linear-gradient" title="en/CSS/-moz-linear-gradient">线性渐变</a>， 和一张带有花的图片：</p> - -<pre class="brush: css">.multi_bg_example { - background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png), - linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)), - url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg); - background-repeat: no-repeat, no-repeat, repeat; - background-position: bottom right, left, right; -} -</pre> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">结果</td> - </tr> - <tr> - <td style="padding: 0;"><img alt="css_multibg.png" class="default internal" src="/@api/deki/files/4028/=css_multibg.png" style="display: block;"></td> - </tr> - </tbody> -</table> - -<p>如你所见，火狐标志（列表第一项）在最上面，紧接着是放在图片上面的线性渐变。每个子属性 ({{ cssxref("background-repeat") }} 和 {{ cssxref("background-position") }}) 应用于对应的背景。因此属性 {{ cssxref("background-repeat") }} 的第一个值应用于第一个（最前面）的背景，依次可推。</p> - -<h2 id="其它">其它</h2> - -<ul> - <li><a href="/en-US/docs/CSS/Using_CSS_gradients" title="en/Using gradients">使用CSS渐变</a></li> -</ul> - -<div id="xunlei_com_thunder_helper_plugin_d462f475-c18e-46be-bd10-327458d045bd"> </div> - -<div id="xunlei_com_thunder_helper_plugin_d462f475-c18e-46be-bd10-327458d045bd"> </div> diff --git a/files/zh-cn/web/css/css_backgrounds_and_borders/scaling_background_images/index.html b/files/zh-cn/web/css/css_backgrounds_and_borders/resizing_background_images/index.html index 2873b2878c..2873b2878c 100644 --- a/files/zh-cn/web/css/css_backgrounds_and_borders/scaling_background_images/index.html +++ b/files/zh-cn/web/css/css_backgrounds_and_borders/resizing_background_images/index.html diff --git a/files/zh-cn/web/css/cursor/url/index.html b/files/zh-cn/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html index fcde4cecb2..fcde4cecb2 100644 --- a/files/zh-cn/web/css/cursor/url/index.html +++ b/files/zh-cn/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html diff --git a/files/zh-cn/web/css/css_colors/index.html b/files/zh-cn/web/css/css_colors/index.html deleted file mode 100644 index 60036fea2b..0000000000 --- a/files/zh-cn/web/css/css_colors/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: CSS Colors -slug: Web/CSS/CSS_Colors -tags: - - CSS - - CSS Colors - - NeedsTranslation - - Overview - - Reference - - TopicStub -translation_of: Web/CSS/CSS_Color -translation_of_original: Web/CSS/CSS_Colors ---- -<div>{{CSSRef}}</div> - -<p><strong>CSS Colors</strong> 是 CSS 的一个模块，用于处理颜色、颜色类型和透明度。</p> - -<h2 id="参考_(Reference)">参考 (Reference)</h2> - -<h3 id="属性">属性</h3> - -<div class="index"> -<ul> - <li>{{cssxref("color")}}</li> - <li>{{cssxref("opacity")}}</li> -</ul> -</div> - -<h3 id="CSS_数据类型">CSS 数据类型</h3> - -<p>{{cssxref("<color>")}}</p> - -<h2 id="指南_(Guides)">指南 (Guides)</h2> - -<p><em>None.</em></p> - -<h2 id="规范_(Specifications)">规范 (Specifications)</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Colors')}}</td> - <td>{{Spec2('CSS3 Colors')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'colors.html')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS1')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性_(Browser_compatibility)">浏览器兼容性 (Browser compatibility)</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1")}}</td> - <td>3.0</td> - <td>3.5</td> - <td>1.0</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>1.0</td> - <td>{{CompatGeckoMobile("1")}}</td> - <td>6.0</td> - <td>6.0</td> - <td>1.0</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="另请阅读">另请阅读</h2> - -<ul> - <li>在 CSS 中， gradient 渐变色并非颜色，其实质是 <a href="/en-US/docs/Web/CSS/CSS_Images">images</a>。</li> -</ul> diff --git a/files/zh-cn/web/css/css_columns/using_multi-column_layouts/index.html b/files/zh-cn/web/css/css_columns/using_multi-column_layouts/index.html new file mode 100644 index 0000000000..593e14fd47 --- /dev/null +++ b/files/zh-cn/web/css/css_columns/using_multi-column_layouts/index.html @@ -0,0 +1,130 @@ +--- +title: 使用CSS的多列布局 +slug: Web/Guide/CSS/Using_multi-column_layouts +translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts +--- +<p>{{CSSRef("CSS Multi-columns")}}</p> + +<p><strong>CSS多列布局 </strong>扩展<em>块布局模式</em>，以便更容易地定义多列文本。如果一行太长，人们阅读文本很麻烦; 如果眼睛从一行的终点移动到下一个行的开始需要太长时间，它们就会丢失它们所在的行。因此，为了最大限度地利用大屏幕，作者应该将宽度不等的文本列并排放置，就像报纸一样。</p> + +<p>糟糕的是如果不使用CSS和HTML在特定的位置强制换行，或者严格限制文本中允许的标记，或者夸张地使用脚本的话，这是不可能实现的。该限制通过从传统的块级布局模块中延伸出来的新的CSS属性得以解决。</p> + +<h2 id="使用多列布局">使用多列布局</h2> + +<h3 id="列计数器和宽度">列计数器和宽度</h3> + +<p>有两个CSS属性控制是否实现多列布局和显示多少列： {{ Cssxref("column-count") }} and {{ Cssxref("column-width") }}。</p> + +<p>属性 <code>column-count</code> 设置特定数量的列数。例如，</p> + +<pre class="brush: html"><div style="column-count:2;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, +sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, +quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat +nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa +qui officia deserunt mollit anim id est laborum</div> +</pre> + +<p>会以两列的方式显示内容：(如果你正使用支持多列布局的浏览器的话):</p> + +<p style="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> + +<p>属性 <code>column-width</code> 设置期望的最小列宽。如果 <code>column-count</code> 没有设置，那么浏览器就会以合适的宽度尽量显示更多的列。</p> + +<pre class="brush: html"><div style="column-width:20em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, +sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, +quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat +nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa +qui officia deserunt mollit anim id est laborum</div> +</pre> + +<p>变成：</p> + +<p style="-moz-column-width: 20em; -webkit-column-width: 20em; column-width: 20em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> + +<p>详细细节在 <a class="external" href="http://www.w3.org/TR/css3-multicol/">CSS3规范</a> 中。</p> + +<p>在多列块中，内容会自动从一列换到另一列中。所有 HTML， CSS 和 DOM 功能在列之间都得到支持, 比如编辑和打印。</p> + +<h3 id="columns_属性简写"><code>columns</code> 属性简写</h3> + +<p>多数时候，网页设计者都会使用 {{ cssxref("column-count") }} 和 {{ cssxref("column-width") }} 的一个. 由于它们的值没有重叠，一般使用简写属性 {{ cssxref("columns") }}。例如，</p> + +<p>CSS声明 <code>column-width:12em</code> 可替换成：</p> + +<pre class="brush: html"><div style="columns:12em">Lorem ipsum dolor sit amet, consectetur adipisicing elit, +sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, +quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat +nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa +qui officia deserunt mollit anim id est laborum</div> +</pre> + +<p style="-moz-column-width: 12em; -moz-columns: 12em; -webkit-columns: 12em; columns: 12em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> + +<p>CSS声明 <code>column-count:4</code> 可替换成：</p> + +<pre class="brush: html"><div style="columns:4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, +sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, +quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat +nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa +qui officia deserunt mollit anim id est laborum</div> +</pre> + +<p style="-moz-columns: 4; -webkit-columns: 4; columns: 4;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> + +<p>CSS声明 <code>column-width:8em</code> 和 <code>column-count:12</code> 可替换成：</p> + +<pre class="brush: html"><div style="columns:12 8em">Lorem ipsum dolor sit amet, consectetur adipisicing elit, +sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, +quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat +nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa +qui officia deserunt mollit anim id est laborum</div> +</pre> + +<p style="-moz-columns: 12 8em; -webkit-columns: 12 8em; columns: 12 8em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> + +<h3 id="高度平衡">高度平衡</h3> + +<p>CSS3多列规范需要列高平衡：即，浏览器自动设置最大列高，因此每列中的内容高度大致相同。Firefox浏览器是这样的。</p> + +<p>然而，一些情况下，明确设置最大列高也是有用的，这样内容从第一列开始，尽可能多的生成列，甚至会溢出右边沿。因此，如果通过设置{{ cssxref("height") }} 或 {{ cssxref("max-height") }} 属性来限制列高，在生成新的一列之前每一列都会仅允许增加到这个高度。该模型对布局来说也更高效。</p> + +<h3 id="列间隙">列间隙</h3> + +<p>列之间有缝隙。建议值为1em。该值可通过设置多列模块的 {{ Cssxref("column-gap") }} 属性来修改：</p> + +<pre class="brush: html"><div style="column-width:20em; column-gap:2em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, +sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, +quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat +nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa +qui officia deserunt mollit anim id est laborum</div> +</pre> + +<p style="-moz-column-width: 20em; -webkit-column-width: 20em; column-width: 20em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> + +<h2 id="优雅降级">优雅降级</h2> + +<p>多列属性会被不支持多列模型的浏览器忽略。因此，为这些浏览器创建单列结构而为支持多列的浏览器创建多列结构相对来说比较简单。</p> + +<p>注意不是所有的浏览器都支持不带前缀的属性名。为了在大多数现代浏览器中应用这种特性，每个属性必须写三次： 一次用 {{ property_prefix("-moz") }} 前缀，一次用 {{ property_prefix("-webkit") }} 前缀，一次不使用前缀</p> + +<h2 id="讨论">讨论</h2> + +<p>CSS3 多列特性能帮助网页设计者最优化使用屏幕资源。如果你是一位具有丰富想象力的开发者，你会发现多列特性更多的好处，特别是在高度平衡特性方面。</p> + +<h2 id="其它">其它</h2> + +<ul> + <li><a class="external" href="http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html" rel="freelink">http://weblogs.mozillazine.org/roc/a...18_for_we.html</a></li> +</ul> + +<div id="xunlei_com_thunder_helper_plugin_d462f475-c18e-46be-bd10-327458d045bd"> </div> + +<div id="xunlei_com_thunder_helper_plugin_d462f475-c18e-46be-bd10-327458d045bd"> </div> + +<div id="xunlei_com_thunder_helper_plugin_d462f475-c18e-46be-bd10-327458d045bd"> </div> diff --git a/files/zh-cn/web/css/css_flexible_box_layout/flexbox_的_向下_支持/index.html b/files/zh-cn/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html index df269a9211..df269a9211 100644 --- a/files/zh-cn/web/css/css_flexible_box_layout/flexbox_的_向下_支持/index.html +++ b/files/zh-cn/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html diff --git a/files/zh-cn/web/css/css_flexible_box_layout/mixins/index.html b/files/zh-cn/web/css/css_flexible_box_layout/mixins/index.html deleted file mode 100644 index d2054bc725..0000000000 --- a/files/zh-cn/web/css/css_flexible_box_layout/mixins/index.html +++ /dev/null @@ -1,408 +0,0 @@ ---- -title: 使用弹性盒子进行高级布局 -slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins -tags: - - CSS3布局模型 - - Flexible_Box - - Flexible_Box_Layout - - Layout - - 弹性盒子 - - 弹性盒子模型 -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mixins ---- -<p>使用弹性盒子的意义是在任何尺寸的屏幕上改变其和其子元素的尺寸填充屏幕可用空间。一个弹性框容器将延展它的子元素以填充可用空间，并且缩小它的子元素来避免溢出。</p> - -<h3 id="浮动布局的问题">浮动布局的问题</h3> - -<ul> - <li><strong>难以控制。</strong>如果站点上存在一些不可预知的内容，那么布局将变的难以维护。</li> - <li><strong>源码顺序依赖</strong>。弹性布局依赖于HTML源码，在做响应式设计时将难以为不同的媒体查询变更布局。</li> - <li><strong>列等高问题</strong>。如果容器中有两到三列不同的内容，并且在任意内容的条件下，都需要设置为相同的高度。浮动布局难以实现这个要求。</li> - <li><strong>内容居中</strong>。使用浮动布局难以将内容水平且垂直居中。</li> -</ul> - -<h3 id="弹性盒子如何处理">弹性盒子如何处理</h3> - -<ul> - <li>通过将弹性元素拉伸或缩小来充满可用空间和避免溢出。这种方式解决了新内容的溢出问题并且以开发者期望的情况实施布局。</li> - <li>给予弹性元素成比例的尺寸。</li> - <li>弹性容器内的弹性元素可以从任意方向布局。可以解决在不同媒体查询中元素的顺序问题。使得可见内容的顺序独立于HTML渲染顺序，有利于站点的响应式设计。</li> -</ul> - -<h3 id="弹性盒子属性">弹性盒子属性</h3> - -<p><img alt="placeholder" src="http://saki007ster.github.io/public/images/flex-container.png" title="Flexbox properties"></p> - -<ul> - <li><strong>主轴(main axis)，主轴区域(main dimension)</strong>。弹性容器的主轴指的是弹性元素主要沿着哪个方向布局。它在主轴区域中延伸。</li> - <li><strong>主轴起点(main-Start)，主轴终点(main-end)</strong>。弹性元素被放置于容器中从主轴起点到主轴终点放置。</li> - <li><strong>主轴尺寸(main size)，主轴尺寸属性(main size property)</strong>。一个弹性元素的主轴尺寸指的是其在主轴区域内的长度。其主轴尺寸属性指的是其对应的属性。</li> - <li><strong>侧轴(cross axis)，侧轴区域(cross dimension)</strong>。侧轴垂直于主轴。它在侧轴区域中延伸。</li> - <li><strong>侧轴起点(cross-Start)，侧轴终点(cross-end)</strong>。浮动行被元素填充，并且在容器中沿侧轴方向从起点向终点分布。</li> - <li><strong>侧轴尺寸(cross size)，侧轴尺寸属性(cross size property)</strong>。一个弹性元素的侧轴尺寸指的是其在侧轴区域内的长度。其侧轴尺寸属性指的是其对应的属性</li> -</ul> - -<h4 id="弹性容器属性">弹性容器属性</h4> - -<ul> - <li><a href="http://www.w3.org/TR/css3-flexbox/#propdef-flex-direction">flex-direction</a></li> - <li><a href="http://www.w3.org/TR/css3-flexbox/#propdef-flex-wrap">flex-wrap</a></li> - <li><a href="http://www.w3.org/TR/css3-flexbox/#propdef-flex-flow">flex-flow</a></li> - <li><a href="https://css-tricks.com/almanac/properties/j/justify-content/">justify-content</a></li> - <li><a href="http://www.w3.org/TR/css3-flexbox/#align-items-property">align-items</a></li> - <li><a href="http://www.w3.org/TR/css3-flexbox/#align-content-property">align-content</a></li> -</ul> - -<h4 id="弹性元素属性">弹性元素属性</h4> - -<ul> - <li><a href="http://www.w3.org/TR/css3-flexbox/#propdef-order">order</a></li> - <li><a href="http://www.w3.org/TR/css3-flexbox/#align-items-property">align-self</a></li> - <li><a href="http://www.w3.org/TR/css3-flexbox/#propdef-flex-grow">flex-grow</a></li> - <li><a href="http://www.w3.org/TR/css3-flexbox/#propdef-flex-shrink">flex-shrink</a></li> - <li><a href="http://www.w3.org/TR/css3-flexbox/#propdef-flex-basis">flex-basis</a></li> -</ul> - -<h2 id="弹性盒子混合">弹性盒子混合</h2> - -<p>对于希望在现代浏览器原生支持下使用弹性盒子的用户，这里有全部的支撑表格：<a href="http://caniuse.com/flexbox" style="line-height: 1.5;">http://caniuse.com/flexbox</a></p> - -<p>将会使用：</p> - -<ul> - <li>后备、陈旧的语法（IE10，移动端WebKit内核浏览器－无包裹)</li> - <li>最终标准的语法（FF、Safari、Chrome、IE11、Opera）</li> -</ul> - -<p>启发于：</p> - -<ul> - <li><a href="http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/">http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/</a></li> -</ul> - -<p>可以从这些地方获取帮助：</p> - -<ul> - <li><a href="http://w3.org/tr/css3-flexbox/">http://w3.org/tr/css3-flexbox/</a></li> - <li><a href="http://the-echoplex.net/flexyboxes/">http://the-echoplex.net/flexyboxes/</a></li> - <li><a href="http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx">http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx</a></li> - <li><a href="http://css-tricks.com/using-flexbox/">http://css-tricks.com/using-flexbox/</a></li> - <li><a href="http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/">http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/</a></li> - <li><a href="https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes">https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes</a></li> -</ul> - -<h3 id="弹性容器">弹性容器</h3> - -<p>“flex”值会引起一个元素生成一个盒级的弹性盒子。</p> - -<p>“inline-flex”会生成一个行内弹性盒子。</p> - -<p>display: flex | inline-flex <a href="http://w3.org/tr/css3-flexbox/#flex-containers">http://w3.org/tr/css3-flexbox/#flex-containers</a></p> - -<div> -<pre>@mixin flexbox { - display: -webkit-box; - display: -webkit-flex; - display: -moz-flex; - display: -ms-flexbox; - display: flex; -} - -// 使用这样的混合模式 -%flexbox { @include flexbox; }</pre> -</div> - -<div> -<pre>@mixin inline-flex { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -moz-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; -} - -%inline-flex { @include inline-flex; }</pre> -</div> - -<h3 id="弹性盒子方向">弹性盒子方向</h3> - -<p>“flex-direction”属性通过设置容器主轴来定义弹性元素如何在容器内排列。这个属性确定了弹性元素排列的方向。</p> - -<p>值：row | row-reverse | column | column-reverse</p> - -<p><a href="http://w3.org/tr/css3-flexbox/#flex-direction-property">http://w3.org/tr/css3-flexbox/#flex-direction-property</a></p> - -<div> -<pre>@mixin flex-direction($value: row) { - @if $value == row-reverse { - -webkit-box-direction: reverse; - -webkit-box-orient: horizontal; - } @else if $value == column { - -webkit-box-direction: normal; - -webkit-box-orient: vertical; - } @else if $value == column-reverse { - -webkit-box-direction: reverse; - -webkit-box-orient: vertical; - } @else { - -webkit-box-direction: normal; - -webkit-box-orient: horizontal; - } - -webkit-flex-direction: $value; - -moz-flex-direction: $value; - -ms-flex-direction: $value; - flex-direction: $value; -} - -// 简短版本： -@mixin flex-dir($args...) { @include flex-direction($args...); }</pre> -</div> - -<h3 id="弹性盒子换行">弹性盒子换行</h3> - -<p>“flex-wrap”属性控制了容器为单行还是多行。并且定义了侧轴的方向，新行将沿侧轴方向堆砌。</p> - -<p>值：nowrap | wrap | wrap-reverse</p> - -<p>默认：nowrap</p> - -<p><a href="http://w3.org/tr/css3-flexbox/#flex-wrap-property">http://w3.org/tr/css3-flexbox/#flex-wrap-property</a></p> - -<div> -<pre>@mixin flex-wrap($value: nowrap) { - // No Webkit Box fallback. - -webkit-flex-wrap: $value; - -moz-flex-wrap: $value; - @if $value == nowrap { - -ms-flex-wrap: none; - } @else { - -ms-flex-wrap: $value; - } - flex-wrap: $value; -}</pre> -</div> - -<h3 id="弹性盒子流（简写）">弹性盒子流（简写）</h3> - -<p>“flex-flow”属性是设置“flex-direction”和“flex-wrap”的简写，可以同时定义主轴和侧轴。</p> - -<p>默认值：row nowrap</p> - -<p><a href="http://w3.org/tr/css3-flexbox/#flex-flow-property">http://w3.org/tr/css3-flexbox/#flex-flow-property</a></p> - -<div> -<pre>@mixin flex-flow($values: (row nowrap)) { - // No Webkit Box fallback. - -webkit-flex-flow: $values; - -moz-flex-flow: $values; - -ms-flex-flow: $values; - flex-flow: $values; -}</pre> -</div> - -<h3 id="弹性盒子顺序">弹性盒子顺序</h3> - -<p>“order”属性通过将这些元素分配到序数分组来控制它们出现的顺序。</p> - -<p>默认值：0</p> - -<p><a href="http://w3.org/tr/css3-flexbox/#order-property">http://w3.org/tr/css3-flexbox/#order-property</a></p> - -<div> -<pre>@mixin order($int: 0) { - -webkit-box-ordinal-group: $int + 1; - -webkit-order: $int; - -moz-order: $int; - -ms-flex-order: $int; - order: $int; -}</pre> -</div> - -<h3 id="弹性盒子增长">弹性盒子增长</h3> - -<p>“flex-grow”属性设置增长因数，不接受负值。</p> - -<p>默认值：0</p> - -<p><a href="http://w3.org/tr/css3-flexbox/#flex-grow-property">http://w3.org/tr/css3-flexbox/#flex-grow-property</a></p> - -<div> -<pre>@mixin flex-grow($int: 0) { - -webkit-box-flex: $int; - -webkit-flex-grow: $int; - -moz-flex-grow: $int; - -ms-flex-positive: $int; - flex-grow: $int; -}</pre> -</div> - -<h3 id="弹性盒子收缩">弹性盒子收缩</h3> - -<p>“flex-shrink”属性设置了收缩因数，不接受负值。</p> - -<p>默认值：1</p> - -<p><a href="http://w3.org/tr/css3-flexbox/#flex-shrink-property">http://w3.org/tr/css3-flexbox/#flex-shrink-property</a></p> - -<div> -<pre>@mixin flex-shrink($int: 1) { - -webkit-flex-shrink: $int; - -moz-flex-shrink: $int; - -ms-flex-negative: $int; - flex-shrink: $int; -}</pre> -</div> - -<h3 id="弹性盒子伸缩">弹性盒子伸缩</h3> - -<p id="“flex-basis”属性设置了弹性框伸缩的基准值，不接受负值。"><span style="font-size: 14px; line-height: 1.5;">“flex-basis”属性设置了弹性框伸缩的基准值，不接受负值。</span></p> - -<p>值：类似“width”，默认值：<code>auto</code></p> - -<p><a href="http://www.w3.org/TR/css3-flexbox/#flex-basis-property">http://www.w3.org/TR/css3-flexbox/#flex-basis-property</a></p> - -<div> -<pre>@mixin flex-basis($value: auto) { - -webkit-flex-basis: $value; - -moz-flex-basis: $value; - -ms-flex-preferred-size: $value; - flex-basis: $value; -}</pre> -</div> - -<h3 id="弹性盒子“Flex”属性（简写）">弹性盒子“Flex”属性（简写）</h3> - -<p>“<code>flex</code>”属性设置了弹性盒子长度的组成，包括增长因数、收缩因数和伸缩基准值。对于一个弹性元素，“<code>flex</code>”属性会被用来设置元素的尺寸，对于一个非弹性元素，该属性无效。</p> - -<p>值：<code>none</code> | ||</p> - -<p>默认值：见独立属性（1 1 0）</p> - -<p><a href="http://w3.org/tr/css3-flexbox/#flex-property">http://w3.org/tr/css3-flexbox/#flex-property</a></p> - -<div> -<pre>@mixin flex($fg: 1, $fs: null, $fb: null) { - - // Set a variable to be used by box-flex properties - $fg-boxflex: $fg; - - // Box-Flex only supports a flex-grow value so lets grab the - // first item in the list and just return that. - @if type-of($fg) == 'list' { - $fg-boxflex: nth($fg, 1); - } - - -webkit-box-flex: $fg-boxflex; - -webkit-flex: $fg $fs $fb; - -moz-box-flex: $fg-boxflex; - -moz-flex: $fg $fs $fb; - -ms-flex: $fg $fs $fb; - flex: $fg $fs $fb; -}</pre> -</div> - -<h3 id="弹性盒子对齐方式">弹性盒子对齐方式</h3> - -<p>“justify-content”属性将弹性元素沿容器主轴方向对齐。当所有弹性元素的长度和边距都设置好之后，布局完成。一般情况下，当行内所有弹性元素尺寸不可变或可变且达到最大尺寸的情况下，该属性会分配剩余可用空间。同时，当元素溢出行的时候，它也会对其排列做出控制。</p> - -<p>提示：以前版本的语法不支持“space-*”值。</p> - -<p>值：flex-start | flex-end | center | space-between | space-around 默认值：flex-start</p> - -<p><a href="http://w3.org/tr/css3-flexbox/#justify-content-property">http://w3.org/tr/css3-flexbox/#justify-content-property</a></p> - -<div> -<pre>@mixin justify-content($value: flex-start) { - @if $value == flex-start { - -webkit-box-pack: start; - -ms-flex-pack: start; - } @else if $value == flex-end { - -webkit-box-pack: end; - -ms-flex-pack: end; - } @else if $value == space-between { - -webkit-box-pack: justify; - -ms-flex-pack: justify; - } @else if $value == space-around { - -ms-flex-pack: distribute; - } @else { - -webkit-box-pack: $value; - -ms-flex-pack: $value; - } - -webkit-justify-content: $value; - -moz-justify-content: $value; - justify-content: $value; -} - // Shorter version: - @mixin flex-just($args...) { @include justify-content($args...); }</pre> -</div> - -<h3 id="弹性元素对齐">弹性元素对齐</h3> - -<p>可以设置弹性元素在容器侧轴上的对齐方式，与“justify-content”功能相似但是方向垂直。“align-items”设置弹性盒子的所有子元素的对齐方式，包括匿名弹性元素。元素可以通过单独设置“align-self”来覆盖该属性。（对于匿名弹性元素，“align-self'”属性总是与“align-items”相同。）</p> - -<p>值：flex-start | flex-end | center | baseline | stretch 默认值：stretch</p> - -<p><a href="http://w3.org/tr/css3-flexbox/#align-items-property">http://w3.org/tr/css3-flexbox/#align-items-property</a></p> - -<div> -<pre>@mixin align-items($value: stretch) { - @if $value == flex-start { - -webkit-box-align: start; - -ms-flex-align: start; - } @else if $value == flex-end { - -webkit-box-align: end; - -ms-flex-align: end; - } @else { - -webkit-box-align: $value; - -ms-flex-align: $value; - } - -webkit-align-items: $value; - -moz-align-items: $value; - align-items: $value; -}</pre> -</div> - -<h3 id="弹性元素自对齐">弹性元素自对齐</h3> - -<p>用来单独设置弹性元素在侧轴的对齐方式，功能与“align-items”相同。可以覆盖“align-items”属性。</p> - -<p>值：auto | flex-start | flex-end | center | baseline | stretch 默认值：auto</p> - -<div> -<pre>@mixin align-self($value: auto) { - // No Webkit Box Fallback. - -webkit-align-self: $value; - -moz-align-self: $value; - @if $value == flex-start { - -ms-flex-item-align: start; - } @else if $value == flex-end { - -ms-flex-item-align: end; - } @else { - -ms-flex-item-align: $value; - } - align-self: $value; -}</pre> -</div> - -<h3 id="弹性元素内容对齐">弹性元素内容对齐</h3> - -<p>“align-content”属性设置了容器内每行沿侧轴的对齐方式。与“justify-content”属性在主轴方向对齐单独元素的方式相似。如果容器内只有一行，该属性无效。</p> - -<p>值：flex-start | flex-end | center | space-between | space-around | stretch 默认值：stretch</p> - -<p><a href="http://w3.org/tr/css3-flexbox/#align-content-property">http://w3.org/tr/css3-flexbox/#align-content-property</a></p> - -<div> -<pre>@mixin align-content($value: stretch) { - // No Webkit Box Fallback. - -webkit-align-content: $value; - -moz-align-content: $value; - @if $value == flex-start { - -ms-flex-line-pack: start; - } @else if $value == flex-end { - -ms-flex-line-pack: end; - } @else { - -ms-flex-line-pack: $value; - } - align-content: $value; -}</pre> -</div> diff --git a/files/zh-cn/web/css/css_flexible_box_layout/弹性盒子与其他布局方法的联系/index.html b/files/zh-cn/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html index c90b3416a5..c90b3416a5 100644 --- a/files/zh-cn/web/css/css_flexible_box_layout/弹性盒子与其他布局方法的联系/index.html +++ b/files/zh-cn/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html diff --git a/files/zh-cn/web/css/css_flexible_box_layout/典型_用例_的_flexbox/index.html b/files/zh-cn/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html index 1b4c283f36..1b4c283f36 100644 --- a/files/zh-cn/web/css/css_flexible_box_layout/典型_用例_的_flexbox/index.html +++ b/files/zh-cn/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html diff --git a/files/zh-cn/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html b/files/zh-cn/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html deleted file mode 100644 index d50cf7582f..0000000000 --- a/files/zh-cn/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html +++ /dev/null @@ -1,408 +0,0 @@ ---- -title: 使用 CSS 弹性盒子 -slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes -tags: - - CSS - - CSS Flexible Boxes - - Flex - - Web - - flexbox - - 弹性 - - 弹性容器 - - 弹性盒子 - - 弹性项目 - - 指南 - - 盒子模型 - - 范例 - - 进阶 -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox -translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes ---- -<div>{{CSSRef}}</div> - -<p><span>CSS3 <strong>弹性盒子</strong>(<strong>Flexible Box</strong> 或 <strong>Flexbox</strong>)，是一种</span>用于在页面上布置元素的<span><a href="/zh-CN/docs/Web/CSS/Layout_mode">布局模式</a>，</span>使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。对于许多应用程序，<span>弹性</span>盒子模型提供了对块模型的改进，因为它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。</p> - -<p>许多设计师会发现弹性盒子模型更易于使用。弹性盒子中的子元素可以在各个方向上进行布局，并且能以弹性尺寸来适应显示空间。由于元素的显示顺序可以与它们在源代码中的顺序无关，定位子元素将变得更容易，并且能够用更简单清晰的代码来完成复杂的布局。这种无关性是仅限制于视觉呈现上的，语言顺序以及基于源代码顺序的导航均不受影响。</p> - -<div class="note"><strong>注意：</strong> 虽然 <a href="http://www.w3.org/TR/css3-flexbox/">CSS 弹性盒子布局规范</a> 还处于最终征求意见稿 (Last Call Working Draft)阶段（参见<a href="http://dev.w3.org/csswg/css-flexbox/">最新编辑草案</a>），并非所有浏览器都实现了弹性盒子的所有功能。但，这么说吧，现在全线产品对弹性盒子都有良好支持。最新的兼容性状况可以查看每个具体属性的<a href="/zh-CN/docs/Web/Guide/CSS/Flexible_boxes#Browser_compatibility">兼容性表格</a>获取。</div> - -<h2 id="弹性盒布局概念">弹性盒布局概念</h2> - -<p>在定义方面来说，弹性布局是指通过调整其内元素的宽高，从而在任何显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内元素来填充可用空间，或将其收缩来避免溢出。</p> - -<p>块级布局更侧重于垂直方向、行内布局更侧重于水平方向，与此相对的，弹性盒子布局算法是方向无关的。虽然块级布局对于单独一个页面来说是行之有效的，但其仍缺乏足够的定义来支持那些必须随用户代理(user agent)不同或设备方向从水平转为垂直等各种变化而变换方向、调整大小、拉伸、收缩的应用程序组件。 弹性盒子布局主要适用于应用程序的组件及小规模的布局，而（新兴的）栅格布局则针对大规模的布局。这二者都是 CSS 工作组为在不同用户代理、不同书写模式和其他灵活性要求下的网页应用程序有更好的互操作性而做出的更广泛的努力的一部分。</p> - -<h2 id="弹性盒布局相关词汇">弹性盒布局相关词汇</h2> - -<p>关于弹性盒子的讨论已经从诸如水平/行内轴和垂直/块级轴这些术语中解放出来，与此同时，需要有一套新的术语来正确描述此模型。在学习下面的词汇项目时请对照下图。图中是一个 <code>flex-direction</code> 属性为 <code>row</code>的弹性容器，意味着其内的弹性项目将根据既定书写模式沿主轴水平排列，其方向为元素的文本流方向，在这个例子里，为从左到右。</p> - -<p><img alt="弹性布局相关名词" src="https://mdn.mozillademos.org/files/12998/flexbox.png" style="height: 333px; width: 563px;"></p> - -<dl> - <dt>弹性容器(Flex container)</dt> - <dd>包含着弹性项目的父元素。通过设置 {{Cssxref("display")}} 属性的值为 <code>flex</code> 或 <code>inline-flex</code> 来定义弹性容器。</dd> - <dt>弹性项目(Flex item)</dt> - <dd> - <p>弹性容器的每个子元素都称为弹性项目。弹性容器直接包含的文本将被包覆成匿名弹性单元。</p> - </dd> - <dt>轴(Axis)</dt> - <dd> - <p>每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为<strong>主轴(main axis)</strong>。垂直于<strong>主轴</strong>的那根轴称为<strong>侧轴(cross axis)</strong>。</p> - - <ul> - <li><code><a href="/zh-CN/docs/Web/CSS/flex-direction">flex-direction</a></code> 确立主轴。</li> - <li><a href="/zh-CN/docs/Web/CSS/justify-content"><code>justify-content</code></a> 定义了在当前行上，弹性项目沿主轴如何排布。</li> - <li><a href="/zh-CN/docs/Web/CSS/align-items"><code>align-items</code></a> 定义了在当前行上，弹性项目沿侧轴默认如何排布。</li> - <li><a href="/zh-CN/docs/Web/CSS/align-self"><code>align-self</code></a> 定义了单个弹性项目在侧轴上应当如何对齐，这个定义会覆盖由 <code>align-items</code> 所确立的默认值。</li> - </ul> - </dd> - <dt>方向(Direction)</dt> - <dd> - <p>弹性容器的<strong>主轴起点(main start)</strong>/<strong>主轴终点(main end)</strong>和<strong>侧轴起点(cross start)</strong>/<strong>侧轴终点(cross end)</strong>描述了弹性项目排布的起点与终点。它们具体取决于弹性容器的主轴与侧轴中，由 <code>writing-mode</code> 确立的方向（从左到右、从右到左，等等）。</p> - - <ul> - <li><a href="/zh-CN/docs/Web/CSS/order"><code>order</code></a> 属性将元素与序号关联起来，以此决定哪些元素先出现。</li> - <li><a href="/zh-CN/docs/Web/CSS/flex-flow"><code>flex-flow</code></a> 属性是 <a href="/zh-CN/docs/Web/CSS/flex-direction"><code>flex-direction</code></a> 和 <a href="/zh-CN/docs/Web/CSS/flex-wrap"><code>flex-wrap</code></a> 属性的简写，决定弹性项目如何排布。</li> - </ul> - </dd> - <dt>行(Line)</dt> - <dd> - <p>根据 <a href="/zh-CN/docs/Web/CSS/flex-wrap"><code>flex-wrap</code></a> 属性，弹性项目可以排布在单个行或者多个行中。此属性控制侧轴的方向和新行排列的方向。</p> - </dd> - <dt>尺寸(Dimension)</dt> - <dd> - <p>根据弹性容器的主轴与侧轴，弹性项目的宽和高中，对应主轴的称为<strong>主轴尺寸(main size)</strong> ，对应侧轴的称为 <strong>侧轴尺寸(cross size)</strong>。</p> - - <ul> - <li><code><a href="/zh-CN/docs/Web/CSS/min-height">min-height</a></code> 与 <code><a href="/zh-CN/docs/Web/CSS/min-width">min-width</a></code> 属性初始值将为 0。</li> - <li><a href="/zh-CN/docs/Web/CSS/flex"><code>flex</code></a> 属性是 <a href="/zh-CN/docs/Web/CSS/flex-grow"><code>flex-grow</code></a>、<a href="/zh-CN/docs/Web/CSS/flex-shrink"><code>flex-shrink</code></a> 和 <a href="/zh-CN/docs/Web/CSS/flex-basis"><code>flex-basis</code></a> 属性的简写，描述弹性项目的整体的伸缩性。</li> - </ul> - </dd> -</dl> - -<h2 id="定义一个弹性盒子">定义一个弹性盒子</h2> - -<p>为要使用此样式的元素指派 CSS，需按以下方式设置 <a href="/zh-CN/docs/Web/CSS/display">display</a> 属性：</p> - -<pre class="brush: css">display : flex</pre> - -<p>或者</p> - -<pre class="brush: css">display : inline-flex</pre> - -<p>这样做将元素定义为弹性容器，其子元素则成为弹性项目。值 <code>flex</code> 使弹性容器成为块级元素。值 <code>inline-flex</code> 使弹性容器成为单个不可分的行内级元素。</p> - -<div class="note"><strong>注意：</strong>厂商前缀标记会附加给 display 属性值，而不是加给 display 属性本身。例如：<code>display : -webkit-flex</code>。</div> - -<h2 id="弹性项目须知">弹性项目须知</h2> - -<p>弹性容器直接包含的文本将自动包覆成匿名弹性项目。不过，一个只包含一系列空白符（如一堆空格或制表符等）的匿名弹性项目不会被渲染，就如同对其指派 <code>display: none</code>。</p> - -<p>对于弹性容器的绝对定位子元素来说，其静态位置参照弹性容器的内容框的主起始角确定，而后依此完成此元素的定位。</p> - -<p>相邻的弹性元素其外边距不会互相合并。使用 <code>auto</code> 外边距可以吸收掉水平或垂直方向上的额外空间，这可以用于对齐或分隔相邻的弹性项目。更多细节请参考 W3C 弹性框布局模型规范中的 <a href="http://dev.w3.org/csswg/css3-flexbox/#auto-margins">Aligning with 'auto' margins</a>。</p> - -<p>不像 CSS 中的其他对齐方法，弹性框的对齐属性将进行“真正的”居中对齐。这意味着即使弹性条目溢出了弹性容器，它依然保持居中。不过这在某些时候可能会有问题。如果溢出超过了页面的上边缘或左边缘（在从左到右的语言中，比如英语；在诸如阿拉伯语这样从右到左的语言中这个问题更会出现在右边缘），则虽然那些地方确实有内容，却无法滚动到那些位置。在未来的发布版本里，对齐属性将会有所扩展，使其包含有“安全”选项。目前，如果操心这点，可以改用外边距来达成居中效果，因为外边距会用比较“安全”的方式来响应变化，出现溢出时将停止居中。对这种需要居中的弹性项目，不使用 <code>align-</code> 属性，而使用自动外边距就能解决这个问题。对弹性容器中第一个和最后一个弹性项目的外侧边缘应用，也可以使用自动外边距来替代 <code>justify-</code> 属性。自动外边距会自动伸缩来占满剩余空间，当有剩余空间存在时弹性项目将会居中，如果没有则切换至常规对齐方式。不过很不幸，如果尝试在多行的弹性框中用基于外边距的居中方法来替代 <code>justify-content</code>，就必须对每一行的第一个和最后一个弹性项目应用外边距。此时除非能够事先预测每一行都结束于哪个元素，否则就不能愉快的在主轴方向上用基于外边距的居中方法来替代 <code>justify-content</code> 属性了。</p> - -<p>再强调一遍，元素的显示顺序与它们在源代码中的顺序无关，这种无关性只影响视觉呈现，语音顺序以及基于源代码顺序的导航均不受影响。{{cssxref("order")}} 属性并不影响语音和导航的次序。因此开发者们必须小心，合理地安排元素在源代码中的顺序，以免破坏文档的可访问性。</p> - -<h2 id="弹性盒子相关属性">弹性盒子相关属性</h2> - -<h3 id="不影响弹性盒子的属性">不影响弹性盒子的属性</h3> - -<p>由于弹性盒子使用了不同的布局算法，某些属性用在弹性容器上没有意义：</p> - -<ul> - <li><a href="/zh-CN/docs/Web/CSS/Using_CSS_multi-column_layouts">多栏布局模块</a>的 <code>column-*</code> 属性对弹性项目无效。</li> - <li>{{cssxref("float")}} 与 {{cssxref("clear")}} 对弹性项目无效。使用 <code>float</code> 将使元素的 <code>display</code> 属性计为<code>block</code>。</li> - <li>{{cssxref("vertical-align")}} 对弹性项目的对齐无效。</li> -</ul> - -<h2 id="示例">示例</h2> - -<h3 id="基本的弹性布局示例">基本的弹性布局示例</h3> - -<p>这个基本的示例展示了如何对元素应用弹性布局，以及在弹性布局状态下相邻元素的行为方式。</p> - -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>style</span><span class="punctuation token">></span></span><span class="language-css style token"> - - <span class="selector token"><span class="class token">.flex</span> - </span><span class="punctuation token">{</span> - <span class="comment token">/* 基本样式 */</span> - <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">350</span>px<span class="punctuation token">;</span> - <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">200</span>px<span class="punctuation token">;</span> - <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid <span class="hexcode token">#555</span><span class="punctuation token">;</span> - <span class="property token">font</span><span class="punctuation token">:</span> <span class="number token">14</span>px Arial<span class="punctuation token">;</span> - - <span class="comment token">/* 建立弹性框 */</span> - <span class="property token">display</span><span class="punctuation token">:</span> -webkit-flex<span class="punctuation token">;</span> - <span class="property token">-webkit-flex-direction</span><span class="punctuation token">:</span> row<span class="punctuation token">;</span> - - <span class="property token">display</span><span class="punctuation token">:</span> flex<span class="punctuation token">;</span> - <span class="property token">flex-direction</span><span class="punctuation token">:</span> row<span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="selector token"><span class="class token">.flex</span> > div - </span><span class="punctuation token">{</span> - <span class="property token">-webkit-flex</span><span class="punctuation token">:</span> <span class="number token">1</span> <span class="number token">1</span> auto<span class="punctuation token">;</span> - <span class="property token">flex</span><span class="punctuation token">:</span> <span class="number token">1</span> <span class="number token">1</span> auto<span class="punctuation token">;</span> - - <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">30</span>px<span class="punctuation token">;</span> <span class="comment token">/* 让过渡表现良好。（从/到"width:auto"的过渡 - 至少在 Gecko 和 Webkit 上是有 bug 的。 - 更多信息参见 http://bugzil.la/731886 ） */</span> - - <span class="property token">-webkit-transition</span><span class="punctuation token">:</span> width <span class="number token">0.7</span>s ease-out<span class="punctuation token">;</span> - <span class="property token">transition</span><span class="punctuation token">:</span> width <span class="number token">0.7</span>s ease-out<span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="comment token">/* colors */</span> - <span class="selector token"><span class="class token">.flex</span> > div<span class="pseudo-class token">:nth-child(1)</span></span><span class="punctuation token">{</span> <span class="property token">background</span> <span class="punctuation token">:</span> <span class="hexcode token">#009246</span><span class="punctuation token">;</span> <span class="punctuation token">}</span> - <span class="selector token"><span class="class token">.flex</span> > div<span class="pseudo-class token">:nth-child(2)</span></span><span class="punctuation token">{</span> <span class="property token">background</span> <span class="punctuation token">:</span> <span class="hexcode token">#F1F2F1</span><span class="punctuation token">;</span> <span class="punctuation token">}</span> - <span class="selector token"><span class="class token">.flex</span> > div<span class="pseudo-class token">:nth-child(3)</span></span><span class="punctuation token">{</span> <span class="property token">background</span> <span class="punctuation token">:</span> <span class="hexcode token">#CE2B37</span><span class="punctuation token">;</span> <span class="punctuation token">}</span> - - <span class="selector token"><span class="class token">.flex</span> > div<span class="pseudo-class token">:hover</span> - </span><span class="punctuation token">{</span> - <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">200</span>px<span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - </span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>style</span><span class="punctuation token">></span></span> - - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Flexbox nuovo<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>flex<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span>uno<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span>due<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span>tre<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> - -<h3 id="圣杯布局示例">圣杯布局示例</h3> - -<p>此示例展示了弹性盒子根据不同屏幕分辨率动态改变布局的能力。下图说明了这种转换。</p> - -<p><img alt="HolyGrailLayout.png" class="default internal" src="/files/3760/HolyGrailLayout.png"></p> - -<p>这里展示的正是针对浏览器窗口的页面布局必须为智能手机窗口优化的场景。不仅元素的尺寸需要缩减，其呈现顺序也需要改变。弹性盒子让这变得很简单。</p> - -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>style</span><span class="punctuation token">></span></span><span class="language-css style token"> - - <span class="selector token">body </span><span class="punctuation token">{</span> - <span class="property token">font</span><span class="punctuation token">:</span> <span class="number token">24</span>px Helvetica<span class="punctuation token">;</span> - <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#999999</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="selector token"><span class="id token">#main</span> </span><span class="punctuation token">{</span> - <span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">800</span>px<span class="punctuation token">;</span> - <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">0</span>px<span class="punctuation token">;</span> - <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">0</span>px<span class="punctuation token">;</span> - <span class="property token">display</span><span class="punctuation token">:</span> -webkit-flex<span class="punctuation token">;</span> - <span class="property token">display</span><span class="punctuation token">:</span> flex<span class="punctuation token">;</span> - <span class="property token">-webkit-flex-flow</span><span class="punctuation token">:</span> row<span class="punctuation token">;</span> - <span class="property token">flex-flow</span><span class="punctuation token">:</span> row<span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="selector token"><span class="id token">#main</span> > article </span><span class="punctuation token">{</span> - <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">4</span>px<span class="punctuation token">;</span> - <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">5</span>px<span class="punctuation token">;</span> - <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid <span class="hexcode token">#cccc33</span><span class="punctuation token">;</span> - <span class="property token">border-radius</span><span class="punctuation token">:</span> <span class="number token">7</span>pt<span class="punctuation token">;</span> - <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#dddd88</span><span class="punctuation token">;</span> - <span class="property token">-webkit-flex</span><span class="punctuation token">:</span> <span class="number token">3</span> <span class="number token">1</span> <span class="number token">60%</span><span class="punctuation token">;</span> - <span class="property token">flex</span><span class="punctuation token">:</span> <span class="number token">3</span> <span class="number token">1</span> <span class="number token">60%</span><span class="punctuation token">;</span> - <span class="property token">-webkit-order</span><span class="punctuation token">:</span> <span class="number token">2</span><span class="punctuation token">;</span> - <span class="property token">order</span><span class="punctuation token">:</span> <span class="number token">2</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="selector token"><span class="id token">#main</span> > nav </span><span class="punctuation token">{</span> - <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">4</span>px<span class="punctuation token">;</span> - <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">5</span>px<span class="punctuation token">;</span> - <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid <span class="hexcode token">#8888bb</span><span class="punctuation token">;</span> - <span class="property token">border-radius</span><span class="punctuation token">:</span> <span class="number token">7</span>pt<span class="punctuation token">;</span> - <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#ccccff</span><span class="punctuation token">;</span> - <span class="property token">-webkit-flex</span><span class="punctuation token">:</span> <span class="number token">1</span> <span class="number token">6</span> <span class="number token">20%</span><span class="punctuation token">;</span> - <span class="property token">flex</span><span class="punctuation token">:</span> <span class="number token">1</span> <span class="number token">6</span> <span class="number token">20%</span><span class="punctuation token">;</span> - <span class="property token">-webkit-order</span><span class="punctuation token">:</span> <span class="number token">1</span><span class="punctuation token">;</span> - <span class="property token">order</span><span class="punctuation token">:</span> <span class="number token">1</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="selector token"><span class="id token">#main</span> > aside </span><span class="punctuation token">{</span> - <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">4</span>px<span class="punctuation token">;</span> - <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">5</span>px<span class="punctuation token">;</span> - <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid <span class="hexcode token">#8888bb</span><span class="punctuation token">;</span> - <span class="property token">border-radius</span><span class="punctuation token">:</span> <span class="number token">7</span>pt<span class="punctuation token">;</span> - <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#ccccff</span><span class="punctuation token">;</span> - <span class="property token">-webkit-flex</span><span class="punctuation token">:</span> <span class="number token">1</span> <span class="number token">6</span> <span class="number token">20%</span><span class="punctuation token">;</span> - <span class="property token">flex</span><span class="punctuation token">:</span> <span class="number token">1</span> <span class="number token">6</span> <span class="number token">20%</span><span class="punctuation token">;</span> - <span class="property token">-webkit-order</span><span class="punctuation token">:</span> <span class="number token">3</span><span class="punctuation token">;</span> - <span class="property token">order</span><span class="punctuation token">:</span> <span class="number token">3</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="selector token">header, footer </span><span class="punctuation token">{</span> - <span class="property token">display</span><span class="punctuation token">:</span> block<span class="punctuation token">;</span> - <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">4</span>px<span class="punctuation token">;</span> - <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">5</span>px<span class="punctuation token">;</span> - <span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">100</span>px<span class="punctuation token">;</span> - <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid <span class="hexcode token">#eebb55</span><span class="punctuation token">;</span> - <span class="property token">border-radius</span><span class="punctuation token">:</span> <span class="number token">7</span>pt<span class="punctuation token">;</span> - <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#ffeebb</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="comment token">/* 窄到已不足以支持三栏 */</span> - <span class="atrule token"><span class="rule token">@media</span> all and <span class="punctuation token">(</span><span class="property token">max-width</span><span class="punctuation token">:</span> 640px<span class="punctuation token">)</span></span> <span class="punctuation token">{</span> - - <span class="selector token"><span class="id token">#main</span>, <span class="id token">#page</span> </span><span class="punctuation token">{</span> - <span class="property token">-webkit-flex-flow</span><span class="punctuation token">:</span> column<span class="punctuation token">;</span> - <span class="property token">flex-direction</span><span class="punctuation token">:</span> column<span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="selector token"><span class="id token">#main</span> > article, <span class="id token">#main</span> > nav, <span class="id token">#main</span> > aside </span><span class="punctuation token">{</span> - <span class="comment token">/* 恢复到文档内的自然顺序 */</span> - <span class="property token">-webkit-order</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> - <span class="property token">order</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="selector token"><span class="id token">#main</span> > nav, <span class="id token">#main</span> > aside, header, footer </span><span class="punctuation token">{</span> - <span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span> - <span class="property token">max-height</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="punctuation token">}</span> - - </span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>style</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>header</span><span class="punctuation token">></span></span>header<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>header</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">'</span>main<span class="punctuation token">'</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>article</span><span class="punctuation token">></span></span>article<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>article</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>nav</span><span class="punctuation token">></span></span>nav<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>nav</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>aside</span><span class="punctuation token">></span></span>aside<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>aside</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>footer</span><span class="punctuation token">></span></span>footer<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>footer</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> - -<h2 id="试验场地">试验场地</h2> - -<p>有几个在线弹性盒子试验场地可供进行各种实验：</p> - -<ul> - <li><a href="http://demo.agektmr.com/flexbox/">Flexbox Playground</a></li> - <li><a href="http://the-echoplex.net/flexyboxes">Flexy Boxes</a></li> - <li><a href="http://codepen.io/justd/pen/yydezN">Flexbox Properties Demonstration</a></li> -</ul> - -<h2 id="务必牢记">务必牢记</h2> - -<p>描述弹性项目如何排布的算法有时会极其棘手。在使用弹性盒子进行设计时，请考虑以下几点，以免碰到不好的意料外状况。</p> - -<p>弹性盒子的排布与<a href="https://developer.mozilla.org/zh-CN/docs/CSS/writing-mode">书写模式</a>是一致的，这意味着排布的<strong>主轴起点</strong>和<strong>主轴终点</strong>根据的是<strong>开始</strong>与<strong>结束</strong>的位置。</p> - -<p><strong>侧轴起点</strong>与<strong>侧轴终点</strong>依赖于<strong>开始</strong>或<strong>前面（before）</strong>的位置定义，而这个“<strong>前面”</strong>依赖于 <a href="/zh-CN/docs/Web/CSS/direction"><code>direction</code></a> 的值。</p> - -<p>只要 <code>break-</code> 属性的设置值允许，在弹性框布局中是可以存在分页的。CSS3 中的 <code>break-after</code>、<code>break-before</code> 和 <code>break-inside</code>，以及 CSS 2.1 中的 <code>page-break-before</code>、<code>page-break-after</code> 和 <code>page-break-inside</code> 属性在弹性容器上、弹性项目上和弹性项目内均可以使用。</p> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>特性</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>基础支持（单行弹性框）</td> - <td>{{CompatGeckoDesktop("18.0")}}<sup>[6]</sup>{{property_prefix("-moz")}}<sup>[2]</sup><br> - {{CompatGeckoDesktop("22.0")}}</td> - <td>21.0{{property_prefix("-webkit")}}<br> - 29.0</td> - <td>11<sup>[3]</sup></td> - <td>12.10{{property_prefix("-webkit")}}<sup>[5]</sup></td> - <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td> - </tr> - <tr> - <td>多行弹性框</td> - <td>{{CompatGeckoDesktop("28.0")}}</td> - <td>21.0{{property_prefix("-webkit")}}<br> - 29.0</td> - <td>11<sup>[3]</sup></td> - <td>12.10<sup>[5]</sup><br> - 15 {{property_prefix("-webkit")}}</td> - <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>特性</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>Android</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>基础支持（单行弹性框）</td> - <td>{{CompatGeckoMobile("18.0")}}{{property_prefix("-moz")}}<sup>[2]</sup><br> - {{CompatGeckoMobile("22.0")}}</td> - <td> - <p>1.0{{property_prefix("-moz")}}<sup>[2]</sup><br> - 1.1</p> - </td> - <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br> - 4.4</td> - <td>11</td> - <td>12.10<sup>[5]</sup><br> - 15{{property_prefix("-webkit")}}</td> - <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td> - </tr> - <tr> - <td>多行弹性框</td> - <td>{{CompatGeckoMobile("28.0")}}</td> - <td>1.3</td> - <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br> - 4.4</td> - <td>11</td> - <td>12.10<sup>[5]</sup><br> - 15{{property_prefix("-webkit")}}</td> - <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Safari 在版本 6.0 (iOS.1)以前支持的是规范的一个与现有版本不兼容的旧版草案。Safari 6.1（以及 iOS 7 上的 Safari）已更新为支持最终版本。</p> - -<p>[2] 直到 Firefox 22 为止，用户必须修改 <code>about:config</code> 设置，将 <code>layout.css.flexbox.enabled</code> 改为 <code>true</code> 才能激活对弹性盒子的支持。从 Firefox 22 到 Firefox 27，此设置项默认为 <code>true</code>，而 Firefox 28 中取消了此设置项。</p> - -<p>[3] Internet Explorer 10 支持的是规范的一个与现有版本不兼容的旧版草案；Internet Explorer 11 <a href="http://msdn.microsoft.com/zh-CN/library/ie/dn265027%28v=vs.85%29.aspx"> 已更新为 </a> 支持最终版本。</p> - -<p>[4] Android 浏览器直到 4.3 为止支持的是规范的一个与现有版本不兼容的旧版草案。Android 4.4 已更新为支持最终版本。</p> - -<p>[5] 在 Opera 12.10 的<code>弹性盒子</code>初始实现中是没有前缀的，但 Opera 版本 15 到 16 和 Opera Mobile 的 15 到 19 需要 {{property_prefix("-webkit")}}. 在 Opera 17 及 Opera Mobile 24 中再次取消了前缀。</p> - -<p>[6] 直到 Firefox 29 为止，在弹性项目上指定 <code>visibility: collapse</code> 将使其被视为 <code>display: none</code> 处理，而预期的行为是被视为 <code>visibility: hidden</code>。建议的处理方式是在弹性项目上使用 <code>visibility:hidden</code>，这样其行为应当与指派了 <code>visibility:collapse</code> 一致。更多信息，参考 {{bug(783470)}}.</p> - -<h2 id="参见">参见</h2> - -<ul> - <li>各浏览器对弹性盒子的实现中的 bug 的信息，请参考 <a href="https://github.com/philipwalton/flexbugs">The Flexbugs project</a>。</li> -</ul> diff --git a/files/zh-cn/web/css/css_flexible_box_layout/using_flexbox_to_lay_out_web_applications/index.html b/files/zh-cn/web/css/css_flexible_box_layout/using_flexbox_to_lay_out_web_applications/index.html deleted file mode 100644 index 9ea8045d96..0000000000 --- a/files/zh-cn/web/css/css_flexible_box_layout/using_flexbox_to_lay_out_web_applications/index.html +++ /dev/null @@ -1,187 +0,0 @@ ---- -title: 使用flexbox来布局web应用 -slug: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications -tags: - - CSS - - 弹性盒子 -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox -translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications ---- -<p>{{CSSRef}}</p> - -<p>使用 <a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes">flexbox</a> 可以帮助你设计出引人注目的布局，并且在pc端或移动端能够很好的缩放。告别使用浮动的 {{HTMLElement("div")}} 元素、<a href="/en-US/docs/Web/CSS/position#Absolute_positioning">绝对定位</a> 和一些JavaScript hacks, 使用仅仅几行 <a href="/en-US/docs/Web/CSS">CSS</a> 就可以构建出水平或垂直方向的布局。下面是一些基本的使用案例：</p> - -<ul> - <li>你想要将一个元素放在页面的中间</li> - <li>你想要一组在垂直方向可以一个紧挨一个的布局容器</li> - <li>你像要创建一行按钮或者其它元素，这些元素在小屏幕中可以垂直折叠</li> -</ul> - -<p>这篇文章只囊括了在不使用前缀就可以支持现行标准的浏览器下如何使用 <em>flexbox</em> 的相关信息。 想了解更多关于带有供应商前缀的老版本浏览器的资料，请点击这里 <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes">the more general guide to using CSS flexible boxes</a>.</p> - -<h2 id="基础">基础</h2> - -<p>如果你想让元素呈水平或柱状，或如果你想让元素垂直布局，在任何 {{HTMLElement("div")}} 元素中，通过设置 {{cssxref("display")}} 属性为 flex 来使用flexbox，然后设置它任意一行的 {{cssxref("flex-flow")}} <font face="Consolas, Liberation Mono, Courier, monospace">属性</font>, 你就可以在其中尽情的创建元素了。如果你正在使用水平的 flexbox，并想让你的内容垂直换行，只需指定值为wrap。</p> - -<p>接下来，只要你想让某个元素使用弹性布局，就为它添加 {{cssxref("flex")}} 属性。一般情况下，你将会使用下列三个值之一：</p> - -<ul> - <li>如果你想让元素仅仅使用它本身的宽度，比如按钮，则设置 <code>flex: none</code>，none 将会被解释为 <code>0 0 auto</code>.</li> - <li>如果想要一个固定大小的元素，则设置 <code>flex: 0 0 <em>size。</em></code>如：<code>flex 0 0 60px。</code></li> - <li>如果你想让元素自动扩展到可以利用的空间，如果有多个这种类型的元素，它们可以平均分配空间，则设置 <code>flex: auto，它代表</code> <code>1 1 auto</code>.</li> -</ul> - -<p>有可能还有使用方法，但是这应该囊括了最基本的使用案例。让我们用几个例子来看看如何使用。</p> - -<h2 id="示例_1_在页面中把一个元素居中">示例 1: 在页面中把一个元素居中</h2> - -<p>在这个例子中，要做的最简单的事情就是创建两个 flexbox，其中一个在另一个中。每个 flexbox 有三个元素：其中两个当作中间元素的垫子，另一个就是中间元素本身。</p> - -<h3 id="CSS_内容">CSS 内容</h3> - -<pre class="brush: css;">.vertical-box { - display: flex; - height: 400px; - width: 400px; - flex-flow: column; -} -.horizontal-box { - display: flex; - flex-flow: row; -} -.spacer { - flex: auto; - background-color: black; -} -.centered-element { - flex: none; - background-color: white; -} -</pre> - -<h3 id="HTML_内容">HTML 内容</h3> - -<pre class="brush: html;"><div class="vertical-box"> - <div class="spacer"></div> - <div class="centered-element horizontal-box"> - <div class="spacer"></div> - <div class="centered-element">Centered content</div> - <div class="spacer"></div> - </div> - <div class="spacer"></div> -</div> -</pre> - -<h3 id="结果">结果</h3> - -<p>{{ EmbedLiveSample('示例_1_在页面中把一个元素居中', 500, 500) }}</p> - -<h2 id="示例2_垂直放置一系列的容器">示例2: 垂直放置一系列的容器</h2> - -<p>假设你有一个带有头部区域，内容区域，和底部区域的页面。头部和底部应该有一个固定的尺寸，但是内容区域应该根据可以利用的空间来缩放。这可以通过设置内容区域的 {{cssxref("flex")}} 属性，设置头部区域 {{cssxref("flex")}} 属性，底部区域不设置来实现自动扩展功能。</p> - -<h3 id="CSS_内容_2">CSS 内容</h3> - -<pre class="brush: css;highlight:[8,14,18]">.vertical-box { - display: flex; - height: 400px; - width: 400px; - flex-flow: column; -} -.fixed-size { - flex: none; - height: 30px; - background-color: black; - text-align: center; -} -.flexible-size { - flex: auto; - background-color: white; -} -</pre> - -<h3 id="HTML_内容_2">HTML 内容</h3> - -<pre class="brush: html;"><div id="document" class="vertical-box"> - <div class="fixed-size"><button id="increase-size">Increase container size</button></div> - <div id="flexible-content" class="flexible-size"></div> - <div class="fixed-size"><button id="decrease-size">Decrease container size</button></div> -</div> -</pre> - -<h3 id="Javascript_内容">Javascript 内容</h3> - -<pre class="brush: js;">var height = 400; -document.getElementById('increase-size').onclick=function() { - height += 10; - if (height > 500) height = 500; - document.getElementById('document').style.height = (height + "px"); -} - -document.getElementById('decrease-size').onclick=function() { - height -= 10; - if (height < 300) height = 300; - document.getElementById('document').style.height = (height + "px"); -}</pre> - -<h3 id="结果_2">结果</h3> - -<p>{{ EmbedLiveSample('示例2_垂直放置一系列的容器', 500, 500) }}</p> - -<p>这个例子已经设定好了，可以通过点击头部来增加尺寸，通过点击底部来减小尺寸。仔细观察在保持头部和底部尺寸不变的情况下，内容区域是如何自动缩放的。</p> - -<h2 id="示例3_创建一个水平折叠的容器">示例3: 创建一个水平折叠的容器</h2> - -<p>在某些时候，你可能想让一些信息在屏幕尺寸允许的情况下呈水平布局，但是在屏幕不允许的情况下可以水平折叠。这对 flexbox 来讲太容易实现了。你通过设置 {{cssxref("flex-flow")}} 的值为 wrap 来实现。</p> - -<h3 id="CSS_内容_3">CSS 内容</h3> - -<pre class="brush: css;highlight:[4]">.horizontal-container { - display: flex; - width: 300px; - flex-flow: row wrap; -} -.fixed-size { - flex: none; - width: 100px; - background-color: black; - color: white; - text-align: center; -} -</pre> - -<h3 id="HTML_内容_3">HTML 内容</h3> - -<pre class="brush: html;"><div id="container" class="horizontal-container"> - <div class="fixed-size">Element 1</div> - <div class="fixed-size">Element 2</div> - <div class="fixed-size">Element 3</div> -</div><button id="increase-size">Increase container size</button><button id="decrease-size">Decrease container size</button> -</pre> - -<h3 id="Javascript_内容_2">Javascript 内容</h3> - -<pre class="brush: js;">var width = 300; - -document.getElementById('increase-size').onclick=function() { - width += 100; - if (width > 300) width = 300; - document.getElementById('container').style.width = (width + "px"); -} - -document.getElementById('decrease-size').onclick=function() { - width -= 100; - if (width < 100) width = 100; - document.getElementById('container').style.width = (width + "px"); -} -</pre> - -<h3 id="结果_3">结果</h3> - -<p>{{ EmbedLiveSample('示例3_创建一个水平折叠的容器', 500, 200) }}</p> - -<h2 id="参考">参考</h2> - -<ul> - <li><a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes">Using CSS flexible boxes</a></li> -</ul> diff --git a/files/zh-cn/web/css/css_flow_layout/在flow中和flow之外/index.html b/files/zh-cn/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html index 2c84dc8384..2c84dc8384 100644 --- a/files/zh-cn/web/css/css_flow_layout/在flow中和flow之外/index.html +++ b/files/zh-cn/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html diff --git a/files/zh-cn/web/css/css_分片/index.html b/files/zh-cn/web/css/css_fragmentation/index.html index 5b0d8e7a13..5b0d8e7a13 100644 --- a/files/zh-cn/web/css/css_分片/index.html +++ b/files/zh-cn/web/css/css_fragmentation/index.html diff --git a/files/zh-cn/web/css/css_grid_layout/css_grid,_logical_values_and_writing_modes/index.html b/files/zh-cn/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html index 936634c06c..936634c06c 100644 --- a/files/zh-cn/web/css/css_grid_layout/css_grid,_logical_values_and_writing_modes/index.html +++ b/files/zh-cn/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html diff --git a/files/zh-cn/web/css/css_grid_layout/利用css网格布局实现常用布局/index.html b/files/zh-cn/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html index 1f19e6933b..1f19e6933b 100644 --- a/files/zh-cn/web/css/css_grid_layout/利用css网格布局实现常用布局/index.html +++ b/files/zh-cn/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html diff --git a/files/zh-cn/web/css/css_images/implementing_image_sprites_in_css/index.html b/files/zh-cn/web/css/css_images/implementing_image_sprites_in_css/index.html new file mode 100644 index 0000000000..4a3e2bb7c9 --- /dev/null +++ b/files/zh-cn/web/css/css_images/implementing_image_sprites_in_css/index.html @@ -0,0 +1,49 @@ +--- +title: 在 CSS 中实现图像合并 +slug: Web/Guide/CSS/CSS_Image_Sprites +tags: + - CSS + - CSS Image + - Graphics + - Guide + - Web +translation_of: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS +--- +<div>{{cssRef}}</div> + +<p>CSS <strong>图像合并</strong>（<strong>Image sprites</strong>） 技术，亦作 CSS 贴图定位、图像精灵（sprite，意为精灵），被运用于众多使用大量小图标的网页应用之上。它可取图像的一部分来使用，使得使用一个图像文件替代多个小文件成为可能。相较于一个小图标一个图像文件，单独一张图片所需的 HTTP 请求更少，对内存和带宽更加友好。</p> + +<div class="note"> +<p>备注: 当使用 HTTP/2 时，使用多个小流量请求实际上可能更为带宽友好。</p> +</div> + +<h2 id="实现">实现</h2> + +<p>若要为所有类名为 <code>toolbtn</code> 的元素附加上一张图片：</p> + +<pre class="brush:css">.toolbtn { + background: url(myfile.png); + display: inline-block; + height: 20px; + width: 20px; +} +</pre> + +<p>为设置 <code>background-position</code> 以使每个按钮得到合并后图片中的正确部分，可以在 <code>background</code> 属性中的 {{cssxref("url()")}} 后添加 x, y 两个坐标值，或直接使用 {{cssxref("background-position")}} 属性。例如：</p> + +<pre class="brush:css">#btn1 {background-position: -20px 0px} +#btn2 {background-position: -40px 0px} +</pre> + +<p>这会将 ID 为 btn1 的元素的背景向左移 20px，ID 为 btn2 的元素的背景向左移40px（假设这两个元素都带有 <code>toolbtn</code> 这个类且应用了上面 <code>background</code> 属性中定义的图片背景）</p> + +<p>类似的，你也可以使用下面的代码添加悬停效果：</p> + +<pre class="brush:css">#btn:hover { + background-position: <var><pixels shifted right></var>px <var><pixels shifted down></var>px; +} +</pre> + +<h3 id="深入阅读">深入阅读</h3> + +<p>CSS Tricks 上的完整 Demo：<a href="http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/">http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/</a></p> diff --git a/files/zh-cn/web/css/css_images/using_css_gradients/index.html b/files/zh-cn/web/css/css_images/using_css_gradients/index.html new file mode 100644 index 0000000000..21460cd820 --- /dev/null +++ b/files/zh-cn/web/css/css_images/using_css_gradients/index.html @@ -0,0 +1,717 @@ +--- +title: 使用 CSS 渐变 +slug: Web/Guide/CSS/Using_CSS_gradients +translation_of: Web/CSS/CSS_Images/Using_CSS_gradients +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS 渐变</strong> {{cssxref("<image>")}} 类型的一种特殊类型 {{cssxref("<gradient>")}} 表示，由两种或多种颜色之间的渐进过渡组成。您可以选择三种类型的渐变：线性 (由 {{cssxref("linear-gradient")}} 函数创建)，径向(由 {{cssxref("radial-gradient")}} 函数创建) 和圆锥 (由 {{cssxref("conic-gradient")}} 函数创建)。您还可以使用 {{cssxref("repeating-linear-gradient")}} 和 {{cssxref("repeating-radial-gradient")}} 函数创建重复渐变。</p> + +<p>渐变可以在任何使用 <code><image></code> 的地方使用，例如在背景中。 由于渐变是动态生成的，因此它们可以消除对传统用于实现类似效果的栅格图像文件的需求。 此外，由于渐变是由浏览器生成的，因此在放大时它们看起来比栅格图像更好，并且可以动态调整大小。</p> + +<p>我们将从线性渐变开始介绍，然后以线性渐变为例介绍所有渐变类型支持的功能，然后继续介绍径向渐变，圆锥渐变和重复渐变。</p> + +<h2 id="使用线性渐变">使用线性渐变</h2> + +<p>线性渐变创建了一条沿直线前进的颜色带。</p> + +<div> +<h3 id="基础线性渐变">基础线性渐变</h3> + +<p>要创建最基本的渐变类型，您只需指定两种颜色即可。 这些被称为色标。 至少指定两个色标，也可以指定任意数量。</p> + +<div class="hidden"> +<pre class="brush: html notranslate" dir="rtl"><div class="simple-linear"></div></pre> + +<pre class="brush: css notranslate">div { + width: 120px; + height: 120px; +}</pre> +</div> + +<pre class="brush: css notranslate">.simple-linear { + background: linear-gradient(blue, pink); +}</pre> + +<p>{{ EmbedLiveSample('A_basic_linear_gradient', 120, 120) }}</p> +</div> + +<div> +<h3 id="改变渐变方向">改变渐变方向</h3> + +<p>默认情况下，线性渐变的方向是从上到下， 你可以指定一个值来改变渐变的方向。</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="horizontal-gradient"></div></pre> + +<pre class="brush: css notranslate">div { + width: 120px; + height: 120px; +}</pre> +</div> + +<pre class="brush: css notranslate">.horizontal-gradient { + background: linear-gradient(to right, blue, pink); +} +</pre> + +<p>{{ EmbedLiveSample('Changing_the_direction', 120, 120) }}</p> +</div> + +<div> +<h3 id="对角线渐变">对角线渐变</h3> + +<p>你甚至可以设置渐变方向为从一个对角到另一个对角。</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="diagonal-gradient"></div></pre> + +<pre class="brush: css notranslate">div { + width: 200px; + height: 100px; +}</pre> +</div> + +<pre class="brush: css notranslate">.diagonal-gradient { + background: linear-gradient(to bottom right, blue, pink); +} +</pre> + +<p>{{ EmbedLiveSample('Diagonal_gradients', 200, 100) }}</p> +</div> + +<div> +<h3 id="设置渐变角度">设置渐变角度</h3> + +<p>如果你想要更精确地控制渐变的方向，你可以给渐变设置一个具体的角度。</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="angled-gradient"></div></pre> + +<pre class="brush: css notranslate">div { + width: 120px; + height: 120px; +}</pre> +</div> + +<pre class="brush: css notranslate">.angled-gradient { + background: linear-gradient(70deg, blue, pink); +} +</pre> + +<p>{{ EmbedLiveSample('Using_angles', 120, 120) }}</p> + +<p>在使用角度的时候, <code>0deg</code> 代表渐变方向为从下到上, <code>90deg</code> 代表渐变方向为从左到右，诸如此类正角度都属于顺时针方向。 而负角度意味着逆时针方向。</p> + +<p><img alt="linear_redangles.png" class="default internal" src="/files/3811/linear_red_angles.png"></p> +</div> + +<h2 id="声明颜色和创建效果">声明颜色和创建效果</h2> + +<p>所有的CSS渐变类型都是一个位置依赖的颜色范围。CSS渐变产生的颜色可以随位置不断变化，从而产生平滑的颜色过渡。也可以创建纯色带和两种颜色之间的硬过渡。以下内容适用于所有渐变函数：</p> + +<div> +<h3 id="使用多种颜色">使用多种颜色</h3> + +<p>无需局限于使用两种颜色，你想使用多少种颜色都可以！ 默认情况下，所设置颜色会均匀分布在渐变路径中。</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="auto-spaced-linear-gradient"></div> +</pre> + +<pre class="brush: css notranslate">div { + width: 120px; + height: 120px; +}</pre> +</div> + +<pre class="brush: css notranslate">.auto-spaced-linear-gradient { + background: linear-gradient(red, yellow, blue, orange); +} +</pre> + +<p>{{ EmbedLiveSample('Using_more_than_two_colors', 120, 120) }}</p> +</div> + +<div> +<h3 id="颜色终止位置">颜色终止位置</h3> + +<p>你不需要让你设置的颜色在默认位置终止。 你可以通过给每个颜色设置0，1%或者2%或者其他的绝对数值来调整它们的位置。如果你将位置设置为百分数， <code>0%</code> 表示起始点, 而100%表示终点，但是如果需要的话你也可以设置这个范围之外的其他值来达到你想要的效果。如果有些位置你没有明确设置，那么它将会被自动计算，第一种颜色会在0%处停止，而最后一种颜色是100%，至于其他颜色则是在它邻近的两种颜色的中间停止。 </p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="multicolor-linear"></div> +</pre> + +<pre class="brush: css notranslate">div { + width: 120px; + height: 120px; +}</pre> +</div> + +<pre class="brush: css notranslate">.multicolor-linear { + background: linear-gradient(to left, lime 28px, red 77%, cyan); +} +</pre> + +<p>{{ EmbedLiveSample('Positioning_color_stops', 120, 120) }}</p> +</div> + +<div> +<h3 id="创建实线">创建实线</h3> + +<p>要在两种颜色之间创建一条硬线，即创建一个条纹而不是逐渐过渡，可以将相邻的颜色停止设置为相同的位置。在此示例中，两种颜色在50%标记处共享一个颜色停止点，即渐变的一半：</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="striped"></div> +</pre> + +<pre class="brush: css notranslate">div { + width: 120px; + height: 120px; +}</pre> +</div> + +<pre class="brush: css notranslate">.striped { + background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%); +}</pre> + +<p>{{ EmbedLiveSample('Creating_hard_lines', 120, 120) }}</p> +</div> + +<div> +<h3 id="渐变提示">渐变提示</h3> + +<p>默认情况下，渐变会平滑地从一种颜色过渡到另一种颜色。你可以通过设置一个值来将渐变的中心点移动到指定位置。 在如下示例中, 我们将渐变的中心点由50%设为10%。</p> + +<div class="hidden"> +<pre class="brush: html notranslate" dir="rtl"><div class="color-hint"></div> +<div class="simple-linear"></div></pre> + +<pre class="brush: css notranslate">div { + width: 120px; + height: 120px; float: left; margin-right: 10px; +}</pre> +</div> + +<pre class="brush: css notranslate">.color-hint { + background: linear-gradient(blue, 10%, pink); +} +.simple-linear { + background: linear-gradient(blue, pink); +}</pre> + +<p>{{ EmbedLiveSample('Gradient_hints', 120, 120) }}</p> +</div> + +<div> +<h3 id="创建色带和条纹">创建色带和条纹</h3> + +<p>要在渐变中包含一个实心的非过渡颜色区域，请包含颜色起止点的两个位置。颜色起止点可以有两个位置，这相当于两个连续颜色在不同位置具有相同的颜色起止点。颜色将在第一个颜色起止点时达到完全饱和，保持该饱和度到第二个颜色起止点，并通过相邻颜色起止点的第一个位置过渡到相邻颜色起止点的颜色。</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="multiposition-stops"></div> +<div class="multiposition-stop2"></div> +</pre> + +<pre class="brush: css notranslate">div { + width: 120px; + height: 120px; + float: left; margin-right: 10px; box-sizing: border-box; +}</pre> +</div> + +<pre class="brush: css notranslate">.multiposition-stops { + background: linear-gradient(to left, + lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% ); + background: linear-gradient(to left, + lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% ); +} +.multiposition-stop2 { + background: linear-gradient(to left, + lime 25%, red 25%, red 50%, cyan 50%, cyan 75%, yellow 75% ); + background: linear-gradient(to left, + lime 25%, red 25% 50%, cyan 50% 75%, yellow 75% ); +} +</pre> + +<p>{{ EmbedLiveSample('Creating_color_bands_stripes', 120, 120) }}</p> + +<p>In the first example above, the lime goes from the 0% mark, which is implied, to the 20% mark, transitions from lime to red over the next 10% of the width of the gradient, reach solid red at the 30% mark, and staying solid red up until 45% through the gradient, where it fades to cyan, being fully cyan for 15% of the gradient, and so on.</p> + +<p>In the second example, the second color stop for each color is at the same location as the first color stop for the adjacent color, creating a striped effect.</p> + +<p>In both examples, the gradient is written twice: the first is the CSS Images Level 3 method of repeating the color for each stop and the second example is the CSS Images Level 4 multiple color stop method of including two color-stop-lengths in a linear-color-stop declaration.</p> +</div> + +<div> +<h3 id="Controlling_the_progression_of_a_gradient">Controlling the progression of a gradient</h3> + +<p>By default, a gradient evenly progresses between the colors of two adjacent color stops, with the midpoint between those two color stops being the midpoint color value. You can control the interpolation, or progression, between two color stops by including a color hint location. In this example, the color reaches the midpoint between lime and cyan 20% of the way through the gradient rather than 50% of the way through. The second example does not contain the hint to hilight the difference the color hint can make:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="colorhint-gradient"></div> <div class="regular-progression"></div> + +</pre> + +<pre class="brush: css notranslate">div { + width: 120px; + height: 120px; + float: left; margin-right: 10px; box-sizing: border-box; +}</pre> +</div> + +<pre class="brush: css notranslate">.colorhint-gradient { + background: linear-gradient(to top, black, 20%, cyan); +} +.regular-progression { + background: linear-gradient(to top, black, cyan); +} +</pre> + +<p>{{ EmbedLiveSample('Controlling_the_progression_of_a_gradient', 120, 120) }}</p> +</div> + +<h3 id="Overlaying_gradients">Overlaying gradients</h3> + +<p>Gradients support transparency, so you can stack multiple backgrounds to achieve some pretty fancy effects. The backgrounds are stacked from top to bottom, with the first specified being on top.</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="layered-image"></div> +</pre> + +<pre class="brush: css notranslate">div { + width: 300px; + height: 150px; +}</pre> +</div> + +<pre class="brush: css notranslate">.layered-image { + background: linear-gradient(to right, transparent, mistyrose), + url("https://mdn.mozillademos.org/files/15525/critters.png"); +} +</pre> + +<p>{{ EmbedLiveSample('Overlaying_gradients', 300, 150) }}</p> + +<h3 id="Stacked_gradients">Stacked gradients</h3> + +<p>You can even stack gradients with other gradients. As long as the top gradients aren't entirely opaque, the gradients below will still be visible.</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="stacked-linear"></div> +</pre> + +<pre class="brush: css notranslate">div { + width: 200px; + height: 200px; +}</pre> +</div> + +<pre class="brush: css notranslate">.stacked-linear { + background: + linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), + linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), + linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); +} +</pre> + +<p>{{ EmbedLiveSample('Stacked_gradients', 200, 200) }}</p> + +<h2 id="Using_radial_gradients">Using radial gradients</h2> + +<p>Radial gradients are similar to linear gradients, except that they radiate out from a central point. You can dictate where that central point is. You can also make them circular or elliptical.</p> + +<h3 id="A_basic_radial_gradient">A basic radial gradient</h3> + +<p>As with linear gradients, all you need to create a radial gradient are two colors. By default, the center of the gradient is at the 50% 50% mark, and the gradient is elliptical matching the aspect ratio of it's box:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="simple-radial"></div> +</pre> + +<pre class="brush: css notranslate">div { + width: 240px; + height: 120px; +}</pre> +</div> + +<pre class="brush: css notranslate">.simple-radial { + background: radial-gradient(red, blue); +} +</pre> + +<p>{{ EmbedLiveSample('A_basic_radial_gradient', 120, 120) }}</p> + +<h3 id="Positioning_radial_color_stops">Positioning radial color stops</h3> + +<p>Again like linear gradients, you can position each radial color stop with a percentage or absolute length.</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="radial-gradient"></div> +</pre> + +<pre class="brush: css notranslate">div { + width: 120px; + height: 120px; +}</pre> +</div> + +<pre class="brush: css notranslate">.radial-gradient { + background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%); +} +</pre> + +<p>{{ EmbedLiveSample('Positioning_radial_color_stops', 120, 120) }}</p> + +<h3 id="Positioning_the_center_of_the_gradient">Positioning the center of the gradient</h3> + +<p>You can position the center of the gradient with keyterms, percentage, or absolute lengths, length and percentage values repeating if only one is present, otherwise in the order of position from the left and position from the top.</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="radial-gradient"></div> +</pre> + +<pre class="brush: css notranslate">div { + width: 120px; + height: 240px; +}</pre> +</div> + +<pre class="brush: css notranslate">.radial-gradient { + background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%); +} +</pre> + +<p>{{ EmbedLiveSample('Positioning_the_center_of_the_gradient', 120, 120) }}</p> + +<h3 id="Sizing_radial_gradients">Sizing radial gradients</h3> + +<p>Unlike linear gradients, you can specify the size of radial gradients. Possible values include closest-corner, closest-side, farthest-corner, and farthest-side, with farthest-corner being the default.</p> + +<h4 id="Example_closest-side_for_ellipses">Example: closest-side for ellipses</h4> + +<p>This example uses the <code>closest-side</code> size value, which means the size is set by the distance from the starting point (the center) to the closest side of the enclosing box.</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="radial-ellipse-side"></div> +</pre> + +<pre class="brush: css notranslate">div { + width: 240px; + height: 100px; +}</pre> +</div> + +<pre class="brush: css notranslate">.radial-ellipse-side { + background: radial-gradient(ellipse closest-side, + red, yellow 10%, #1e90ff 50%, beige); +} +</pre> + +<p>{{ EmbedLiveSample('Example_closest-side_for_ellipses', 240, 100) }}</p> + +<h4 id="Example_farthest-corner_for_ellipses">Example: farthest-corner for ellipses</h4> + +<p>This example is similar to the previous one, except that its size is specified as <code>farthest-corner</code>, which sets the size of the gradient by the distance from the starting point to the farthest corner of the enclosing box from the starting point.</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="radial-ellipse-far"></div> +</pre> + +<pre class="brush: css notranslate">div { + width: 240px; + height: 100px; +}</pre> +</div> + +<pre class="brush: css notranslate">.radial-ellipse-far { + background: radial-gradient(ellipse farthest-corner at 90% 90%, + red, yellow 10%, #1e90ff 50%, beige); +} +</pre> + +<p>{{ EmbedLiveSample('Example_farthest-corner_for_ellipses', 240, 100) }}</p> + +<h4 id="Example_closest-side_for_circles">Example: closest-side for circles</h4> + +<p>This example uses <code>closest-side</code>, which makes the circle's size to be the distance between the starting point (the center) and the closest side. The circle's radius is the distance between the center of the gradient and the closest edge, which due to the positioning of the 25% from the top and 25% from the bottom, is closest to the bottom, since the height in this case is narrower than the width.</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="radial-circle-close"></div> +</pre> + +<pre class="brush: css notranslate">div { + width: 240px; + height: 120px; +}</pre> +</div> + +<pre class="brush: css notranslate">.radial-circle-close { + background: radial-gradient(circle closest-side at 25% 75%, + red, yellow 10%, #1e90ff 50%, beige); +} +</pre> + +<p>{{ EmbedLiveSample('Example_closest-side_for_circles', 240, 120) }}</p> + +<h3 id="Stacked_radial_gradients">Stacked radial gradients</h3> + +<p>Just like linear gradients, you can also stack radial gradients. The first specified is on top, the last on the bottom.</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="stacked-radial"></div> +</pre> + +<pre class="brush: css notranslate">div { + width: 200px; + height: 200px; +}</pre> +</div> + +<pre class="brush: css notranslate">.stacked-radial { + background: + radial-gradient(circle at 50% 0, + rgba(255,0,0,.5), + rgba(255,0,0,0) 70.71%), + radial-gradient(circle at 6.7% 75%, + rgba(0,0,255,.5), + rgba(0,0,255,0) 70.71%), + radial-gradient(circle at 93.3% 75%, + rgba(0,255,0,.5), + rgba(0,255,0,0) 70.71%) beige; + border-radius: 50%; +} +</pre> + +<p>{{ EmbedLiveSample('Stacked_radial_gradients', 200, 200) }}</p> + +<h2 id="Using_repeating_gradients">Using repeating gradients</h2> + +<p>The {{cssxref("linear-gradient")}} and {{cssxref("radial-gradient")}} properties don't support automatically repeated color stops. However, the {{cssxref("repeating-linear-gradient")}} and {{cssxref("repeating-radial-gradient")}} properties are available to offer this functionality.</p> + +<p>The size of the gradient line that repeats is the length between the first color stop value and the last color stop length value. If the last color stop has just a color and no color stop length, the value defaults to 0, meaning the linear gradient will not repeat and the radial gradient will only repeat if the radius of the gradient is smaller than the length between the center of the gradient and the farthest corner.</p> + +<div> +<h3 id="Repeating_linear_gradients">Repeating linear gradients</h3> + +<p>This example uses {{cssxref("repeating-linear-gradient")}} to create a gradient that progresses repeatedly in a straight line. The colors get cycled over again as the gradient repeats. In this case the gradient line is 10px long.</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="repeating-linear"></div> +</pre> + +<pre class="brush: css notranslate">div { + width: 120px; + height: 120px; +}</pre> +</div> + +<pre class="brush: css notranslate">.repeating-linear { + background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px); +} +</pre> + +<p>{{ EmbedLiveSample('Repeating_linear_gradients', 120, 120) }}</p> +</div> + +<div> +<h3 id="Multiple_repeating_linear_gradients">Multiple repeating linear gradients</h3> + +<p>Similar to regular linear and radial gradients, you can include multiple gradients, one on top of the other. This only makes sense if the gradients are partially transparent allowing subsequent gradients to show through the transparent areas, or if you include different <a href="/en-US/docs/Web/CSS/background-size">background-sizes</a>, optionally with different <a href="/en-US/docs/Web/CSS/background-position">background-position</a> property values, for each gradient image. We are using transparency.</p> + +<p>In this case the gradient lines are 300px, 230px, and 300px long.</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="multi-repeating-linear"></div> +</pre> + +<pre class="brush: css notranslate">div { + width: 600px; + height: 400px; +}</pre> +</div> + +<pre class="brush: css notranslate">.multi-repeating-linear { + background: + repeating-linear-gradient(190deg, rgba(255, 0, 0, 0.5) 40px, + rgba(255, 153, 0, 0.5) 80px, rgba(255, 255, 0, 0.5) 120px, + rgba(0, 255, 0, 0.5) 160px, rgba(0, 0, 255, 0.5) 200px, + rgba(75, 0, 130, 0.5) 240px, rgba(238, 130, 238, 0.5) 280px, + rgba(255, 0, 0, 0.5) 300px), + repeating-linear-gradient(-190deg, rgba(255, 0, 0, 0.5) 30px, + rgba(255, 153, 0, 0.5) 60px, rgba(255, 255, 0, 0.5) 90px, + rgba(0, 255, 0, 0.5) 120px, rgba(0, 0, 255, 0.5) 150px, + rgba(75, 0, 130, 0.5) 180px, rgba(238, 130, 238, 0.5) 210px, + rgba(255, 0, 0, 0.5) 230px), + repeating-linear-gradient(23deg, red 50px, orange 100px, + yellow 150px, green 200px, blue 250px, + indigo 300px, violet 350px, red 370px); +} +</pre> + +<p>{{ EmbedLiveSample('Multiple_repeating_linear_gradients', 600, 400) }}</p> +</div> + +<h3 id="Plaid_gradient">Plaid gradient</h3> + +<p>To create plaid we include several overlapping gradients with transparency. In the first background declaration we listed every color stop separately. The second background property declaration using the multiple position color stop syntax:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="plaid-gradient"></div></pre> + +<pre class="brush: css notranslate">div { + width: 200px; + height: 200px; +}</pre> +</div> + +<pre class="brush: css notranslate">.plaid-gradient { + background: + repeating-linear-gradient(90deg, transparent, transparent 50px, + rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, + transparent 56px, transparent 63px, + rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, + transparent 69px, transparent 116px, + rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px), + repeating-linear-gradient(0deg, transparent, transparent 50px, + rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, + transparent 56px, transparent 63px, + rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, + transparent 69px, transparent 116px, + rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px), + repeating-linear-gradient(-45deg, transparent, transparent 5px, + rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px), + repeating-linear-gradient(45deg, transparent, transparent 5px, + rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px); + + background: + repeating-linear-gradient(90deg, transparent 0 50px, + rgba(255, 127, 0, 0.25) 50px 56px, + transparent 56px 63px, + rgba(255, 127, 0, 0.25) 63px 69px, + transparent 69px 116px, + rgba(255, 206, 0, 0.25) 116px 166px), + repeating-linear-gradient(0deg, transparent 0 50px, + rgba(255, 127, 0, 0.25) 50px 56px, + transparent 56px 63px, + rgba(255, 127, 0, 0.25) 63px 69px, + transparent 69px 116px, + rgba(255, 206, 0, 0.25) 116px 166px), + repeating-linear-gradient(-45deg, transparent 0 5px, + rgba(143, 77, 63, 0.25) 5px 10px), + repeating-linear-gradient(45deg, transparent 0 5px, + rgba(143, 77, 63, 0.25) 5px 10px); +} +</pre> + +<p>{{ EmbedLiveSample('Plaid_gradient', 200, 200) }}</p> + +<h3 id="Repeating_radial_gradients">Repeating radial gradients</h3> + +<p>This example uses {{cssxref("repeating-radial-gradient")}} to create a gradient that radiates repeatedly from a central point. The colors get cycled over and over as the gradient repeats.</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="repeating-radial"></div> +</pre> + +<pre class="brush: css notranslate">div { + width: 120px; + height: 120px; +}</pre> +</div> + +<pre class="brush: css notranslate">.repeating-radial { + background: repeating-radial-gradient(black, black 5px, white 5px, white 10px); +} +</pre> + +<p>{{ EmbedLiveSample('Repeating_radial_gradients', 120, 120) }}</p> + +<h3 id="Multiple_repeating_radial_gradients">Multiple repeating radial gradients</h3> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="multi-target"></div> +</pre> + +<pre class="brush: css notranslate">div { + width: 250px; + height: 150px; +}</pre> +</div> + +<pre class="brush: css notranslate">.multi-target { + background: + repeating-radial-gradient(ellipse at 80% 50%,rgba(0,0,0,0.5), + rgba(0,0,0,0.5) 15px, rgba(255,255,255,0.5) 15px, + rgba(255,255,255,0.5) 30px) top left no-repeat, + repeating-radial-gradient(ellipse at 20% 50%,rgba(0,0,0,0.5), + rgba(0,0,0,0.5) 10px, rgba(255,255,255,0.5) 10px, + rgba(255,255,255,0.5) 20px) top left no-repeat yellow; + background-size: 200px 200px, 150px 150px; +} +</pre> + +<p>{{ EmbedLiveSample('Multiple_repeating_radial_gradients', 250, 150) }}</p> + +<h3 id="Plaid_gradient_2">Plaid gradient</h3> + +<p>To create plaid we include several overlapping gradients with transparency. In the first background declaration we listed every color stop separately. The second background property declaration using the multiple position color stop syntax:</p> + +<pre class="notranslate"><div class="plaid-gradient"></div></pre> + +<pre class="notranslate">div { + width: 200px; + height: 200px; +}</pre> + +<pre class="notranslate">.plaid-gradient { + background: + repeating-linear-gradient(90deg, transparent, transparent 50px, + rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, + transparent 56px, transparent 63px, + rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, + transparent 69px, transparent 116px, + rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px), + repeating-linear-gradient(0deg, transparent, transparent 50px, + rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, + transparent 56px, transparent 63px, + rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, + transparent 69px, transparent 116px, + rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px), + repeating-linear-gradient(-45deg, transparent, transparent 5px, + rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px), + repeating-linear-gradient(45deg, transparent, transparent 5px, + rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px); + + background: + repeating-linear-gradient(90deg, transparent 0 50px, + rgba(255, 127, 0, 0.25) 50px 56px, + transparent 56px 63px, + rgba(255, 127, 0, 0.25) 63px 69px, + transparent 69px 116px, + rgba(255, 206, 0, 0.25) 116px 166px), + repeating-linear-gradient(0deg, transparent 0 50px, + rgba(255, 127, 0, 0.25) 50px 56px, + transparent 56px 63px, + rgba(255, 127, 0, 0.25) 63px 69px, + transparent 69px 116px, + rgba(255, 206, 0, 0.25) 116px 166px), + repeating-linear-gradient(-45deg, transparent 0 5px, + rgba(143, 77, 63, 0.25) 5px 10px), + repeating-linear-gradient(45deg, transparent 0 5px, + rgba(143, 77, 63, 0.25) 5px 10px); +} +</pre> + +<p>{{ EmbedLiveSample('Plaid_gradient', 200, 200) }}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Gradient functions: {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}</li> + <li>Gradient-related CSS data types: {{cssxref("<gradient>")}}, {{cssxref("<image>")}}</li> + <li>Gradient-related CSS properties: {{cssxref("background")}}, {{cssxref("background-image")}}</li> + <li><a class="external" href="http://lea.verou.me/css3patterns/">CSS Gradients Patterns Gallery, by Lea Verou</a></li> + <li><a class="external" href="http://standardista.com/cssgradients">CSS3 Gradients Library, by Estelle Weyl</a></li> + <li><a href="https://cssgenerator.org/gradient-css-generator.html">Gradient CSS Generator</a></li> +</ul> diff --git a/files/zh-cn/web/css/css_lists_and_counters/consistent_list_indentation/index.html b/files/zh-cn/web/css/css_lists_and_counters/consistent_list_indentation/index.html new file mode 100644 index 0000000000..1426940c48 --- /dev/null +++ b/files/zh-cn/web/css/css_lists_and_counters/consistent_list_indentation/index.html @@ -0,0 +1,106 @@ +--- +title: 调整列表缩进 +slug: Web/Guide/CSS/Consistent_list_indentation +tags: + - CSS + - Guide + - NeedsUpdate + - Web + - 列表 + - 缩进 +translation_of: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation +--- +<p><span class="seoSummary">对列表最常见的样式修改之一是改变缩进距离，即列表项向右侧移动的距离。令人沮丧的是，缩进在一个浏览器中的表现常常与其他浏览器中的效果不尽相同。例如，如果声明列表的左边距为0，在IE浏览器中生效，但是在基于</span>Gecko引擎的浏览器中却不起作用。本文将帮助你理解这些可能发生的问题，以及如何避免这些问题的产生。</p> + +<p>为了弄明白这是为什么，以及如何避免这些问题发生，有必要研究一下列表结构的具体细节。</p> + +<h3 id="Making_a_List" name="Making_a_List">创建一个列表</h3> + +<p>首先，来看一个简单，单独的列表项目。该列表项目没有标记符号（或称之为“着重号”），并且没有被列表包裹起来。如下图图1所示，单独的列表项是无效的，简单且没有任何装饰。</p> + +<p><img alt="Figure 1" class="internal" src="/@api/deki/files/619/=Consistent-list-indentation-figure1.gif"></p> + +<p>红色的虚线边框代表列表项目内容区域的外边界。记住，从这一点上看，这个列表项目没有内边距和边框。如果我们再添加两个列表项目，我们得到下面的结果，如图2所示。</p> + +<p><img alt="Figure 2" class="internal" src="/@api/deki/files/620/=Consistent-list-indentation-figure2.gif"></p> + +<p>现在我们在外面加上父元素；这个例子中，我们使用一个无序列表(i.e., <code><ul></code>)。根据 CSS 盒子模型，列表项目的盒子必须显示在其父元素的内容区域里。因为这里的父元素既没有 padding 也没有 margin，所以我们得到下面的结果，如图3所示。</p> + +<p><img alt="Figure 3" class="internal" src="/@api/deki/files/621/=Consistent-list-indentation-figure3.gif"></p> + +<p>这里，蓝色的虚线边框表示 <ul> 元素内容区域的边缘。因为我们没有给 <ul> 元素添加内边距, 所以它的内容的包裹层紧贴在三个列表项外。</p> + +<p>现在我们来添加列表项目标记，由于这是一个无序列表，我们添加传统的实心圆“着重标记”，如下图图4所示。</p> + +<p><img alt="Figure 4" class="internal" src="/@api/deki/files/622/=Consistent-list-indentation-figure4.gif"></p> + +<p>可以看到，这些标记符号在<ul>内容区域的外面，但这无关紧要。重要的是，这些标记被放到主要的<li>元素盒子外面了。它们有点像列表项目的附件，在<li>的内容区域外游荡，但依然依附于<li>。</p> + +<p>这就是为什么在除了IE浏览器以外的所有浏览器上，标记符号都被放在<li>元素的边框外，假设列表项位置的值为外部"outside"。如果该值被改为内部"inside"，则标记符号会被放到<li>的内容区域里面，像是放在<li>最开头的内联盒子一样。</p> + +<h3 id="Indenting_It_Twice" name="Indenting_It_Twice">二次缩进</h3> + +<p>So how will all this appear in a document? At the moment, we have a situation analogous to these styles:</p> + +<pre>ul, li {margin-left: 0; padding-left: 0;}</pre> + +<p>If we dropped this list into a document as-is, there would be no apparent indentation and the markers would be in danger of falling off the left edge of the browser window.</p> + +<p>In order to avoid this and get some indentation, there are really only three options available to browser implementors.</p> + +<ol> + <li>Give each <code><li></code> element a left margin.</li> + <li>Give the <code><ul></code> element a left margin.</li> + <li>Give the <code><ul></code> element some left padding.</li> +</ol> + +<p>As it turns out, nobody seems to have used the first option. The second option was taken by Internet Explorer for Windows and Macintosh, and Opera. The third was adopted by Gecko, and by extension all the browsers that embed it.</p> + +<p>Let's look at the two approaches for a moment. In Internet Explorer and Opera, the lists are indented by setting a left margin of 40 pixels on the <code><ul></code> element. If we apply a background color to the <code><ul></code> element and leave the list item and <code><ul></code> borders in place, we get the result shown in Figure 5.</p> + +<p><img alt="Figure 5" class="internal" src="/@api/deki/files/623/=Consistent-list-indentation-figure5.gif"></p> + +<p>Gecko, on the other hand, sets a left <em>padding</em> of 40 pixels for the <code><ul></code> element, so given the exact same styles as were used to produce Figure 5, loading the example into a Gecko-based browser gives us Figure 6.</p> + +<p><img alt="Figure 6" class="internal" src="/@api/deki/files/624/=Consistent-list-indentation-figure6.gif"></p> + +<p>As we can see, the markers remain attached to the <code><li></code> elements, no matter where they are. The difference is entirely in how the <code><ul></code> is styled. We can only see the difference if we try to set a background or border on the <code><ul></code> element.</p> + +<h3 id="Finding_Consistency" name="Finding_Consistency">Finding Consistency</h3> + +<p>Boil it all down, and what we're left with is this: if you want consistent rendering of lists between Gecko, Internet Explorer, and Opera, you need to set <strong>both</strong> the left margin and left padding of the <code><ul></code> element. We can ignore <code><li></code> altogether for these purposes. If you want to reproduce the default display in Netscape 6.x, you write:</p> + +<pre>ul {margin-left: 0; padding-left: 40px;}</pre> + +<p>If you're more interested in following the Internet Explorer/Opera model, then:</p> + +<pre>ul {margin-left: 40px; padding-left: 0;}</pre> + +<p>Of course, you can fill in your own preferred values. Set both to <code>1.25em</code>, if you like -- there's no reason why you have to stick with pixel-based indentation. If you want to reset lists to have no indentation, then you still have to zero out both padding and margin:</p> + +<pre>ul {margin-left: 0; padding-left: 0;}</pre> + +<p>Remember, though, that in so doing, you'll have the bullets hanging outside the list and its parent element. If the parent is the <code>body</code>, there's a strong chance your bullets will be completely outside the browser window, and thus will not be visible.</p> + +<h3 id="Conclusion" name="Conclusion">结论</h3> + +<p>In the end, we can see that none of the browsers mentioned in this article is right or wrong about how they lay out lists. They use different default styles, and that's where the problems creep in. By making sure you style both the left padding and left margin of lists, you can find much greater cross-browser consistency in your list indentation.</p> + +<h3 id="Recommendations" name="Recommendations">建议</h3> + +<ul> + <li><span style="line-height: 1.5em;">在你调整列表的缩进的时候，务必确认同时设置了 padding 和 margin.</span></li> +</ul> + +<div class="originaldocinfo"> +<h3 id="Original_Document_Information" name="Original_Document_Information">原始文档信息</h3> + +<ul> + <li>Author(s): Eric A. Meyer, Netscape Communications</li> + <li>Last Updated Date: Published 30 Aug 2002</li> + <li>Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li> + <li>Note: This reprinted article was originally part of the DevEdge site.</li> +</ul> +</div> + +<p>{{ languages( { "fr": "fr/Indentation_homog\u00e8ne_des_listes" } ) }}</p> diff --git a/files/zh-cn/web/css/css_lists_and_counters/using_css_counters/index.html b/files/zh-cn/web/css/css_lists_and_counters/using_css_counters/index.html new file mode 100644 index 0000000000..4a8fa17797 --- /dev/null +++ b/files/zh-cn/web/css/css_lists_and_counters/using_css_counters/index.html @@ -0,0 +1,120 @@ +--- +title: 使用CSS计数器 +slug: Web/Guide/CSS/Counters +tags: + - CSS + - CSS List + - Web + - counter + - 教程 +translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +--- +<div>{{CSSRef}}</div> + +<p>本质上CSS计数器是由CSS维护的变量，这些变量可能根据CSS规则增加以跟踪使用次数。这允许你根据文档位置来调整内容表现。 CSS计数器是CSS2.1中<a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">自动计数编号</a>部分的实现。</p> + +<p>计数器的值通过使用{{cssxref("counter-reset")}} 和 {{cssxref("counter-increment")}} 操作，在 <code><a href="/en-US/docs/CSS/content" title="CSS/content">content</a></code> 上应用 <code>counter()</code> 或 <code>counters()</code>函数来显示在页面上。</p> + +<h2 id="使用计数器">使用计数器</h2> + +<p>使用CSS计数器之前，必须<a href="/en-US/docs/CSS/counter-reset" title="CSS/counter-reset">重置</a>一个值，默认是0。使用{{cssxref("counter()")}}函数来给元素增加计数器。 下面的CSS给每个h3元素的前面增加了 "Section <em><计算器值></em>:"。</p> + +<pre class="brush: css">body { + counter-reset: section; /* 重置计数器成0 */ +} +h3:before { + counter-increment: section; /* 增加计数器值 */ + content: "Section " counter(section) ": "; /* 显示计数器 */ +} +</pre> + +<p>例如：</p> + +<pre class="brush: html"><h3>Introduction</h3> +<h3>Body</h3> +<h3>Conclusion</h3></pre> + +<p>{{ EmbedLiveSample('使用计数器', 300,200) }}</p> + +<h2 id="计数器嵌套">计数器嵌套</h2> + +<p>CSS计数器对创建有序列表特别有用，因为在子元素中会自动创建一个CSS计数器的实例。使用 <code>counters()</code> 函数，在不同级别的嵌套计数器之间可以插入字符串。比如这个CSS例子：</p> + +<pre class="brush: css">ol { + counter-reset: section; /* 为每个ol元素创建新的计数器实例 */ + list-style-type: none; +} +li:before { + counter-increment: section; /* 只增加计数器的当前实例 */ + content: counters(section, ".") " "; /* 为所有计数器实例增加以“.”分隔的值 */ +} +</pre> + +<p>结合下面的HTML：</p> + +<pre class="brush: html"><ol> + <li>item</li> <!-- 1 --> + <li>item <!-- 2 --> + <ol> + <li>item</li> <!-- 2.1 --> + <li>item</li> <!-- 2.2 --> + <li>item <!-- 2.3 --> + <ol> + <li>item</li> <!-- 2.3.1 --> + <li>item</li> <!-- 2.3.2 --> + </ol> + <ol> + <li>item</li> <!-- 2.3.1 --> + <li>item</li> <!-- 2.3.2 --> + <li>item</li> <!-- 2.3.3 --> + </ol> + </li> + <li>item</li> <!-- 2.4 --> + </ol> + </li> + <li>item</li> <!-- 3 --> + <li>item</li> <!-- 4 --> +</ol> +<ol> + <li>item</li> <!-- 1 --> + <li>item</li> <!-- 2 --> +</ol></pre> + +<p>结果为：</p> + +<p>{{ EmbedLiveSample('计数器嵌套') }}</p> + +<h2 id="Specifications" name="Specifications">规范</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("CSS3 Lists", "#auto-numbering", "CSS Counters")}}</td> + <td>{{Spec2("CSS3 Lists")}}</td> + <td>无变化</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'generate.html#generate.html#counters', 'counter-reset')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>初始定义</td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">其它</h2> + +<ul> + <li><a href="/en-US/docs/CSS/counter-reset" title="CSS/counter-reset">counter-reset</a></li> + <li><a href="/en-US/docs/CSS/counter-increment" title="CSS/counter-increment">counter-increment</a></li> +</ul> + +<p><em>另一个可用的示例在 <a class="external" href="http://www.mezzoblue.com/archives/2006/11/01/counter_intu/" rel="freelink">http://www.mezzoblue.com/archives/20.../counter_intu/</a>。这篇博客 发布于2006年11月1日，但是看上去写得还是准确的。</em></p> + +<div id="xunlei_com_thunder_helper_plugin_d462f475-c18e-46be-bd10-327458d045bd"> </div> 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_concepts/index.html index cfce90ff34..cfce90ff34 100644 --- a/files/zh-cn/web/css/css_logical_properties/basic_conceptsjie/index.html +++ b/files/zh-cn/web/css/css_logical_properties/basic_concepts/index.html diff --git a/files/zh-cn/web/css/css_logical_properties/浮动和定位/index.html b/files/zh-cn/web/css/css_logical_properties/floating_and_positioning/index.html index b96f3f6c88..b96f3f6c88 100644 --- a/files/zh-cn/web/css/css_logical_properties/浮动和定位/index.html +++ b/files/zh-cn/web/css/css_logical_properties/floating_and_positioning/index.html diff --git a/files/zh-cn/web/css/css_positioning/understanding_z_index/adding_z-index/index.html b/files/zh-cn/web/css/css_positioning/understanding_z_index/adding_z-index/index.html new file mode 100644 index 0000000000..acd3b034ce --- /dev/null +++ b/files/zh-cn/web/css/css_positioning/understanding_z_index/adding_z-index/index.html @@ -0,0 +1,158 @@ +--- +title: Adding z-index +slug: Web/Guide/CSS/Understanding_z_index/Adding_z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index +--- +<p>« <a href="/en/CSS" title="CSS">CSS</a> «<a href="/en/CSS/Understanding_z-index" style="font-size: 14px; line-height: 1.5;" title="Understanding CSS z-index"><span class="title" style="display: inline !important;">理解z-index</span></a></p> +<h3 id="使用_cssxref(z-index)">使用 {{ cssxref("z-index") }}</h3> +<p>在第一个例子 <a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a>中， 我们描述了默认的摆放顺序。 当你需要指定不同的排列顺序时， 只要给元素指定一个z-index的数值就可以了。 </p> +<p> </p> +<p><span style="font-size: 14px; line-height: 1.5;">该属性必须是整数(正负均可)， 它体现了元素在z轴的位置。 如果你对z轴体系不了解， 你也可以把它理解成“层叠”， 每个层都有一个顺序数， 顺序数大的层在上面， 小的在下面。 </span></p> +<p><strong>注意！z-index只对指定了</strong> <a href="/en/CSS/position" title="position">positioned</a><strong>属性的元素有效。</strong></p> +<ul> + <li><em>底层: 距离观察者最远</em></li> + <li>...</li> + <li> -3 层</li> + <li> -2 层</li> + <li> -1 层</li> + <li> 0 层 <em>默认层</em></li> + <li> 1 层</li> + <li> 2 层</li> + <li> 3 层</li> + <li>...</li> + <li><em>顶部: 最接近观察者</em></li> +</ul> +<div class="note"> + <p><strong>注释:</strong></p> + <ul> + <li>当没有指定z-index的时候， 所有元素都在会被渲染在默认层(0层)</li> + <li>当多个元素的z-index属性相同的时候(在同一个层里面)，那么将按照 <a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="Stacking without z-index">Stacking without z-index</a> 中描述的规则进行布局。 </li> + </ul> +</div> +<p>在下一个例子中， 所有的层都是用z-index进行排序的。 元素div#5 的z-index无效， 因为他没有被指定position属性。 </p> +<p><img alt="Example of stacking rules modified using z-index" class="internal" src="/@api/deki/files/912/=Understanding_zindex_03.png"></p> +<h3 id="Example_source_code"><strong>Example source code</strong></h3> +<pre class="brush: html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html> +<head><style type="text/css"> + +div { + opacity: 0.7; + font: 12px Arial; +} + +span.bold { font-weight: bold; } + +#normdiv { + z-index: 8; + height: 70px; + border: 1px dashed #999966; + background-color: #ffffcc; + margin: 0px 50px 0px 50px; + text-align: center; +} + +#reldiv1 { + z-index: 3; + height: 100px; + position: relative; + top: 30px; + border: 1px dashed #669966; + background-color: #ccffcc; + margin: 0px 50px 0px 50px; + text-align: center; +} + +#reldiv2 { + z-index: 2; + height: 100px; + position: relative; + top: 15px; + left: 20px; + border: 1px dashed #669966; + background-color: #ccffcc; + margin: 0px 50px 0px 50px; + text-align: center; +} + +#absdiv1 { + z-index: 5; + position: absolute; + width: 150px; + height: 350px; + top: 10px; + left: 10px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; +} + +#absdiv2 { + z-index: 1; + position: absolute; + width: 150px; + height: 350px; + top: 10px; + right: 10px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; +} + +</style></head> + +<body> + +<br /><br /> + +<div id="absdiv1"> + <br /><span class="bold">DIV #1</span> + <br />position: absolute; + <br />z-index: 5; +</div> + +<div id="reldiv1"> + <br /><span class="bold">DIV #2</span> + <br />position: relative; + <br />z-index: 3; +</div> + +<div id="reldiv2"> + <br /><span class="bold">DIV #3</span> + <br />position: relative; + <br />z-index: 2; +</div> + +<div id="absdiv2"> + <br /><span class="bold">DIV #4</span> + <br />position: absolute; + <br />z-index: 1; +</div> + +<div id="normdiv"> + <br /><span class="bold">DIV #5</span> + <br />no positioning + <br />z-index: 8; +</div> + +</body></html> +</pre> +<h3 id="See_also">See also</h3> +<ul> + <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : Default stacking rules</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : How floating elements are handled</li> + <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level</li> +</ul> +<div class="originaldocinfo"> + <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> + <ul> + <li>Author(s): Paolo Lombardi</li> + <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> + <li>Last Updated Date: July 9th, 2005</li> + </ul> +</div> +<p>{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Ajout_de_z-index" } ) }}</p> diff --git a/files/zh-cn/web/css/css_positioning/understanding_z_index/index.html b/files/zh-cn/web/css/css_positioning/understanding_z_index/index.html new file mode 100644 index 0000000000..19f49650d1 --- /dev/null +++ b/files/zh-cn/web/css/css_positioning/understanding_z_index/index.html @@ -0,0 +1,47 @@ +--- +title: 理解CSS的 z-index属性 +slug: Web/Guide/CSS/Understanding_z_index +tags: + - CSS + - Guide +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index +--- +<p>{{cssref}}</p> + +<p><span style="line-height: inherit;">通常情况下，<a href="/zh-CN/docs/Glossary/HTML">HTML</a>页面可以被认为是二维的，因为文本，图像和其他元素被排列在页面上而不重叠。在这种情况下，只有一个渲染进程，所有元素都知道其他元素所占用的空间。 </span>{{cssxref("z-index")}}<span style="line-height: inherit;">属性可让你在渲染内容时调整对象分层的顺序。</span></p> + +<blockquote> +<p><em>在 CSS 2.1 中, 所有的盒模型元素都处于三维坐标系中。 除了我们常用的横坐标和纵坐标， 盒模型元素还可以沿着“z 轴”层叠摆放， 当他们相互覆盖时， z 轴顺序就变得十分重要。</em></p> +</blockquote> + +<p>(参见 <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#z-index">CSS 2.1 Section 9.9.1 - Layered presentation</a>)</p> + +<p>这意味着其实 CSS 允许你在现有的渲染引擎上层叠的摆放盒模型元素。 所有的层都可以用一个整数( z 轴顺序)来表明当前层在 z 轴的位置。 数字越大， 元素越接近观察者。Z 轴顺序用 CSS 的 <span style="line-height: inherit;">{{ cssxref("z-index") }} 属性来指定。</span></p> + +<p>使用 <code>z-index</code> 很简单： 给它指定一个整数值即可。 然而，在层叠比较复杂的 HTML 元素上使用 <code>z-index</code> 时，结果可能让人觉得困惑，甚至不可思议。 这是由复杂的元素排布规则导致的。 更多细节请参见 <span style="line-height: inherit;"> </span><a class="external" href="http://www.w3.org/TR/CSS21/zindex.html" style="line-height: inherit;">CSS-2.1 Appendix E</a> 。</p> + +<p>本文将通过一些简单的例子来解释这些规则。</p> + +<ol> + <li><a href="/zh-CN/docs/Web/Guide/CSS/Understanding_z_index/Stacking_without_z-index" title="zh-CN/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : 默认的摆放规则，即不含有 z-index 属性时</li> + <li><a href="/zh-CN/CSS/Understanding_z-index/Stacking_and_float" title="zh-CN/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : 浮动元素的处理方式</li> + <li><a href="/zh-CN/CSS/Understanding_z-index/Adding_z-index" title="zh-CN/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : 使用 z-index 来改变堆放顺序</li> + <li><a href="/zh-CN/CSS/Understanding_z-index/The_stacking_context" title="zh-CN/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : 内容堆放注意事项</li> + <li><a href="/zh-TW/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1" title="zh-CN/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 在两层元素的第二层上使用 z-index</li> + <li><a href="/zh-CN/docs/Web/Guide/CSS/Understanding_z_index/Stacking_context_example_2" title="zh-CN/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 在两层元素的所有层上使用 z-index</li> + <li><a href="/zh-CN/docs/Web/Guide/CSS/Understanding_z_index/Stacking_context_example_3" title="zh-CN/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 在三层元素的第二层上使用 z-index</li> +</ol> + +<div class="originaldocinfo"> +<p> </p> + +<h2 id="Original_Document_Information" name="Original_Document_Information">原始文档信息</h2> + +<p> </p> + +<ul> + <li>作者: Paolo Lombardi</li> + <li>This article is the English translation of an article I wrote in Italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> + <li>上次更新时间: 2005年7月9日</li> +</ul> +</div> diff --git a/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html b/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html new file mode 100644 index 0000000000..9312c1759d --- /dev/null +++ b/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html @@ -0,0 +1,158 @@ +--- +title: 层叠与浮动 +slug: Web/Guide/CSS/Understanding_z_index/Stacking_and_float +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float +--- +<p>« <a href="/zh-CN/CSS" title="CSS">CSS</a> « <a href="/zh-CN/CSS/Understanding_z-index" title="Understanding CSS z-index"><span class="title">理解 CSS 中的 z-index</span></a></p> + +<h3 id="层叠与浮动">层叠与浮动</h3> + +<p>对于浮动的块元素来说，层叠顺序变得有些不同。浮动块元素被放置于非定位块元素与定位块元素之间：</p> + +<ol> + <li>根元素的背景与边框</li> + <li>位于普通流中的后代块元素按照它们在 HTML 中出现的顺序层叠</li> + <li>浮动块元素</li> + <li>后代中的定位元素按照它们在 HTML 中出现的顺序层叠</li> +</ol> + +<p>实际上，在接下来的例子中你会看到，非定位块元素(DIV #4)的背景与边框丝毫不会受到浮动块元素的影响，但内容却恰恰相反。出现这种情况是由于 CSS 的标准浮动行为引起的。</p> + +<p>这种行为可以通过前一章列表的改进版本来解释：</p> + +<ol> + <li>根元素的背景与边框</li> + <li>位于普通流中的后代块元素按照它们在 HTML 中出现的顺序层叠</li> + <li>浮动块元素</li> + <li>常规流中的后代行内元素</li> + <li>后代中的定位元素按照它们在 HTML 中出现的顺序层叠</li> +</ol> + +<div class="note"><strong>注意：</strong> 在下面的例子中，除了非定位的那个块元素外，所有的块元素都是半透明的，以便来显示层叠顺序。如果减少非定位元素(DIV #4)的透明度，会发生很诡异的事情：该元素的背景和边框会出现在浮动块元素上方，但是仍然处于定位元素的下方。我不能确定这是规范的 bug 或是怪异的解析。(设置透明度会隐式的创建一个层叠上下文。)</div> + +<p>{{ EmbedLiveSample('该示例的源码', '563', '255', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_and_float') }}</p> + +<h3 id="该示例的源码"><strong>该示例的源码</strong></h3> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <meta charset="UTF-8"> + <title>Stacking and float</title> + <style type="text/css"> + + div { + font: 12px Arial; + } + + span.bold { font-weight: bold; } + + #absdiv1 { + position: absolute; + width: 150px; + height: 200px; + top: 10px; + right: 140px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; + } + + #normdiv { + /* opacity: 0.7; */ + height: 100px; + border: 1px dashed #999966; + background-color: #ffffcc; + margin: 0px 10px 0px 10px; + text-align: left; + } + + #flodiv1 { + margin: 0px 10px 0px 20px; + float: left; + width: 150px; + height: 200px; + border: 1px dashed #009900; + background-color: #ccffcc; + text-align: center; + } + + #flodiv2 { + margin: 0px 20px 0px 10px; + float: right; + width: 150px; + height: 200px; + border: 1px dashed #009900; + background-color: #ccffcc; + text-align: center; + } + + #absdiv2 { + position: absolute; + width: 150px; + height: 100px; + top: 130px; + left: 100px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; + } + +</style> +</head> + +<body> + <br /><br /> + + <div id="absdiv1"> + <br /><span class="bold">DIV #1</span> + <br />position: absolute; + </div> + + <div id="flodiv1"> + <br /><span class="bold">DIV #2</span> + <br />float: left; + </div> + + <div id="flodiv2"> + <br /><span class="bold">DIV #3</span> + <br />float: right; + </div> + + <br /> + + <div id="normdiv"> + <br /><span class="bold">DIV #4</span> + <br />no positioning + </div> + + <div id="absdiv2"> + <br /><span class="bold">DIV #5</span> + <br />position: absolute; + </div> +</body> +</html> +</pre> + +<h3 id="相关链接">相关链接</h3> + +<ul> + <li><a href="/zh-CN/CSS/Understanding_z-index/Stacking_without_z-index" title="zh-CN/CSS/Understanding_z-index/Stacking_without_z-index">未使用 z-index 的层叠</a>：默认层叠规则</li> + <li><a href="/zh-CN/CSS/Understanding_z-index/Adding_z-index" title="zh-CN/CSS/Understanding_z-index/Adding_z-index">使用 z-index 的层叠</a>： 使用 z-index 来改变默认层叠顺序</li> + <li><a href="/zh-CN/CSS/Understanding_z-index/The_stacking_context" title="zh-CN/CSS/Understanding_z-index/The_stacking_context">层叠上下文</a>：关于层叠上下文的注意事项</li> + <li><a href="/zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1" title="zh-CN/CSS/Understanding_z-index/Stacking_context_example_1">层叠上下文示例 1</a>：两层嵌套标签的 HTML 中，z-index 作用在内层标签上</li> + <li><a href="/zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2" title="zh-CN/CSS/Understanding_z-index/Stacking_context_example_2">层叠上下文示例 2</a>：两层嵌套标签的 HTML 中，z-index 作用在内外层标签上</li> + <li><a href="/zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3" title="zh-CN/CSS/Understanding_z-index/Stacking_context_example_3">层叠上下文示例 3</a>：三层嵌套标签的 HTML 中，z-index 作用在中间层标签上</li> +</ul> + +<div class="originaldocinfo"> +<h3 id="Original_Document_Information" name="Original_Document_Information">原始文档信息</h3> + +<ul> + <li>作者: Paolo Lombardi</li> + <li>该文档的英文原始版本是从我为 <a class="external" href="http://www.yappy.it">YappY</a> 写的意大利文章翻译而来的，该文章版权为 <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> + <li>上次更新于：2014 年 11 月 3 日</li> +</ul> +</div> + +<p> </p> diff --git a/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html b/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html new file mode 100644 index 0000000000..59f298d269 --- /dev/null +++ b/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html @@ -0,0 +1,133 @@ +--- +title: Stacking context example 1 +slug: Web/Guide/CSS/Understanding_z_index/Stacking_context_example_1 +tags: + - 理解_CSS_z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 +--- +<p>« <a href="/en/CSS" title="CSS">CSS</a> « <a href="/en/CSS/Understanding_z-index" title="Understanding CSS z-index">Understanding CSS z-index</a></p> + +<h3 id="Stacking_context_层叠上下文_例子_1">Stacking context 层叠上下文 例子 1</h3> + +<p>先看一个基础的例子。在根元素的层叠上下文中，有两个都是相对定位且没有设置 <code>z-index</code> 属性的 DIV（DIV #1 和 DIV #3）。在 DIV #1 中有一个绝对定位的 DIV #2，而在 DIV #3 中有一个绝对定位的 DIV #4，DIV #2 和 DIV #4 也都没有设置 <code>z-index</code> 属性。</p> + +<p>现在唯一的层叠上下文就是根元素的上下文。因为没有 <code>z-index</code> 值，所有的元素按照出现（在 HTML 中）的顺序层叠。</p> + +<p><img alt="Stacking context example 1" class="internal" src="/@api/deki/files/914/=Understanding_zindex_05a.png"></p> + +<p>如果给 DIV #2 设置一个正的 <code>z-index</code> 值 (不能是 <code>0</code> 或 <code>auto</code>) ，那么 DIV #2 会渲染在其他所有 DIV 之上。</p> + +<p><img alt="Stacking context example 1" class="internal" src="/@api/deki/files/915/=Understanding_zindex_05b.png"></p> + +<p>然后如果给 DIV #4 也设置一个正的 <code>z-index</code> 值，且这个值比给的 DIV #2 设置的值要大，则 DIV #4 会渲染在其他所有 DIV（包括 DIV #2）之上。</p> + +<p><img alt="Stacking context example 1" class="internal" src="/@api/deki/files/916/=Understanding_zindex_05c.png"></p> + +<p>在这个列子中，DIV #2 和 DIV #4 不是兄弟关系（因为它们的父元素不同）。即便如此，我们也可以通过 <code>z-index</code> 来控制 DIV #4 和 DIV #2 的层叠关系。这是因为，DIV #1 和 DIV #3 没有设置 <code>z-index</code> 的值，所以它们不会创建层叠上下文。这就意味着 DIV #1 和 DIV #3 的所有内容（包括 DIV #2 和 DIV #4）都属于同一个层叠上下文（即根元素的层叠上下文）。</p> + +<p>就层叠上下文而言，DIV #1 和 DIV #3 隶属于根元素，因此层次结构如下所示：</p> + +<ul> + <li>根层叠上下文（root stacking context） + <ul> + <li>DIV #2 (z-index 1)</li> + <li>DIV #4 (z-index 2)</li> + </ul> + </li> +</ul> + +<div class="note"><strong>注意：</strong> DIV #1 和 DIV #3 不是透明的。记住所有设置了 opacity 小于 1 的定位元素都会隐式地生成一个层叠上下文（和给元素增加一个 z-index 值的效果相同）。上述的例子是为了说明，当父元素没有生成一个层叠上下文环境的时候，各元素是怎么层叠的。</div> + +<h2 id="Example"><strong>Example</strong></h2> + +<h3 id="HTML"><strong>HTML</strong></h3> + +<pre class="brush: html"><div id="div1"> +<br /><span class="bold">DIV #1</span> +<br />position: relative; + <div id="div2"> + <br /><span class="bold">DIV #2</span> + <br />position: absolute; + <br />z-index: 1; + </div> +</div> + +<br /> + +<div id="div3"> +<br /><span class="bold">DIV #3</span> +<br />position: relative; + <div id="div4"> + <br /><span class="bold">DIV #4</span> + <br />position: absolute; + <br />z-index: 2; + </div> +</div> + +</body></html> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.bold { + font-weight: bold; + font: 12px Arial; +} +#div1, +#div3 { + height: 80px; + position: relative; + border: 1px dashed #669966; + background-color: #ccffcc; + padding-left: 5px; +} +#div2 { + opacity: 0.8; + z-index: 1; + position: absolute; + width: 150px; + height: 200px; + top: 20px; + left: 170px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; +} +#div4 { + opacity: 0.8; + z-index: 2; + position: absolute; + width: 200px; + height: 70px; + top: 65px; + left: 50px; + border: 1px dashed #000099; + background-color: #ddddff; + text-align: left; + padding-left: 10px; +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1') }}</p> + +<h3 id="See_also">See also</h3> + +<ul> + <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : Default stacking rules</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : How floating elements are handled</li> + <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Using z-index to change default stacking</li> + <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level<span id="cke_bm_89E" style="display: none;"> </span></li> +</ul> + +<div class="originaldocinfo"> +<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> + +<ul> + <li>Author(s): Paolo Lombardi</li> + <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> + <li>Last Updated Date: July 9th, 2005</li> +</ul> +</div> diff --git a/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html b/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html new file mode 100644 index 0000000000..3c21bef062 --- /dev/null +++ b/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html @@ -0,0 +1,142 @@ +--- +title: Stacking context example 2 +slug: Web/Guide/CSS/Understanding_z_index/Stacking_context_example_2 +tags: + - CSS + - 理解css的index属性 + - 高级 +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 +--- +<p>« <a href="/en/CSS" title="CSS">CSS</a> «<a href="/en/CSS/Understanding_z-index" title="Understanding CSS z-index"> 理解CSS z-index</a></p> + +<h3 id="层叠上下文示例_2">层叠上下文示例 2</h3> + +<p>这是一个非常简单的例子, 但它是理解层叠上下文这个概念的关键。还是和之前的例子中一样的四个DIV，不过现在z-index属性被分配在两个水平的层次结构中。</p> + +<p>{{ EmbedLiveSample('Example_source_code', '352', '270', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_context_example_2') }}</p> + +<p>可以看到现在DIV #2 (z-index: 2)在DIV #3 (z-index: 1)的上面，因为他们都属于同一个层叠上下文（根元素创建的层叠上下文），所以z-index的值决定了元素如何叠放。</p> + +<p>奇怪的是DIV #2 (z-index: 2)在DIV #4 (z-index: 10)的上面，尽管DIV #2的z-index值小于DIV #4。原因在于它们不属于同一个层叠上下文。DIV #4处于DIV #3所创建的层叠上下文中，而整个DIV #3（包含其后代元素）是在DIV #2下面的。</p> + +<p>为了更好的理解这种情况, 这里列出了层叠上下文的层次结构:</p> + +<ul> + <li>根上下文（root stacking context） + <ul> + <li>DIV #2 (z-index 2)</li> + <li>DIV #3 (z-index 1) + <ul> + <li>DIV #4 (z-index 10)</li> + </ul> + </li> + </ul> + </li> +</ul> + +<div class="note"><strong>Note:</strong> 值得记住的是，通常HTML的层次结构和层叠上下文的层次结构是不同的。在层叠上下文的层次结构中，没有创建层叠上下文的元素同其父级处于一个层叠上下文。</div> + +<h3 id="示例源码"><strong>示例源码</strong></h3> + +<pre class="brush: html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html> +<head><style type="text/css"> + +div { font: 12px Arial; } + +span.bold { font-weight: bold; } + +#div2 { z-index: 2; } +#div3 { z-index: 1; } +#div4 { z-index: 10; } + +#div1,#div3 { + height: 80px; + position: relative; + border: 1px dashed #669966; + background-color: #ccffcc; + padding-left: 5px; +} + +#div2 { + opacity: 0.8; + position: absolute; + width: 150px; + height: 200px; + top: 20px; + left: 170px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; +} + +#div4 { + opacity: 0.8; + position: absolute; + width: 200px; + height: 70px; + top: 65px; + left: 50px; + border: 1px dashed #000099; + background-color: #ddddff; + text-align: left; + padding-left: 10px; +} + + +</style></head> + +<body> + + <br /> + + <div id="div1"><br /> + <span class="bold">DIV #1</span><br /> + position: relative; + <div id="div2"><br /> + <span class="bold">DIV #2</span><br /> + position: absolute;<br /> + z-index: 2; + </div> + </div> + + <br /> + + <div id="div3"><br /> + <span class="bold">DIV #3</span><br /> + position: relative;<br /> + z-index: 1; + <div id="div4"><br /> + <span class="bold">DIV #4</span><br /> + position: absolute;<br /> + z-index: 10; + </div> + </div> + +</body> +</html> +</pre> + +<h3 id="相关文章">相关文章</h3> + +<ul> + <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : Default stacking rules</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : How floating elements are handled</li> + <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Using z-index to change default stacking</li> + <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level</li> +</ul> + +<div class="originaldocinfo"> +<h3 id="Original_Document_Information" name="Original_Document_Information">原文信息</h3> + +<ul> + <li>Author(s): Paolo Lombardi</li> + <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> + <li>Last Updated Date: July 9th, 2005</li> +</ul> +</div> + +<p> </p> diff --git a/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html b/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html new file mode 100644 index 0000000000..f7d2972c7c --- /dev/null +++ b/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html @@ -0,0 +1,190 @@ +--- +title: Stacking context example 3 +slug: Web/Guide/CSS/Understanding_z_index/Stacking_context_example_3 +tags: + - CSS + - 层叠上下文 + - 理解css的z-index属性 +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 +--- +<p>« <a href="/en/CSS" title="CSS">CSS</a> « <a href="/en/CSS/Understanding_z-index" title="Understanding CSS z-index">Understanding CSS z-index</a></p> + +<h3 id="层叠上下文示例_3">层叠上下文示例 3</h3> + +<p>最后一个例子展示了，在多层级的HTML结构中混合了多个定位元素且使用类选择器设置z-index属性时出现的问题。</p> + +<p>我们来看一个用多个定位的div实现的三级菜单的例子，二级菜单和三级菜单在鼠标悬停或点击其父元素时才出现，通常这样的菜单在客户端和服务端都是由脚本生成的，所以样式规则不是通过ID选择器设置而是通过类选择器设置。</p> + +<p>如果这个三级菜单有部分区域重叠，管理层叠顺序就会成为一个问题。</p> + +<p>{{ EmbedLiveSample('Example_source_code', '320', '330', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_context_example_3') }}</p> + + + +<p>一级菜单仅仅是相对定位，所以没有创建层叠上下文。</p> + +<p>二级菜单相对其父元素（一级菜单）绝对定位，要使二级菜单在所有一级菜单的上方，则需要使用z-index。此时每个二级菜单都创建了一个层叠上下文，而三级菜单也处于其父元素（二级菜单）创建的上下文中。</p> + +<p>这样一来，在HTML结构中处于三级菜单后面的二级菜单，则会显示在三级菜单的上方，因为所有的二级菜单都使用了同样的z-index值，所以处于同一个层叠上下文中。</p> + +<p>为了能更好地理解这种情况，这里列出了层叠上下文的层次结构:</p> + +<ul> + <li>root stacking context + <ul> + <li>LEVEL #1 + <ul> + <li>LEVEL #2 (z-index: 1) + <ul> + <li>LEVEL #3</li> + <li>...</li> + <li>LEVEL #3</li> + </ul> + </li> + <li>LEVEL #2 (z-index: 1)</li> + <li>...</li> + <li>LEVEL #2 (z-index: 1)</li> + </ul> + </li> + <li>LEVEL #1</li> + <li>...</li> + <li>LEVEL #1</li> + </ul> + </li> +</ul> + +<p>可以通过移除不同级别的菜单之间的重叠，或者使用ID选择器指定独立的（不同的）z-index值，或者减少HTML的层级来解决这个问题。</p> + +<div class="note"><strong>Note:</strong> 在源码中你会看到三级菜单和二级菜单是由一个绝对定位元素包含很多div来实现的，这种方式在需要同时定位一组元素时很有用。</div> + +<h3 id="示例源码"><strong>示例源码</strong></h3> + +<pre class="brush: html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html> +<head><style type="text/css"> + +div { font: 12px Arial; } + +span.bold { font-weight: bold; } + +div.lev1 { + width: 250px; + height: 70px; + position: relative; + border: 2px outset #669966; + background-color: #ccffcc; + padding-left: 5px; +} + +#container1 { + z-index: 1; + position: absolute; + top: 30px; + left: 75px; +} + +div.lev2 { + opacity: 0.9; + width: 200px; + height: 60px; + position: relative; + border: 2px outset #990000; + background-color: #ffdddd; + padding-left: 5px; +} + +#container2 { + z-index: 1; + position: absolute; + top: 20px; + left: 110px; +} + +div.lev3 { + z-index: 10; + width: 100px; + position: relative; + border: 2px outset #000099; + background-color: #ddddff; + padding-left: 5px; +} + +</style></head> + +<body> + +<br /> + +<div class="lev1"> +<span class="bold">LEVEL #1</span> + + <div id="container1"> + + <div class="lev2"> + <br /><span class="bold">LEVEL #2</span> + <br />z-index: 1; + + <div id="container2"> + + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + + </div> + + </div> + + <div class="lev2"> + <br /><span class="bold">LEVEL #2</span> + <br />z-index: 1; + </div> + + </div> +</div> + +<div class="lev1"> +<span class="bold">LEVEL #1</span> +</div> + +<div class="lev1"> +<span class="bold">LEVEL #1</span> +</div> + +<div class="lev1"> +<span class="bold">LEVEL #1</span> +</div> + +</body></html> +</pre> + +<h3 id="相关文章">相关文章</h3> + +<ul> + <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : Default stacking rules</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : How floating elements are handled</li> + <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Using z-index to change default stacking</li> + <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li> +</ul> + +<div class="originaldocinfo"> +<h3 id="Original_Document_Information" name="Original_Document_Information">原文信息</h3> + +<ul> + <li>Author(s): Paolo Lombardi</li> + <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> + <li>Last Updated Date: July 9th, 2005</li> +</ul> +</div> + +<p><strong>Note</strong>: the reason the sample image looks wrong - with the second level 2 overlapping the level 3 menus - is because level 2 has opacity, which creates a new stacking context. Basically, this whole sample page is incorrect and misleading.</p> diff --git a/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html b/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html new file mode 100644 index 0000000000..a5aaebdc95 --- /dev/null +++ b/files/zh-cn/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html @@ -0,0 +1,161 @@ +--- +title: Stacking without z-index +slug: Web/Guide/CSS/Understanding_z_index/Stacking_without_z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index +--- +<p style="height: 15px;">« <a href="/zh-CN/CSS" title="CSS">CSS</a> « <a href="/zh-CN/CSS/Understanding_z-index" title="Understanding CSS z-index"><span class="title">理解 CSS z-index</span></a></p> + +<h3 id="不含z-index的堆叠">不含z-index的堆叠</h3> + +<p>当没有元素包含z-index属性时，元素按照如下顺序堆叠（从底到顶顺序）：</p> + +<ol> + <li>根元素的背景和边界</li> + <li>普通流(无定位)里的块元素(没有position或者position:static;)按HTML中的出现顺序堆叠</li> + <li>定位元素按HTML中的出现顺序堆叠</li> +</ol> + +<p>在接下来的例子中，相对和绝对定位的块元素的大小和位置刚好说明上述堆叠规则。</p> + +<div class="note"> +<p><strong>Notes:</strong></p> + +<ul> + <li>在一组由不含有任何z-index属性的同类元素，如例子中的定位块元素（DIV #1 至 #4），这些元素按照它们在HTML结构中出现的顺序堆叠，而不管它们的定位属性如何。</li> + <li> + <p>普通流中不含有定位属性的标准块元素（DIV #5）始终先于定位元素渲染并出现在定位元素的下层，即便它们在HTML结构中出现的位置晚于定位元素也是如此。</p> + </li> +</ul> +</div> + +<p><img alt="understanding_zindex_01.png" class="default internal" src="/@api/deki/files/910/=understanding_zindex_01.png"></p> + +<p> </p> + +<h3 id="Example" name="Example">示例</h3> + +<pre class="brush: html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html> +<head><style type="text/css"> + +div { + font: 12px Arial; +} + +span.bold { font-weight: bold; } + +#normdiv { + height: 70px; + border: 1px dashed #999966; + background-color: #ffffcc; + margin: 0px 50px 0px 50px; + text-align: center; +} + +#reldiv1 { + opacity: 0.7; + height: 100px; + position: relative; + top: 30px; + border: 1px dashed #669966; + background-color: #ccffcc; + margin: 0px 50px 0px 50px; + text-align: center; +} + +#reldiv2 { + opacity: 0.7; + height: 100px; + position: relative; + top: 15px; + left: 20px; + border: 1px dashed #669966; + background-color: #ccffcc; + margin: 0px 50px 0px 50px; + text-align: center; +} + +#absdiv1 { + opacity: 0.7; + position: absolute; + width: 150px; + height: 350px; + top: 10px; + left: 10px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; +} + +#absdiv2 { + opacity: 0.7; + position: absolute; + width: 150px; + height: 350px; + top: 10px; + right: 10px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; +} + +</style></head> + +<body> + +<br /><br /> + +<div id="absdiv1"> + <br /><span class="bold">DIV #1</span> + <br />position: absolute; +</div> + +<div id="reldiv1"> + <br /><span class="bold">DIV #2</span> + <br />position: relative; +</div> + +<div id="reldiv2"> + <br /><span class="bold">DIV #3</span> + <br />position: relative; +</div> + +<div id="absdiv2"> + <br /><span class="bold">DIV #4</span> + <br />position: absolute; +</div> + +<div id="normdiv"> + <br /><span class="bold">DIV #5</span> + <br />no positioning +</div> + +</body></html> + +</pre> + +<h3 id="See_also">See also</h3> + +<ul> + <li><a href="/zh-CN/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">堆叠与浮动</a> : 浮动元素的处理方式</li> + <li><a href="/zh-CN/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">增加 z-index</a> : 使用z-index来改变堆放顺序</li> + <li><a href="/zh-CN/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">堆叠上下文</a> : 堆叠上下文的注意事项</li> + <li><a href="/zh-CN/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">堆叠上下文示例 1</a> : 在两层元素的第二层上使用 z-index</li> + <li><a href="/zh-CN/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">堆叠上下文示例 2</a> : 在两层元素的所有层上使用 z-index</li> + <li><a href="/zh-CN/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">堆叠上下文示例 3</a> : 在三层元素的第二层上使用 z-index<span id="cke_bm_94E" style="display: none;"> </span></li> +</ul> + +<p> </p> + +<div class="originaldocinfo"> +<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> + +<ul> + <li>Author(s): Paolo Lombardi</li> + <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> + <li>Last Updated Date: July 9th, 2005</li> +</ul> +</div> + +<p>{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Empilement_sans_z-index" } ) }}</p> diff --git a/files/zh-cn/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html b/files/zh-cn/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html new file mode 100644 index 0000000000..6d96e3e198 --- /dev/null +++ b/files/zh-cn/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html @@ -0,0 +1,240 @@ +--- +title: 层叠上下文 +slug: Web/Guide/CSS/Understanding_z_index/The_stacking_context +tags: + - Advanced + - CSS + - CSS层叠上下文 + - z-index + - 教程 +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +--- +<div>{{cssref}}</div> + +<p>我们假定用户正面向（浏览器）视窗或网页，而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开，<strong>层叠上下文</strong>就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性按照优先级顺序占据这个空间。</p> + +<h2 id="层叠上下文">层叠上下文</h2> + +<p>在本篇之前的部分——<a href="/en-US/docs/CSS/Understanding_z-index/Adding_z-index" style="line-height: 1.5;" title="Adding z-index">运用 z-index</a><span style="line-height: 1.5;">，（我们认识到）某些元素</span><span style="line-height: 1.5;">的渲染顺序是由其 <code>z-index</code> 的值影响的。</span>这是因为这些元素具有能够使他们形成一个<em>层叠上下文</em>的特殊属性<em>。</em></p> + +<p>文档中的层叠上下文由满足以下任意一个条件的元素形成：</p> + +<ul> + <li>文档根元素（<code><html></code>）；</li> + <li>{{cssxref("position")}} 值为 <code>absolute</code>（绝对定位）或 <code>relative</code>（相对定位）且 {{cssxref("z-index")}} 值不为 <code>auto</code> 的元素；</li> + <li>{{cssxref("position")}} 值为 <code>fixed</code>（固定定位）或 <code>sticky</code>（粘滞定位）的元素（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）；</li> + <li>flex ({{cssxref("flexbox")}}) 容器的子元素，且 {{cssxref("z-index")}} 值不为 <code>auto</code>；</li> + <li>grid ({{cssxref("grid")}}) 容器的子元素，且 {{cssxref("z-index")}} 值不为 <code>auto</code>；</li> + <li>{{cssxref("opacity")}} 属性值小于 <code>1</code> 的元素（参见 <a href="http://www.w3.org/TR/css3-color/#transparency" title="http://www.w3.org/TR/css3-color/#transparency">the specification for opacity</a>）；</li> + <li>{{cssxref("mix-blend-mode")}} 属性值不为 <code>normal</code> 的元素；</li> + <li>以下任意属性值不为 <code>none</code> 的元素： + <ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("filter")}}</li> + <li>{{cssxref("perspective")}}</li> + <li>{{cssxref("clip-path")}}</li> + <li>{{cssxref("mask")}} / {{cssxref("mask-image")}} / {{cssxref("mask-border")}}</li> + </ul> + </li> + <li>{{cssxref("isolation")}} 属性值为 <code>isolate</code> 的元素；</li> + <li>{{cssxref("-webkit-overflow-scrolling")}} 属性值为 <code>touch</code> 的元素；</li> + <li>{{cssxref("will-change")}} 值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素（参考<a href="http://dev.opera.com/articles/css-will-change-property/">这篇文章</a>）；</li> + <li>{{cssxref("contain")}} 属性值为 <code>layout</code>、<code>paint</code> 或包含它们其中之一的合成值（比如 <code>contain: strict</code>、<code>contain: content</code>）的元素。</li> +</ul> + +<p>在层叠上下文中，子元素同样也按照上面解释的规则进行层叠。 重要的是，其子级层叠上下文的 <code>z-index</code> 值只在父级中才有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元。</p> + +<p>总结:</p> + +<ul> + <li>层叠上下文可以包含在其他层叠上下文中，并且一起创建一个层叠上下文的层级。</li> + <li>每个层叠上下文都完全独立于它的兄弟元素：当处理层叠时只考虑子元素。</li> + <li>每个层叠上下文都是自包含的：当一个元素的内容发生层叠后，该元素将被作为整体在父级层叠上下文中按顺序进行层叠。</li> +</ul> + +<div class="note"><strong>Note:</strong> 层叠上下文的层级是 HTML 元素层级的一个子级，因为只有某些元素才会创建层叠上下文。可以这样说，没有创建自己的层叠上下文的元素会被父层叠上下文<em>同化</em>。</div> + +<h2 id="示例">示例</h2> + +<p><img alt="Example of stacking rules modified using z-index" src="/@api/deki/files/913/=Understanding_zindex_04.png"></p> + +<p>在这个例子中，每个被定位的元素都创建了独自的层叠上下文，因为他们被指定了定位属性和 <code>z-index</code> 值。我们把层叠上下文的层级列在下面：</p> + +<ul> + <li>Root + <ul> + <li>DIV #1</li> + <li>DIV #2</li> + <li>DIV #3 + <ul> + <li>DIV #4</li> + <li>DIV #5</li> + <li>DIV #6</li> + </ul> + </li> + </ul> + </li> +</ul> + +<p>请一定要注意 DIV #4，DIV #5 和 DIV #6 是 DIV #3 的子元素，所以它们的层叠完全在 DIV #3 中被处理。一旦 DIV #3 中的层叠和渲染处理完成，DIV #3 元素就被作为一个整体传递与兄弟元素的 DIV 在 root（根）元素进行层叠。</p> + +<div class="note"> +<p><strong>注意：</strong></p> + +<ul> + <li>DIV #4 被渲染在 DIV #1 之下，因为 DIV #1 的 z-index (5) 在 root 元素的层叠上下文中生效，而 DIV #4 的 z-index (6) 在 DIV #3 的层叠上下文中生效。因此，DIV #4 在 DIV #1 之下，因为 DIV #4 归属于 z-index 值较低的 DIV #3 元素。</li> + <li>由此可得 DIV #2 (z-index 2) 被渲染在 DIV #5 (z-index 1) 之下，因为 DIV #5 归属于 z-index 较高的 DIV #3 元素。</li> + <li>DIV #3 的 z-index 值是 4，但是这个值独立于 DIV #4，DIV #5 和 DIV #6 的 z-index 值，因为他们从属于不同的层叠上下文。</li> + <li>分辨出层叠的元素在 Z 轴上的<em>渲染顺序</em>的一个简单方法是将它们想象成一系列的版本号，子元素是其父元素版本号之下的次要版本。通过这个方法我们可以轻松地看出为什么一个 z-index 为 1 的元素（DIV #5）层叠于一个 z-index 为 2 的元素（DIV #2）之上，而一个 z-index 为 6 的元素（DIV #4）层叠于 z-index 为 5 的元素（DIV #1）之下。在我们的例子中（依照最终渲染次序排列）： + <ul> + <li>Root + <ul> + <li>DIV #2 - z-index 为 2</li> + <li>DIV #3 - z-index 为 4 + <ul> + <li>DIV #5 - z-index 为 1，在一个 z-index 为 4 的元素内层叠，所以渲染次序为 4.1</li> + <li>DIV #6 - z-index 为 3，在一个 z-index 为 4 的元素内层叠，所以渲染次序为 4.3</li> + <li>DIV #4 - z-index 为 6，在一个 z-index 为 4 的元素内层叠，所以渲染次序为 4.6</li> + </ul> + </li> + <li>DIV #1 - z-index 为 5</li> + </ul> + </li> + </ul> + </li> +</ul> +</div> + +<h2 id="示例源码">示例源码</h2> + +<h3 id="HTML">HTML</h3> + +<pre><code><div id="div1"> + <h1>Division Element #1</h1> + <code>position: relative;<br/> + z-index: 5;</code> +</div> + +<div id="div2"> + <h1>Division Element #2</h1> + <code>position: relative;<br/> + z-index: 2;</code> +</div> + +<div id="div3"> + <div id="div4"> + <h1>Division Element #4</h1> + <code>position: relative;<br/> + z-index: 6;</code> + </div> + + <h1>Division Element #3</h1> + <code>position: absolute;<br/> + z-index: 4;</code> + + <div id="div5"> + <h1>Division Element #5</h1> + <code>position: relative;<br/> + z-index: 1;</code> + </div> + + <div id="div6"> + <h1>Division Element #6</h1> + <code>position: absolute;<br/> + z-index: 3;</code> + </div> +</div></code></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">* { + margin: 0; +} +html { + padding: 20px; + font: 12px/20px Arial, sans-serif; +} +div { + opacity: 0.7; + position: relative; +} +h1 { + font: inherit; + font-weight: bold; +} +#div1, +#div2 { + border: 1px dashed #696; + padding: 10px; + background-color: #cfc; +} +#div1 { + z-index: 5; + margin-bottom: 190px; +} +#div2 { + z-index: 2; +} +#div3 { + z-index: 4; + opacity: 1; + position: absolute; + top: 40px; + left: 180px; + width: 330px; + border: 1px dashed #900; + background-color: #fdd; + padding: 40px 20px 20px; +} +#div4, +#div5 { + border: 1px dashed #996; + background-color: #ffc; +} +#div4 { + z-index: 6; + margin-bottom: 15px; + padding: 25px 10px 5px; +} +#div5 { + z-index: 1; + margin-top: 15px; + padding: 5px 10px; +} +#div6 { + z-index: 3; + position: absolute; + top: 20px; + left: 180px; + width: 150px; + height: 125px; + border: 1px dashed #009; + padding-top: 125px; + background-color: #ddf; + text-align: center; +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('示例源码', '100%', '396') }}</p> + +<h2 id="参考">参考</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">Stacking without the z-index property</a>: The stacking rules that apply when <code>z-index</code> is not used.</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float">Stacking with floated blocks</a>: How floating elements are handled with stacking.</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">Using z-index</a>: How to use <code>z-index</code> to change default stacking.</li> + <li><a href="/en-US/docs/CSS/Understanding_z-index/Stacking_context_example_1" title="CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li> + <li><a href="/en-US/docs/CSS/Understanding_z-index/Stacking_context_example_2" title="CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li> + <li><a href="/en-US/docs/CSS/Understanding_z-index/Stacking_context_example_3" title="CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level</li> +</ul> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">原始文档信息</h2> + +<ul> + <li>作者: Paolo Lombardi</li> + <li>此文是我用意大利语写给 <a href="http://www.yappy.it">YappY</a> 的英文版本。我授权以 <a href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license </a>将所有内容分享。</li> + <li>上次更新时间: July 9th, 2005</li> +</ul> +</div> diff --git a/files/zh-cn/web/css/css_selectors/comparison_with_xpath/index.html b/files/zh-cn/web/css/css_selectors/comparison_with_xpath/index.html deleted file mode 100644 index c196e077e6..0000000000 --- a/files/zh-cn/web/css/css_selectors/comparison_with_xpath/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Comparison of CSS Selectors and XPath -slug: Web/CSS/CSS_Selectors/Comparison_with_XPath -translation_of: Web/XPath/Comparison_with_CSS_selectors ---- -<div>{{CSSRef("Selectors")}}{{QuickLinksWithSubpages("/en-US/docs/Web/XPath")}}{{Draft}}</div> - -<p class="summary">本文旨在记录CSS选择器和XPath之间的区别，以便Web开发人员能够更好地为正确的工作选择合适的工具。</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col"><a href="/en-US/docs/Web/XPath">XPath feature</a></th> - <th scope="col"><a href="/en-US/docs/Web/CSS/CSS_Selectors">CSS equivalent</a></th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/en-US/docs/Web/XPath/Axes/ancestor"><code>ancestor</code></a>, <a href="/en-US/docs/Web/XPath/Axes/parent"><code>parent</code></a> or <a href="/en-US/docs/Web/XPath/Axes/preceding-sibling"><code>preceding-sibling</code></a> axis</td> - <td>{{CSSxRef(":has",":has()")}} selector {{experimental_inline}}</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/XPath/Axes/ancestor"><code>attribute</code></a> axis</td> - <td><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selectors</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/XPath/Axes/child"><code>child</code></a> axis</td> - <td><a href="/en-US/docs/Web/CSS/Child_selectors">Child combinator</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/XPath/Axes/descendant"><code>descendant</code></a> axis</td> - <td><a href="/en-US/docs/Web/CSS/Descendant_selectors">Descendant combinator</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/XPath/Axes/following-sibling"><code>following-sibling</code></a> axis</td> - <td><a href="/en-US/docs/Web/CSS/General_sibling_selectors">General sibling combinator</a> or <a href="/en-US/docs/Web/CSS/Adjacent_sibling_selectors">adjacent sibling combinator</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/XPath/Axes/self"><code>self</code></a> axis</td> - <td>{{CSSxRef(":scope")}} or {{CSSxRef(":host")}} selector</td> - </tr> - </tbody> -</table> diff --git a/files/zh-cn/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html b/files/zh-cn/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html new file mode 100644 index 0000000000..65883df437 --- /dev/null +++ b/files/zh-cn/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html @@ -0,0 +1,68 @@ +--- +title: '在选择器中使用 :target 伪类' +slug: 'Web/Guide/CSS/Using_the_:target_selector' +tags: + - CSS + - CSS_3 + - Selectors +translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' +--- +<p>{{CSSRef}}</p> + +<p>为了辅助标识那些指向文档特定部分链接的目标, <a class="external" href="http://www.w3.org/TR/css3-selectors/#target-pseudo">CSS3 选择器</a> 引入了<code> {{ Cssxref(":target") }} </code><a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">伪类</a>. Netscape 7.1 已经在 Netscape 系列中加入了这个伪类的支持, 这一新的举措让页面作者能够辅助用户在较大的页面中定位。 </p> + +<h3 id="Picking_a_Target" name="Picking_a_Target">选择一个目标</h3> + +<p><code>{{ Cssxref(":target") }} 伪类用来指定那些包含片段标识符的 URI 的目标元素样式。</code> 例如, <code><span class="nowiki">http://developer.mozilla.org/en/docs/Using_the_:target_selector#Example</span></code> 这个 URI 包含了 <code>#Example 片段标识符。</code> 在HTML中, 标识符是元素的id或者name属性,。由于这两者位于相同的命名空间， 因此， 这个示例 URI 指向的是文档顶层的 "Example" 。</p> + +<p>假设你想修改 URI 指向的任何 h2 元素，但是又不想把样式应用到任何其它同类型的元素，那么以下示例足够简单有用：</p> + +<pre>h2:target {font-weight: bold;}</pre> + +<p>同样的，将样式应用于特定的文档片段也是可行的。这是通过使用 URI 中相同的标识符实现的。例如，要在 #Example 文档片段中加入边框，我们可以通过如下代码实现： </p> + +<pre>#Example:target {border: 1px solid black;}</pre> + +<h3 id="Targeting_the_Root_Element" name="Targeting_the_Root_Element">定位所有元素</h3> + +<p>如果想要创建应用于所有目标元素的样式，那么可以使用通用选择器：</p> + +<pre>:target {color: red;} +</pre> + +<h3 id="Example" name="Example">示例</h3> + +<p>在以下示例中， 5个链接指向了同一文档中的元素。例如，选择 "First" 链接会导致<code> <h1 id="one"> </code>成为目标元素。 注意，由于目标元素有可能会被放置到浏览器窗口的顶层，因此文档可能会跳到新的滚动位置。</p> + +<div id="example"> +<pre><h4 id="one">...</h4> <p id="two">...</p> +<div id="three">...</div> <a id="four">...</a> <em id="five">...</em> + +<a href="#one">First</a> +<a href="#two">Second</a> +<a href="#three">Third</a> +<a href="#four">Fourth</a> +<a href="#five">Fifth</a></pre> +</div> + +<h3 id="Conclusion" name="Conclusion">结论</h3> + +<p>在片段标识符指向部分文档的情况下，读者可能会对到底应该阅读文档的哪一部分感到疑惑。通过对不同的目标元素的样式进行修饰, 读者的相关疑惑会减少或者消除。</p> + +<h3 id="Related_Links" name="Related_Links">相关链接</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/css3-selectors/#target-pseudo">CSS3 Selectors #target-pseudo</a></li> + <li><a class="internal" href="/En/CSS/:target" title="En/CSS/:target">CSS Reference :target</a></li> +</ul> + +<div class="originaldocinfo"> +<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> + +<ul> + <li>Author(s): Eric Meyer, Standards Evangelist, Netscape Communications</li> + <li>Last Updated Date: Published 30 Jun 2003</li> + <li>Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li> + <li>Note: This reprinted article was originally part of the DevEdge site.</li> +</ul> +</div> diff --git a/files/zh-cn/web/css/cssom_view/坐标系/index.html b/files/zh-cn/web/css/cssom_view/coordinate_systems/index.html index d6ea967a43..d6ea967a43 100644 --- a/files/zh-cn/web/css/cssom_view/坐标系/index.html +++ b/files/zh-cn/web/css/cssom_view/coordinate_systems/index.html diff --git a/files/zh-cn/web/css/float/index.html b/files/zh-cn/web/css/float/index.html new file mode 100644 index 0000000000..30f9928c0b --- /dev/null +++ b/files/zh-cn/web/css/float/index.html @@ -0,0 +1,247 @@ +--- +title: float +slug: CSS/float +tags: + - CSS + - CSS Positioning + - CSS Property + - CSS 定位 + - CSS 属性 + - 参考 +translation_of: Web/CSS/float +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与<a href="/zh-CN/docs/Web/CSS/position#Absolute_positioning">绝对定位</a>相反）。</span></p> + +<div>{{EmbedInteractiveExample("pages/css/float.html")}}</div> + + + +<p><strong>浮动元素</strong>是 <code>float</code> 的计算值非 <code>none</code> 的元素。</p> + +<p>由于float意味着使用块布局，它在某些情况下修改{{cssxref("display")}} 值的计算值：</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">指定值</th> + <th scope="col">计算值</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>inline</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>inline-block</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>inline-table</code></td> + <td><code>table</code></td> + </tr> + <tr> + <td><code>table-row</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-row-group</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-column</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-column-group</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-cell</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-caption</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-header-group</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-footer-group</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>flex</code></td> + <td><code>flex</code>, 但是float对这样的元素不起作用</td> + </tr> + <tr> + <td><code>inline-flex</code></td> + <td><code>inline-flex</code>, 但是float对这样的元素不起作用</td> + </tr> + <tr> + <td><em>other</em></td> + <td><em>unchanged</em></td> + </tr> + </tbody> +</table> + +<div class="note"><strong>备注：</strong>如果要在 JavaScript 中把float属性当作{{domxref("element.style")}}对象的一个成员来操作，那么在Firefox 34 和更老的版本中，你必须拼写成cssFloat。另外还要注意到在 Internet Explorer 8 和更老的IE当中，要使用<code>styleFloat</code>属性。这是DOM驼峰命名和CSS所用的连字符分隔命名法对应关系中的一个特例（这是因为在 JavaScript 中"float"是一个保留字，因为同样的原因，"class"被改成了"className" 、"for"被改成了"htmlFor"）。</div> + +<h2 id="语法">语法</h2> + +<pre class="notranslate">/* Keyword values */ +float: left; +float: right; +float: none; +float: inline-start; +float: inline-end; + +/* Global values */ +float: inherit; +float: initial; +float: unset;</pre> + +<p><code>float</code> 属性的值被指定为单一的关键字，值从下面的值列表中选择。</p> + +<h3 id="值">值</h3> + +<dl> + <dt><code>left</code></dt> + <dd>表明元素必须浮动在其所在的块容器左侧的关键字。</dd> + <dt><code>right</code></dt> + <dd>表明元素必须浮动在其所在的块容器右侧的关键字。</dd> + <dt><code>none</code></dt> + <dd>表明元素不进行浮动的关键字。</dd> + <dt><code>inline-start</code></dt> + <dd>关键字，表明元素必须浮动在其所在块容器的开始一侧，在ltr脚本中是左侧，在rtl脚本中是右侧。</dd> + <dt><code>inline-end</code></dt> + <dd>关键字，表明元素必须浮动在其所在块容器的结束一侧，在ltr脚本中是右侧，在rtl脚本中是左侧。</dd> +</dl> + +<h3 id="形式化语法">形式化语法</h3> + +<pre class="syntaxbox notranslate">{{csssyntax("float")}}</pre> + +<h2 id="例子">例子</h2> + +<h3 id="浮动元素是如何定位的">浮动元素是如何定位的</h3> + +<p>正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到<strong>另外一个浮动的元素</strong>。</p> + +<p>在下面的图片中，有三个红色的正方形。其中有两个向左浮动，一个向右浮动。要注意到第二个向左浮动的正方形被放在第一个向左浮动的正方形的右边。如果还有更多的正方形这样浮动，它们会继续向右堆放，直到填满容器一整行，之后换行至下一行。</p> + + + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><section> + <div class="left">1</div> + <div class="left">2</div> + <div class="right">3</div> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Morbi tristique sapien ac erat tincidunt, sit amet dignissim + lectus vulputate. Donec id iaculis velit. Aliquam vel + malesuada erat. Praesent non magna ac massa aliquet tincidunt + vel in massa. Phasellus feugiat est vel leo finibus congue.</p> +</section> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">section { + border: 1px solid blue; +} + +div { + margin: 5px; + width: 50px; + height: 50px; +} + +.left { + float: left; + background: pink; +} + +.right { + float: right; + background: cyan; +}</pre> + +<h4 id="结果">结果</h4> + +<p>{{EmbedLiveSample('How_floated_elements_are_positioned','400','180')}}</p> + +<h2 id="清除浮动">清除浮动</h2> + +<p>有时，你可能想要强制元素移至任何浮动元素下方。比如说，你可能希望某个段落与浮动元素保持相邻的位置，但又希望这个段落从头开始强制独占一行。请参考 {{cssxref("clear")}} 以获取例子等。</p> + +<blockquote> +<div class="blockIndicator note" style="margin-bottom: 0;"> +<p><strong>译者注：</strong>以下直至“规范”部分，皆为英文原文中已剔除的过时内容。</p> +</div> +</blockquote> + +<p>在前面的例子当中，浮动的元素的高度比它们所在的容器元素（是块元素）的高度小。然而如果块元素内的文本太短，不足以把块元素的大小撑到高度大于所有浮动元素的高度，我们可能会看到意想不到的效果。例如，如果上面图片中的文字只有"Lorem ipsum dolor sit amet,"，并且接下来是另外一个和"Floats Example"这个标题一样风格的标题元素，那么第二个标题元素会出现在红色的正方形之间。然而在大多数这种情况下，我们希望这个标题元素是靠左对齐的。为了实现这个效果，我们需要清除浮动。</p> + +<p>这个例子中，最简单的清除浮动方式就是给我们想要确保左对齐的新标题元素添加{{Cssxref("clear")}}属性：</p> + +<pre class="brush:css notranslate">h2.secondHeading { clear: both; } +</pre> + +<p>然而这个方法只是在同一<a href="/zh-CN/docs/Web/Guide/CSS/Block_formatting_context">块级格式化上下文（block formatting context）</a>中没有其他元素的时候才是有效的。如果我们的 <code>H2</code> 有兄弟元素是向左浮动和向右浮动的边栏，那么使用<code>clear</code> 会导致这个标题元素出现在边栏的下方，这显然不是我们期望的结果。</p> + +<p>如果不能使用清除浮动，另一种做法是浮动容器的限制块级格式化上下文。再次列举上面的例子，有三个红色的正方形和一个<code>P</code>元素。我们可以设置<code>P</code>元素的{{Cssxref("overflow")}}属性值变成<code>hidden</code> 或者<code>auto</code>，因为这样可以让容器元素伸展到能够包含红色正方形，而不是让他们超出块元素的底部。</p> + +<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', '#float-clear', 'float and clear')}}</td> + <td>{{Spec2('CSS Logical Properties')}}</td> + <td>添加了 <code>inline-start</code> 和 <code>inline-end</code>。</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Box', '#float', 'float')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td>大量新属性值，但目前还没完全定义清楚。任何与新特性无关的浏览器差异应该是无意中造成的，需要报告。</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#float-position', 'float')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>没有改变。</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#float', 'float')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>初始定义。</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("css.properties.float")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/zh-CN/docs/Web/CSS/block_formatting_context">块级格式化上下文（Block formatting context）</a></li> + <li>使用 {{cssxref("clear")}} 强制元素移至浮动元素下方。</li> +</ul> diff --git a/files/zh-cn/web/css/网格-模板-列/index.html b/files/zh-cn/web/css/grid-template-rows/index.html index 0dcd6b29d5..0dcd6b29d5 100644 --- a/files/zh-cn/web/css/网格-模板-列/index.html +++ b/files/zh-cn/web/css/grid-template-rows/index.html diff --git a/files/zh-cn/web/css/layout_cookbook/卡片/index.html b/files/zh-cn/web/css/layout_cookbook/card/index.html index 260ef3ba54..260ef3ba54 100644 --- a/files/zh-cn/web/css/layout_cookbook/卡片/index.html +++ b/files/zh-cn/web/css/layout_cookbook/card/index.html diff --git a/files/zh-cn/web/css/layout_cookbook/媒体对象/index.html b/files/zh-cn/web/css/layout_cookbook/media_objects/index.html index 382e4bacce..382e4bacce 100644 --- a/files/zh-cn/web/css/layout_cookbook/媒体对象/index.html +++ b/files/zh-cn/web/css/layout_cookbook/media_objects/index.html diff --git a/files/zh-cn/web/css/媒体查询/index.html b/files/zh-cn/web/css/media_queries/index.html index 9936c531f1..9936c531f1 100644 --- a/files/zh-cn/web/css/媒体查询/index.html +++ b/files/zh-cn/web/css/media_queries/index.html diff --git a/files/zh-cn/web/css/media_queries/testing_media_queries/index.html b/files/zh-cn/web/css/media_queries/testing_media_queries/index.html new file mode 100644 index 0000000000..0d33436410 --- /dev/null +++ b/files/zh-cn/web/css/media_queries/testing_media_queries/index.html @@ -0,0 +1,90 @@ +--- +title: 使用编程方法测试媒体查询 +slug: Web/Guide/CSS/Testing_media_queries +tags: + - CSS + - DOM + - Event + - Media Queries + - Web +translation_of: Web/CSS/Media_Queries/Testing_media_queries +--- +<div>{{cssref}}</div> + +<p>{{Glossary("DOM")}} 提供了通过编程方法来获得<a href="/zh-CN/docs/Web/CSS/Media_Queries">媒体查询</a>结果的特性。这是通过 {{domxref("MediaQueryList")}} 接口和它的方法来实现的。创建了 <code>MediaQueryList</code> 对象之后，就可以通过它来检查查询结果，或者设置事件监听器，在查询结果发生变化时自动接收到通知。</p> + +<h2 id="创建媒体查询列表">创建媒体查询列表</h2> + +<p>在获取查询结果前，首先要创建查询列表，也就是 <code>MediaQueryList</code> 对象来存放媒体查询。为了实现这个目的，可以使用 {{domxref("window.matchMedia")}} 方法。</p> + +<p>举个例子，设置一个用来判断设备的旋转方向（横屏还是竖屏）的查询列表：</p> + +<pre class="brush: js">var mediaQueryList = window.matchMedia("(orientation: portrait)"); +</pre> + +<h2 id="检查查询结果">检查查询结果</h2> + +<p>一旦创建了媒体查询列表，你就可以通过检查它的 <code>matches</code> 属性来获取相应的查询结果，上述属性会直接返回查询结果：</p> + +<pre class="brush: js">if (mediaQueryList.matches) { + /* 设备的旋转方向为纵向 portrait */ +} else { + /* 设备的旋转方向不是纵向，也就是横向 landscape */ +} +</pre> + +<h2 id="接收查询提醒">接收查询提醒</h2> + +<p>如果你需要持续观察查询结果值的变化情况，那么，注册一个<a href="/zh-CN/docs/Web/API/EventTarget/addEventListener">监听器</a>比手动检查查询结果要高效很多。要注册监听器，只要在 {{domxref("MediaQueryList")}} 对象上使用 <code>addListener()</code> 方法，并使用一个回调函数作为其参数。这样，就通过实现 {{domxref("MediaQueryListListener")}} 接口指定了一个监听器。每当查询结果发生变化，比如从 <code>true</code> 变为 <code>false</code> 时，就会调用一遍传入的回调函数。</p> + +<pre class="brush: js">// 创建查询列表 +const mediaQueryList = window.matchMedia("(orientation: portrait)"); + +// 定义回调函数 +function handleOrientationChange(mql) { + // ... +} + +// 先运行一次回调函数 +handleOrientationChange(mediaQueryList); + +// 为查询列表注册监听器，同时将回调函数传给监听器 +mediaQueryList.addListener(handleOrientationChange); +</pre> + +<p>上述代码创建了一个屏幕方向的测试查询列表 <code>mediaQueryList</code>，并且添加了事件监听器。需要注意的是，当我们添加监听后，我们其实直接调用了一次监听。这会让我们的监听器以目前设备的屏幕方向来初始化判定代码。换句话说，如果我们代码中设定设备处于竖屏模式，而实际上它在启动时处于横屏模式，那么我们在后面的判定就会出现矛盾。</p> + +<p>然后，我们就能在 <code>handleOrientationChange()</code> 方法中检查查询结果，比如，可以设置屏幕方向变化后的逻辑处理代码：</p> + +<pre class="brush: js">function handleOrientationChange(evt) { + if (evt.matches) { + /* The viewport is currently in portrait orientation */ + } else { + /* The viewport is currently in landscape orientation */ + } +} +</pre> + +<h2 id="终止查询通知">终止查询通知</h2> + +<p>如果不再需要再接收媒体查询值变化的相关通知，那么，只要调用 <code>MediaQueryList</code> 的 <code>removeListener()</code> 方法，就可以方便地移除监听：</p> + +<pre class="brush: js">mediaQueryList.removeListener(handleOrientationChange); +</pre> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<h3 id="MediaQueryList_接口"><code>MediaQueryList</code> 接口</h3> + + + +<p>{{Compat("api.MediaQueryList")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li><a href="/zh-CN/docs/CSS/Media_queries">Media queries</a></li> + <li>{{domxref("window.matchMedia()") }}</li> + <li>{{domxref("MediaQueryList") }}</li> + <li>{{domxref("MediaQueryListListener") }}</li> +</ul> diff --git a/files/zh-cn/web/css/media_queries/using_media_queries/index.html b/files/zh-cn/web/css/media_queries/using_media_queries/index.html new file mode 100644 index 0000000000..bfb15efa67 --- /dev/null +++ b/files/zh-cn/web/css/media_queries/using_media_queries/index.html @@ -0,0 +1,412 @@ +--- +title: 使用媒体查询 +slug: Web/Guide/CSS/Media_queries +tags: + - CSS + - CSS媒体查询 + - Media + - Web + - 媒体 + - 媒体查询 + - 指南 +translation_of: Web/CSS/Media_Queries/Using_media_queries +--- +<div>{{cssref}}</div> + +<p><strong>媒体查询</strong>（<strong>Media queries</strong>）非常实用，尤其是当你想要根据设备的大致类型（如打印设备与带屏幕的设备）或者特定的特征和设备参数（例如屏幕分辨率和浏览器{{glossary("viewport", "视窗")}}宽度）来修改网站或应用程序时。</p> + +<p>媒体查询常被用于以下目的：</p> + +<ul> + <li>有条件的通过 {{cssxref("@media")}} 和 {{cssxref("@import")}} <a href="/zh-CN/docs/Web/CSS/At-rule">at-rules</a> 用<a href="/en-US/docs/Web/CSS">CSS</a> 装饰样式。</li> + <li>用<code>media=</code> 属性为{{HTMLElement("style")}}, {{HTMLElement("link")}}, {{HTMLElement("source")}}和其他<a href="/zh-CN/docs/Web/HTML">HTML</a>元素指定特定的媒体类型。如:</li> +</ul> + +<pre><code><link rel="stylesheet" src="styles.css" media="screen" /> +<link rel="stylesheet" src="styles.css" media="print" /></code> +</pre> + +<ul> + <li>使用{{domxref("Window.matchMedia()")}} 和{{domxref("MediaQueryList.addListener()")}} 方法来<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">测试和监控媒体状态</a>。</li> +</ul> + +<div class="note"> +<p><strong>注意：</strong>本页的例子使用CSS <code>@media</code> 的方式来说明目的，但是对于所有类型的媒体查询，基本语法均相同。</p> +</div> + +<h2 id="语法">语法</h2> + +<p>每条媒体查询语句都由一个可选的<em>媒体类型</em>和任意数量的<em>媒体特性</em>表达式构成。可以使用多种<em>逻辑操作符</em>合并多条媒体查询语句。媒体查询语句不区分大小写。</p> + +<p>当媒体类型（如果指定）与在其上显示文档的设备匹配并且所有媒体功能表达式都计算为true时，媒体查询将计算为true。 涉及未知媒体类型的查询始终为false。</p> + +<div class="note"> +<p><strong>注意：</strong> 即使媒体查询返回false，带有媒体查询附加到其{{HTMLElement("link")}}标记的样式表<a href="http://scottjehl.github.com/CSS-Download-Tests/">仍将下载</a>。 但是，除非查询结果变为true，否则其内容将不适用。</p> +</div> + +<h3 id="媒体类型">媒体类型</h3> + +<p><em>媒体类型</em>（<em>Media types</em>）描述设备的一般类别。除非使用 <code>not</code> 或 <code>only</code> 逻辑操作符，媒体类型是可选的，并且会（隐式地）应用 <code>all</code> 类型。</p> + +<dl> + <dt><code id="all">all</code></dt> + <dd>适用于所有设备。</dd> + <dt><code id="print">print</code></dt> + <dd>适用于在打印预览模式下在屏幕上查看的分页材料和文档。 （有关特定于这些格式的格式问题的信息，请参阅<a href="/zh-CN/docs/Web/CSS/Paged_Media">分页媒体</a>。）</dd> + <dt><code id="screen">screen</code></dt> + <dd>主要用于屏幕。</dd> + <dt><code id="speech">speech</code></dt> + <dd>主要用于语音合成器。</dd> +</dl> + +<div class="note"><strong>被废弃的媒体类型：</strong> CSS2.1 和 <a href="https://drafts.csswg.org/mediaqueries-3/#background">Media Queries 3</a> 定义了一些额外的媒体类型(<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, 以及 <code>aural</code>)，但是他们在<a href="http://dev.w3.org/csswg/mediaqueries/#media-types">Media Queries 4</a> 中已经被废弃，并且不应该被使用。<code>aural</code>类型被替换为具有相似效果的<code>speech</code>。</div> + +<h3 id="媒体特性">媒体特性</h3> + +<p><em>媒体特性</em>（<em>Media features</em>）描述了 {{glossary("user agent")}}、输出设备，或是浏览环境的具体特征。媒体特性表达式是完全可选的，它负责测试这些特性或特征是否存在、值为多少。每条媒体特性表达式都必须用括号括起来。</p> + +<table> + <thead> + <tr> + <th>名称</th> + <th>简介</th> + <th>备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{cssxref("@media/any-hover", "any-hover")}}</td> + <td>是否有任何可用的输入机制允许用户（将鼠标等）悬停在元素上？</td> + <td>在 Media Queries Level 4 中被添加。</td> + </tr> + <tr> + <td>{{cssxref("@media/any-pointer", "any-pointer")}}</td> + <td>可用的输入机制中是否有任何指针设备，如果有，它的精度如何？</td> + <td>在 Media Queries Level 4 中被添加。</td> + </tr> + <tr> + <td>{{cssxref("@media/aspect-ratio", "aspect-ratio")}}</td> + <td>视窗（viewport）的宽高比</td> + <td></td> + </tr> + <tr> + <td>{{cssxref("@media/color", "color")}}</td> + <td>输出设备每个像素的比特值，常见的有 8、16、32 位。如果设备不支持输出彩色，则该值为 0</td> + <td></td> + </tr> + <tr> + <td>{{cssxref("@media/color-gamut", "color-gamut")}}</td> + <td>用户代理和输出设备大致程度上支持的色域</td> + <td>在 Media Queries Level 4 中被添加。</td> + </tr> + <tr> + <td>{{cssxref("@media/color-index", "color-index")}}</td> + <td>输出设备的颜色查询表（color lookup table）中的条目数量，如果设备不使用颜色查询表，则该值为 0</td> + <td></td> + </tr> + <tr> + <td>{{cssxref("@media/device-aspect-ratio", "device-aspect-ratio")}} {{obsolete_inline}}</td> + <td>输出设备的宽高比</td> + <td>已在 Media Queries Level 4 中被弃用。</td> + </tr> + <tr> + <td>{{cssxref("@media/device-height", "device-height")}} {{obsolete_inline}}</td> + <td>输出设备渲染表面（如屏幕）的高度</td> + <td>已在 Media Queries Level 4 中被弃用。</td> + </tr> + <tr> + <td>{{cssxref("@media/device-width", "device-width")}} {{obsolete_inline}}</td> + <td>输出设备渲染表面（如屏幕）的宽度</td> + <td>已在 Media Queries Level 4 中被弃用。</td> + </tr> + <tr> + <td>{{cssxref("@media/display-mode", "display-mode")}}</td> + <td> + <p>应用程序的显示模式，如web app的manifest中的<a href="/zh-CN/docs/Web/Manifest#display"><code>display</code></a> 成员所指定</p> + </td> + <td>在 <a href="http://w3c.github.io/manifest/#the-display-mode-media-feature">Web App Manifest spec</a>被定义.</td> + </tr> + <tr> + <td>{{cssxref("@media/forced-colors", "forced-colors")}}</td> + <td>检测是user agent否限制调色板</td> + <td>在 Media Queries Level 5 中被添加。</td> + </tr> + <tr> + <td>{{cssxref("@media/grid", "grid")}}</td> + <td>输出设备使用网格屏幕还是点阵屏幕？</td> + <td></td> + </tr> + <tr> + <td>{{cssxref("@media/height", "height")}}</td> + <td>视窗（viewport）的高度</td> + <td></td> + </tr> + <tr> + <td>{{cssxref("@media/hover", "hover")}}</td> + <td> + <p>主要输入模式是否允许用户在元素上悬停</p> + </td> + <td>在 Media Queries Level 4 中被添加。</td> + </tr> + <tr> + <td>{{cssxref("@media/inverted-colors", "inverted-colors")}}</td> + <td>user agent或者底层操作系统是否反转了颜色</td> + <td>在 Media Queries Level 5 中被添加。</td> + </tr> + <tr> + <td>{{cssxref("@media/light-level", "light-level")}}</td> + <td>环境光亮度</td> + <td>在 Media Queries Level 5 中被添加。</td> + </tr> + <tr> + <td>{{cssxref("@media/monochrome", "monochrome")}}</td> + <td> + <p>输出设备单色帧缓冲区中每个像素的位深度。如果设备并非黑白屏幕，则该值为 0</p> + </td> + <td></td> + </tr> + <tr> + <td>{{cssxref("@media/orientation", "orientation")}}</td> + <td>视窗（viewport）的旋转方向</td> + <td></td> + </tr> + <tr> + <td>{{cssxref("@media/overflow-block", "overflow-block")}}</td> + <td> + <p>输出设备如何处理沿块轴溢出视窗(viewport)的内容</p> + </td> + <td>在 Media Queries Level 4 中被添加。</td> + </tr> + <tr> + <td>{{cssxref("@media/overflow-inline", "overflow-inline")}}</td> + <td> + <p>沿内联轴溢出视窗(viewport)的内容是否可以滚动？</p> + </td> + <td>在 Media Queries Level 4 中被添加。</td> + </tr> + <tr> + <td>{{cssxref("@media/pointer", "pointer")}}</td> + <td> + <p>主要输入机制是一个指针设备吗？如果是，它的精度如何？</p> + </td> + <td>在 Media Queries Level 4 中被添加。</td> + </tr> + <tr> + <td>{{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}}</td> + <td>探测用户倾向于选择亮色还是暗色的配色方案</td> + <td>在 Media Queries Level 5 中被添加。</td> + </tr> + <tr> + <td>{{cssxref("@media/prefers-contrast", "prefers-contrast")}}</td> + <td>探测用户是否有向系统要求提高或降低相近颜色之间的对比度</td> + <td>在 Media Queries Level 5 中被添加。</td> + </tr> + <tr> + <td>{{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}}</td> + <td>用户是否希望页面上出现更少的动态效果</td> + <td>在 Media Queries Level 5 中被添加。</td> + </tr> + <tr> + <td>{{cssxref("@media/prefers-reduced-transparency", "prefers-reduced-transparency")}}</td> + <td>用户是否倾向于选择更低的透明度</td> + <td>在 Media Queries Level 5 中被添加。</td> + </tr> + <tr> + <td>{{cssxref("@media/resolution", "resolution")}}</td> + <td>输出设备的像素密度（分辨率）</td> + <td></td> + </tr> + <tr> + <td>{{cssxref("@media/scan", "scan")}}</td> + <td>输出设备的扫描过程（适用于电视等）</td> + <td></td> + </tr> + <tr> + <td>{{cssxref("@media/scripting", "scripting")}}</td> + <td>探测脚本（例如 JavaScript）是否可用</td> + <td>在 Media Queries Level 5 中被添加。</td> + </tr> + <tr> + <td>{{cssxref("@media/update-frequency", "update")}}</td> + <td>输出设备更新内容的渲染结果的频率</td> + <td>在 Media Queries Level 4 中被添加。</td> + </tr> + <tr> + <td>{{cssxref("@media/width", "width")}}</td> + <td>视窗（viewport）的宽度，包括纵向滚动条的宽度</td> + <td></td> + </tr> + </tbody> +</table> + +<h3 id="逻辑操作符">逻辑操作符</h3> + +<p><em>逻辑操作符</em>（<em>logical operators</em>） <code>not</code>, <code>and</code>, 和 <code>only</code> 可用于联合构造复杂的媒体查询，您还可以通过用逗号分隔多个媒体查询，将它们组合为一个规则。</p> + +<h4 id="and"><code>and</code></h4> + +<p> <code>and</code> 操作符用于将多个媒体查询规则组合成单条媒体查询，当每个查询规则都为真时则该条媒体查询为真，它还用于将媒体功能与媒体类型结合在一起。</p> + +<h4 id="not"><code>not</code></h4> + +<p><code>not</code>运算符用于否定媒体查询，如果不满足这个条件则返回true，否则返回false。 如果出现在以逗号分隔的查询列表中，它将仅否定应用了该查询的特定查询。 如果使用not运算符，则还必须指定媒体类型。</p> + +<div class="note"> +<p><strong>注意：</strong>在Level 3中，<code>not</code>关键字不能用于否定单个媒体功能表达式，而只能用于否定整个媒体查询。</p> +</div> + +<h4 id="only"><code>only</code></h4> + +<p><code>only</code>运算符仅在整个查询匹配时才用于应用样式，并且对于防止较早的浏览器应用所选样式很有用。 当不使用<code>only</code>时，旧版本的浏览器会将<code>screen and (max-width: 500px)</code>简单地解释为<code>screen</code>，忽略查询的其余部分，并将其样式应用于所有屏幕。 如果使用<code>only</code>运算符，则<em>还必须指定</em>媒体类型。</p> + +<h4 id="逗号"><code>,</code> (逗号)</h4> + +<p>逗号用于将多个媒体查询合并为一个规则。 逗号分隔列表中的每个查询都与其他查询分开处理。 因此，如果列表中的任何查询为true，则整个media语句均返回true。 换句话说，列表的行为类似于逻辑或<code>or</code>运算符。</p> + +<h2 id="定位媒体类型">定位媒体类型</h2> + +<p>媒体类型描述了给定设备的一般类别。 尽管通常在设计网站时会考虑屏幕，但您可能希望创建针对特殊设备（例如打印机或基于音频的屏幕阅读器）的样式。 例如，此CSS针对打印机：</p> + +<pre class="brush: css">@media print { ... } +</pre> + +<p>您还可以定位多个设备。 例如，此<code>@media</code>规则使用两个媒体查询来同时定位屏幕和打印设备</p> + +<pre class="brush: css">@media screen, print { ... } +</pre> + +<p>有关所有媒体类型的列表，请参见<a class="internal" href="#Media_types">Media types</a>。 由于它们仅以非常广泛的术语描述设备，因此只有少数几种可用。 要定位更具体的属性，请改用<em>媒体功能</em>。</p> + +<h2 id="定位媒体特性">定位媒体特性</h2> + +<p>媒体功能描述了给定的{{glossary("user agent")}}的输出设备或环境的特定特征。 例如，您可以将特定样式应用于宽屏显示器，使用鼠标的计算机，或应用于在弱光条件下使用的设备。 当用户的主要输入机制（例如鼠标）可以悬停在元素上时，如下为一个示例：</p> + +<pre class="brush: css">@media (hover: hover) { ... } +</pre> + +<p>许多媒体功能都是<em>范围功能</em>，这意味着可以在它们前面加上“最小”或“最大”来表示“最小条件”或“最大条件”约束。 例如，仅当您的浏览器的{{glossary("viewport")}}宽度等于或小于12450px时，此CSS才会应用样式：</p> + +<pre class="brush: css">@media (max-width: 12450px) { ... } +</pre> + +<p>如果您在未指定值的情况下创建媒体功能查询，则该样式将全部被应用，只要该查询的值不为零（或在Level 4中为<code>none</code>）即可。 例如，此CSS将适用于任何带有彩色屏幕的设备：</p> + +<pre class="brush: css">@media (color) { ... } +</pre> + +<p>如果某个功能不适用于运行浏览器的设备，则涉及该媒体功能的表达式始终为false。 例如，将不会使用嵌套在以下查询中的样式，因为没有语音专用设备具有屏幕长宽比：</p> + +<pre class="brush: css">@media speech and (aspect-ratio: 11/5) { ... } +</pre> + +<p>有关更多媒体功能<a href="#Media_features">media feature</a>示例，请参阅每个特定功能的参考页。</p> + +<h2 id="创建复杂查询">创建复杂查询</h2> + +<p>有时您可能想创建一个取决于多个条件的媒体查询。 这就是<em>逻辑运算符</em>使用的场景：<code>not</code>，<code>and</code>，和 <code>only</code>。 此外，您可以将多个媒体查询合并到一个<em>逗号分隔的列表</em>中。 这使您可以在不同情况下应用相同的样式。</p> + +<p>在前面的示例中，我们已经看到<code>and</code>运算符用于将媒体类型与媒体功能分组。 and运算符还可以将多个媒体功能组合到单个媒体查询中。 同时，<code>not</code>运算符会否定媒体查询，从而基本上颠倒了它的正常含义。 唯一的运算符可防止较早的浏览器应用样式。</p> + +<div class="note"> +<p><strong>注意：</strong> 在大多数情况下，默认情况下，如果未指定其他类型，则使用<code>all</code>媒体类型。 但是，如果使用<code>not</code>或<code>only</code>运算符，则必须显式指定媒体类型。</p> +</div> + +<h3 id="结合多种类型和特性">结合多种类型和特性</h3> + +<p><code>and</code>关键字将媒体功能与媒体类型或其他媒体功能组合在一起。 此示例结合了两种媒体功能，以将样式限制为宽度至少为30 em的横向的设备：</p> + +<pre class="brush: css">@media (min-width: 30em) and (orientation: landscape) { ... } +</pre> + +<p>要将样式限制为带有屏幕的设备，可以将媒体功能链接到<code>screen</code>媒体类型：</p> + +<pre class="brush: css">@media screen and (min-width: 30em) and (orientation: landscape) { ... }</pre> + +<h3 id="测试多重查询">测试多重查询</h3> + +<p>当用户的设备与各种媒体类型，功能或状态中的任何一种匹配时，可以使用逗号分隔的列表来应用样式。 例如，如果用户设备的最小高度为680px或为纵向模式的屏幕设备，则以下规则将应用其样式：</p> + +<pre class="brush: css">@media (min-height: 680px), screen and (orientation: portrait) { ... } +</pre> + +<p>以上面的示例为例，如果用户使用的打印机的页面高度为800像素，则media语句将返回true，因为将应用第一个查询。 同样，如果用户使用的是纵向模式的智能手机，并且视口高度为480px，则将应用第二个查询，并且media语句仍将返回true。</p> + +<h3 id="反转查询的含义">反转查询的含义</h3> + +<p><code>not</code>关键字会反转整个媒体查询的含义。 它只会否定要应用的特定媒体查询。 （因此，它不会应用于以逗号分隔的媒体查询列表中的每个媒体查询。）<code>not</code>关键字不能用于否定单个功能查询，只能用于否定整个媒体查询。 看看以下<code>not</code>关键字的例子：</p> + +<pre class="brush: css">@media not all and (monochrome) { ... } +</pre> + +<p>所以上述查询等价于：</p> + +<pre class="brush: css">@media not (all and (monochrome)) { ... } +</pre> + +<p>而不是：</p> + +<pre class="brush: css example-bad">@media (not all) and (monochrome) { ... }</pre> + +<p>再看另一个例子，如下媒体查询：</p> + +<pre class="brush: css">@media not screen and (color), print and (color) { ... } +</pre> + +<p>等价于：</p> + +<pre class="brush: css">@media (not (screen and (color))), print and (color) { ... }</pre> + +<h3 id="提升老版本浏览器兼容性">提升老版本浏览器兼容性</h3> + +<p><code>only</code>关键字可防止不支持带有媒体功能的媒体查询的旧版浏览器应用给定的样式。 <em>它对现代浏览器没有影响。</em></p> + +<pre class="brush: css">@media only screen and (color) { ... } +</pre> + +<h2 id="版本_4_中的语法改进">版本 4 中的语法改进</h2> + +<p>媒体查询4级规范对语法进行了一些改进，以使用具有“范围”类型（例如宽度或高度，减少冗余）的功能进行媒体查询。 级别4添加了用于编写此类的查询范围上下文。 例如，使用最大宽度<code>max-</code> 功能，我们可以编写以下代码：</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> 媒体查询4级规范在现代浏览器中具有合理的支持，但某些媒体功能并未得到很好的支持。 有关更多详细信息，请参见 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/@media#Browser_compatibility"><code>@media</code> browser compatibility table</a>。</p> +</div> + +<pre class="brush: css">@media (max-width: 30em) { ... }</pre> + +<p>在媒体查询4级规范可以这样写：</p> + +<pre class="brush: css">@media (width <= 30em) { ... } +</pre> + +<p>使用<code>min-</code>和<code>max-</code>可以测试一个在两个值之间的宽度</p> + +<pre class="brush: css">@media (min-width: 30em) and (max-width: 50em) { ... }</pre> + +<p>用4级语法书写如下</p> + +<pre class="brush: css">@media (30em <= width <= 50em ) { ... } + +</pre> + +<p>媒体查询4级规范还添加了用<strong>and</strong>, <strong>not</strong>, 和 <strong>or</strong>实现的完整的布尔运算来合并媒体查询的方法。</p> + +<h3 id="使用_not否定一个特性">使用 <code>not</code>否定一个特性</h3> + +<p>在媒体功能周围使用<code>not()</code>会否定查询中的该特性。 例如，如果设备没有悬停功能，则<code>not(hover)</code>将被匹配：</p> + +<pre class="brush: css">@media (not(hover)) { ... }</pre> + +<h3 id="用_or测试多个特性">用 <code>or</code>测试多个特性</h3> + +<p>您可以使用<code>or</code>测试多个功能之间的匹配，如果任何功能为true，则解析为true。 例如，以下查询测试具有单色显示或悬停功能的设备：</p> + +<pre class="brush: css">@media (not (color)) or (hover) { ... }</pre> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/zh-CN/docs/Web/CSS/Media_Queries/Testing_media_queries">使用编程方法测试媒体查询</a></li> + <li><a href="http://davidwalsh.name/animate-media-queries">CSS Animations Between Media Queries</a></li> + <li><a href="/zh-CN/docs/Web/CSS/Mozilla_Extensions#Media_features">Extended Mozilla media features</a></li> + <li><a href="/zh-CN/docs/Web/CSS/Webkit_Extensions#Media_features">Extended WebKit media features</a></li> +</ul> diff --git a/files/zh-cn/web/css/偏移/index.html b/files/zh-cn/web/css/offset/index.html index e61a0ffd7a..e61a0ffd7a 100644 --- a/files/zh-cn/web/css/偏移/index.html +++ b/files/zh-cn/web/css/offset/index.html diff --git a/files/zh-cn/web/css/word-wrap/index.html b/files/zh-cn/web/css/overflow-wrap/index.html index 5c2c0c687d..5c2c0c687d 100644 --- a/files/zh-cn/web/css/word-wrap/index.html +++ b/files/zh-cn/web/css/overflow-wrap/index.html diff --git a/files/zh-cn/web/css/文本装饰线厚度(粗细)/index.html b/files/zh-cn/web/css/text-decoration-thickness/index.html index cdffd6eced..cdffd6eced 100644 --- a/files/zh-cn/web/css/文本装饰线厚度(粗细)/index.html +++ b/files/zh-cn/web/css/text-decoration-thickness/index.html diff --git a/files/zh-cn/web/css/timing-function/index.html b/files/zh-cn/web/css/timing-function/index.html deleted file mode 100644 index aef640fdd3..0000000000 --- a/files/zh-cn/web/css/timing-function/index.html +++ /dev/null @@ -1,266 +0,0 @@ ---- -title: <timing-function> -slug: Web/CSS/timing-function -tags: - - CSS - - timing-function -translation_of: Web/CSS/easing-function -translation_of_original: Web/CSS/timing-function ---- -<p>{{ CSSRef() }}</p> - -<p><span style="font-family: consolas,monaco,andale mono,monospace; font-size: 14.4444446563721px; line-height: 23.3333339691162px;"><code><strong><timing-function></strong></code> </span><a href="/zh-CN/CSS" style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;" title="CSS">CSS</a> 数据类型表示一个数学函数，它描述了在一个过渡或动画中一维数值的改变速度。这实质上让你可以自己定义一个加速度曲线，以便动画的速度在动画的过程中可以进行改变。这些函数通常被称为缓动函数。</p> - -<p>这是一个表示时间输出比率的函数，表示为{{cssxref("<number>")}}，<code>0, 0</code> 代表初始状态，<code>1, 1 </code>代表终止状态。</p> - -<p><img alt="" src="/files/3434/TF_with_output_gt_than_1.png" style="float: left; height: 171px; width: 129px;"><img alt="" src="/files/3435/TF_with_output_gt_than_1_clipped.png" style="float: left; height: 173px; margin-right: 5px; width: 130px;">输出比可以大于1.0（或者小于0.0）。这是因为在一种反弹效果中，动画是可以比最后的状态<span style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;">走的</span>更远的，然后再回到最终状态。</p> - -<p>不过，如果输出值超过了它允许的范围，比如组成一个颜色的值大于了255或者小于了0，这个值会被修改为允许范围内的最接近的值（在颜色值这个例子中分别为255和0）。一些贝塞尔曲线展示了这些性质。</p> - -<h2 class="cleared" id="定时函数">定时函数</h2> - -<div style="width: 100%;"> -<p>CSS 支持两种定时函数：立方贝塞尔曲线的子集和阶梯函数。这些函数中最有用的是一个关键字，可以很容易地引用它们。</p> - -<h3 id="cubic-bezier_定时函数"><code>cubic-bezier()</code> 定时函数</h3> - -<table class="withoutBorder"> - <tbody> - <tr> - <td> - <p><img alt="" class="internal lwrap" src="/files/3433/cubic-bezier,%20example.png" style="float: left;"></p> - </td> - <td> - <p><code>cubic-bezier()</code> 定义了一条 <a class="external" href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves" title="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">立方贝塞尔曲线（cubic Bézier curve）</a>。这些曲线是连续的，一般用于动画的平滑变换，也被称为缓动函数（<em>easing functions</em>）。</p> - - <p>一条立方贝塞尔曲线需要四个点来定义，P<sub>0</sub> 、P<sub>1</sub> 、P<sub>2</sub> 和 P<sub>3</sub>。P<sub>0</sub> 和 P<sub>3</sub> 是起点和终点，这两个点被作为比例固定在坐标系上，横轴为时间比例，纵轴为完成状态。P<sub>0</sub> 是 <code>(0, 0)，表示初始时间和初始状态。</code>P<sub>3</sub> 是 <code>(1, 1)</code> ，表示终止时间和终止状态。</p> - - <p>并非所有的三次贝塞尔曲线都适合作为计时函数，也并非所有的曲线都是数学函数，即给定横坐标为0或1的曲线。在CSS定义的P0和P3固定的情况下，三次贝塞尔曲线是一个函数，因此，当且仅当P1和P2的横坐标都在[0,1]范围内时，三次贝塞尔曲线是有效的。</p> - - <p>三次贝塞尔曲线的 P<sub>1</sub>或 P<sub>2</sub>坐标超出<code>[0, 1]</code> 范围可能会产生弹跳效果。</p> - - <p>当指定的三次贝塞尔曲线无效时，CSS将忽略整个属性。</p> - </td> - </tr> - </tbody> -</table> -</div> - -<h4 id="语法">语法</h4> - -<pre><code>cubic-bezier(<em>x<sub>1</sub></em>, <em>y<sub>1</sub></em>, <em>x<sub>2</sub></em>, <em>y<sub>2</sub></em>)</code> -</pre> - -<p>其中，</p> - -<dl> - <dt style="margin-left: 40px;"><strong><em>x<sub>1</sub></em>, <em>y<sub>1</sub></em>, <em>x<sub>2</sub></em>, <em>y<sub>2是<number>类型的值，它们代表当前定义立方贝塞尔曲线中的</sub></em></strong>P<sub>1</sub> 和 P<sub>2点的横坐标和纵坐标，X1和X2必须在[0，1]范围内，否则当前值无效。</sub></dt> - <dd style="margin-left: 40px;">Are {{cssxref("<number>")}} values representing the abscissas and ordinates of the P<sub>1</sub> and P<sub>2</sub> points defining the cubic Bézier curve. x<sub>1</sub> and x<sub>2</sub> must be in the range [0, 1] or the value is invalid.</dd> -</dl> - -<h4 id="示例">示例</h4> - -<p><code>CSS</code> 中允许使用这些贝塞尔曲线：</p> - -<pre><code>cubic-bezier(0.1, 0.7, 1.0, 0.1) </code>The canonical Bézier curve with four <number> in the [0,1] range. -cubic-bezier(0, 0, 1, 1) Using <integer> is valid as any <integer> is also a <number>. -cubic-bezier(0.3, -1.9, 2.1, -0.2) Negative values for ordinates are valid, leading to bouncing effects. -cubic-bezier(0.1, 4, 0.6, 2.45) Values > 1.0 for ordinates are also valid.</pre> - -<p>像这些贝塞尔曲线的定义是无效的：</p> - -<pre>cubic-bezier(0.1, red, 1.0, green) Though the animated output type may be a color, Bézier curves work w/ numerical ratios. -cubic-bezier(-0.2, 0.6, -0.1, 0) Abscissas must be in the [0, 1] range or the curve is not a function of time. -cubic-bezier(0.3, 2.1) The two points must be defined, there is no default value. -cubic-bezier(1.1, 0, 4, 0) Abscissas must be in the [0, 1] range or the curve is not a function of time. -</pre> - -<h3 id="The_steps_class_of_timing-functions">The <code>steps()</code> class of timing-functions</h3> - -<table class="withoutBorder"> - <tbody> - <tr> - <td><img alt="" src="/files/3436/steps(2,start).png" style="height: 332px; width: 248px;"></td> - <td><img alt="" src="/files/3437/steps(4,end).png" style="height: 332px; width: 248px;"> - <table class="withoutBorder"> - <tbody> - <tr> - <td></td> - <td rowspan="2"> - <p><code>steps()</code> 定义了一个以等距步长划分值域的步长函数。这个阶跃函数的子类有时也称为阶梯函数。</p> - </td> - </tr> - </tbody> - </table> - </td> - <td rowspan="2"></td> - </tr> - <tr style="text-align: center;"> - <td style="white-space: nowrap;"><code>steps(2, start)</code></td> - <td><code>steps(4, end)</code></td> - </tr> - </tbody> -</table> - -<h4 id="Syntax">Syntax</h4> - -<pre><code>steps(<em>number_of_steps</em>, <em>direction</em>)</code> -</pre> - -<p>where :</p> - -<dl> - <dt style="margin-left: 40px;"><strong><em>number_of_steps</em></strong></dt> - <dd style="margin-left: 40px;">Is a strictly positive {{cssxref("<integer>")}} representing the amount of equidistant treads composing the stepping function.</dd> - <dt style="margin-left: 40px;"><strong><em>direction</em></strong></dt> - <dd style="margin-left: 40px;">Is a keyword indicating if it the function is <a class="external" href="http://en.wikipedia.org/wiki/Left-continuous#Directional_and_semi-continuity" title="http://en.wikipedia.org/wiki/Left-continuous#Directional_and_semi-continuity">left- or right-continuous</a>: - <ul> - <li style="margin-left: 40px;"><code>start</code> denotes a left-continuous function, so that the first step happens when the animation begins;</li> - <li style="margin-left: 40px;"><code>end</code> denotes a right-continuous function, so that the last step happens when the animation ends.</li> - </ul> - </dd> -</dl> - -<h4 id="Examples">Examples</h4> - -<p>These timing functions are valid :</p> - -<pre>steps(5, end) There is 5 treads, the last one happens right before the end of the animation. -steps(2, start) A two-step staircase, the first one happening at the start of the animation. -</pre> - -<p>These timing function are invalid :</p> - -<pre>steps(2.0, end) The first parameter must be an <a title="integer"><integer></a> and cannot be a real value, even if it is equal to one. -steps(-3, start) The amount of steps must be non-negative. -steps(0, end) There must be at least one step. -steps(2) The second parameter is not optional. -steps(start, 3) Though of different types, the order of parameter is important. -step(1, end) Even if there is one step, the function name is steps, with the plural 's' -steps(3 end) The two parameters must be separated with a comma; one or several spaces is not enough. -</pre> - -<h3 id="常用定时函数关键字">常用定时函数关键字</h3> - -<h4 id="linear"><code>linear</code></h4> - -<table class="withoutBorder"> - <tbody> - <tr style="vertical-align: top;"> - <td><img alt="" src="/files/3425/cubic-bezier,linear.png" style="height: 332px; width: 249px;"></td> - <td> - <p>此关键字表示定时函数<code>cubic-bezier(</code><code>0.0, 0.0, 1.0, 1.0</code><code>)</code>。使用这个定时函数，动画会以恒定的速度从初始状态过渡到结束状态。</p> - </td> - </tr> - </tbody> -</table> - -<h4 id="ease"><code>ease</code></h4> - -<table class="withoutBorder"> - <tbody> - <tr style="vertical-align: top;"> - <td><img alt="" src="/files/3429/cubic-bezier,ease.png" style="height: 332px; width: 244px;"></td> - <td>此关键字表示定时函数 <code>cubic-bezier(0.25, 0.1, 0.25, 1.0)</code>。 这个函数类似于 <a href="/zh-CN/CSS/timing-function#ease-in-out" title="https://developer.mozilla.org/zh-CN/CSS/timing-function#ease-in-out"><code>ease-in-out</code></a>， 尽管它在开始时加速地更快，但在接近中间中，加速已经开始变慢了。</td> - </tr> - </tbody> -</table> - -<h4 id="ease-in"><code>ease-in</code></h4> - -<table class="withoutBorder"> - <tbody> - <tr style="vertical-align: top;"> - <td><img alt="" src="/files/3426/cubic-bezier,ease-in.png" style="height: 332px; width: 249px;"></td> - <td> - <p>此关键字表示定时函数<code>cubic-bezier(</code><code>0.42, 0.0, 1.0, 1.0</code><code>)</code>。动画开始时缓慢，然后逐步加速，知道达到最后状态，动画突然停止。</p> - </td> - </tr> - </tbody> -</table> - -<h4 id="ease-in-out"><code>ease-in-out</code></h4> - -<table class="withoutBorder"> - <tbody> - <tr style="vertical-align: top;"> - <td><img alt="" src="/files/3428/cubic-bezier,ease-in-out.png" style="height: 332px; width: 244px;"></td> - <td> - <p>此关键字表示定时函数 <code>cubic-bezier(</code><code>0.42, 0.0, 0.58, 1.0</code><code>)</code>。使用这个定时函数，动画开始的行为类似于 <a href="/zh-CN/CSS/timing-function#ease-in" title="https://developer.mozilla.org/zh-CN/CSS/timing-function#ease-in"><code>ease-in</code></a> 函数，动画结束时的行为类似于 <a href="/zh-CN/CSS/timing-function#ease-out" title="https://developer.mozilla.org/zh-CN/CSS/timing-function#ease-out"><code>ease-out</code></a>函数。</p> - </td> - </tr> - </tbody> -</table> - -<h4 id="ease-out"><code>ease-out</code></h4> - -<table class="withoutBorder"> - <tbody> - <tr style="vertical-align: top;"> - <td><img alt="" src="/files/3427/cubic-bezer,ease-out.png" style="height: 332px; width: 249px;"></td> - <td> - <p>此关键字表示定时函数 <code>cubic-bezier(</code><code>0.0, 0.0, 0.58, 1.0</code><code>)</code>。动画开始很快，然后逐渐减慢，直到最终状态。</p> - </td> - </tr> - </tbody> -</table> - -<h4 id="step-start"><code>step-start</code></h4> - -<table class="withoutBorder"> - <tbody> - <tr> - <td><img alt="" src="/files/3423/steps(1,start).png" style="height: 332px; width: 248px;">此关键字表示定时函数 <code>steps(1, start)</code>。使用这个定时函数，动画会立刻跳转到结束状态，并一直停留在结束状态直到动画结束。</td> - <td></td> - </tr> - </tbody> -</table> - -<h4 id="step-end"><code>step-end</code></h4> - -<table class="withoutBorder"> - <tbody> - <tr style="vertical-align: top;"> - <td><img alt="" src="/files/3424/steps(1,end).png" style="height: 332px; width: 248px;"></td> - <td> - <p>此关键字表示定时函数 <code>steps(1, end)</code>。使用这个定时函数，动画会一直保持初始状态直到动画结束，然后立刻跳转到结束状态。</p> - </td> - </tr> - </tbody> -</table> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th>Specification</th> - <th>Status</th> - <th>Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Transitions', '#transition-timing-function', '<timing-function>') }}</td> - <td>{{ Spec2('CSS3 Transitions') }}</td> - <td>Defined anonymously</td> - </tr> - <tr> - <td>{{ SpecName('CSS3 Animations', '#animation-timing-function', '<timing-function>') }}</td> - <td>{{ Spec2('CSS3 Animations') }}</td> - <td>Defined anonymously, says to see definition in the CSS Transitions Module</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{Compat("css.types.timing-function", 2)}}</p> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions">CSS Transitions</a></li> - <li><a href="http://cubic-bezier.com/">cubic-bezier</a></li> -</ul> diff --git a/files/zh-cn/web/css/url/index.html b/files/zh-cn/web/css/url()/index.html index 3ba85545e4..3ba85545e4 100644 --- a/files/zh-cn/web/css/url/index.html +++ b/files/zh-cn/web/css/url()/index.html diff --git a/files/zh-cn/web/css/visual_formatting_model/index.html b/files/zh-cn/web/css/visual_formatting_model/index.html new file mode 100644 index 0000000000..640f3abbc9 --- /dev/null +++ b/files/zh-cn/web/css/visual_formatting_model/index.html @@ -0,0 +1,282 @@ +--- +title: 视觉格式化模型 +slug: Web/Guide/CSS/Visual_formatting_model +tags: + - CSS + - CSS盒模型 + - 参考 +translation_of: Web/CSS/Visual_formatting_model +--- +<p><span style="color: #4d4e53;">{{CSSRef}}</span></p> + +<p>CSS 视觉格式化模型（<em>visual formatting model）</em>是用来处理和在视觉媒体上显示文档时使用的计算规则。该模型是 CSS 的基础概念之一。</p> + +<div class="hidden"> +<p> </p> +</div> + +<p><span style="line-height: inherit;">视觉格式化模型会根据<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS盒子模型</a>将文档中的元素转换为一个个盒子，</span><span style="line-height: inherit;">每个盒子的布局由以下因素决定：</span></p> + +<ul> + <li>盒子的尺寸：精确指定、由约束条件指定或没有指定</li> + <li>盒子的类型：行内盒子（inline）、行内级盒子（inline-level）、原子行内级盒子（atomic inline-level）、块盒子（block）</li> + <li><a href="/zh-CN/docs/CSS/Box_positioning_scheme" title="CSS/Box positioning scheme">定位方案（positioning scheme）</a>：普通流定位、浮动定位或绝对定位</li> + <li>文档树中的其它元素：即当前盒子的子元素或兄弟元素</li> + <li>{{glossary("viewport", "视口")}}尺寸与位置</li> + <li>所包含的图片的尺寸</li> + <li>其他的某些外部因素</li> +</ul> + +<p>该模型会根据盒子的包含块（<em>containing block）的</em>边界来渲染盒子。通常，盒子会创建一个包含其后代元素的包含块，但是盒子并不由包含块所限制，<span style="line-height: inherit;">当盒子的布局跑到包含块的外面时称为</span><span style="line-height: inherit;">溢出（</span><em>overflow）</em><span style="line-height: inherit;">。</span></p> + +<div class="note"> +<p><span style="line-height: inherit;">译注：本文有很多相近的术语，阅读时需仔细，否则容易造成误解。为了方便读者，这里我将其整理一下。</span></p> + +<p> </p> + +<ul> + <li><strong>块</strong>：block，一个抽象的概念，一个块在文档流上占据一个独立的区域，块与块之间在垂直方向上按照顺序依次堆叠。</li> + <li><strong>包含块</strong>：containing block，包含其他盒子的块称为包含块。</li> + <li><strong>盒子</strong>：box，一个抽象的概念，由CSS引擎根据文档中的内容所创建，主要用于文档元素的定位、布局和格式化等用途。盒子与元素并不是一一对应的，有时多个元素会合并生成一个盒子，有时一个元素会生成多个盒子（如匿名盒子）。</li> + <li><strong>块级元素</strong>：block-level element，元素的 <code>display</code> 为 <code>block</code>、<code>list-item</code>、<code>table</code> 时，该元素将成为块级元素。元素是否是块级元素仅是元素本身的属性，并不直接用于格式化上下文的创建或布局。</li> + <li><strong>块级盒子</strong>：block-level box，由块级元素生成。一个块级元素至少会生成一个块级盒子，但也有可能生成多个（例如列表项元素）。</li> + <li><strong>块盒子</strong>：block box，如果一个块级盒子同时也是一个块容器盒子（见下），则称其为块盒子。除具名块盒子之外，还有一类块盒子是匿名的，称为匿名块盒子（Anonymous block box），匿名盒子无法被CSS选择符选中。</li> + <li><strong>块容器盒子</strong>：block container box或block containing box，块容器盒子侧重于当前盒子作为“容器”的这一角色，它不参与当前块的布局和定位，它所描述的仅仅是当前盒子与其后代之间的关系。换句话说，块容器盒子主要用于确定其子元素的定位、布局等。</li> +</ul> + +<p>注意：盒子分为“块盒子”和“块级盒子”两种，但元素只有“块级元素”，而没有“块元素”。下面的“行内级元素”也是一样。</p> + +<ul> + <li><strong>行内级元素</strong>：inline-level element，<code>display</code> 为 <code>inline</code>、<code>inline-block</code>、<code>inline-table</code> 的元素称为行内级元素。与块级元素一样，元素是否是行内级元素仅是元素本身的属性，并不直接用于格式化上下文的创建或布局。</li> + <li><strong>行内级盒子</strong>：inline-level box，由行内级元素生成。行内级盒子包括行内盒子和原子行内级盒子两种，区别在于该盒子是否参与行内格式化上下文的创建。</li> + <li><strong>行内盒子</strong>：inline box，参与行内格式化上下文创建的行内级盒子称为行内盒子。与块盒子类似，行内盒子也分为具名行内盒子和匿名行内盒子（anonymous inline box）两种。</li> + <li><strong>原子行内级盒子</strong>：atomic inline-level box，不参与行内格式化上下文创建的行内级盒子。原子行内级盒子一开始叫做原子行内盒子（atomic inline box），后被修正。原子行内级盒子的内容不会拆分成多行显示。</li> +</ul> + +<p>另外，本文的英文原文仍未最后定稿，因此部分内容并不完整。待英文原文更新后应及时更新译文。</p> +</div> + +<h2 id="盒子的生成">盒子的生成</h2> + +<p><span style="line-height: inherit;">盒子的生成是 CSS 视觉格式化模型的一部分，用于从文档元素生成盒子。盒子有不同的类型，不同类型的盒子的格式化方法也有所不同。盒子的类型取决于 CSS </span>{{ cssxref("display") }} 属性。</p> + +<h3 id="块级元素与块盒子">块级元素与块盒子</h3> + +<p><span style="line-height: inherit;">当元素的</span> {{ cssxref("display") }} 为 <code>block</code>、<code>list-item</code> 或 <code>table</code><span style="line-height: inherit;"> 时，该元素将成为块级元素。一个块级元素会被格式化成一个块（例如文章的一个段落），默认按照垂直方向依次排列。</span></p> + +<p>每个块级盒子都会参与<a href="/en-US/docs/CSS/block_formatting_context" title="block formatting context">块格式化上下文（block formatting context）</a>的创建，而每个块级元素都会至少生成一个块级盒子，即主块级盒子（<em>principal block-level</em><em> box）。有</em>一些元素，比如列表项会生成额外的盒子来放置项目符号，而那些会生成列表项的元素可能会生成更多的盒子。不过，多数元素只生成一个主块级盒子。 </p> + +<p>主块级盒子包含由后代元素生成的盒子以及内容，同时它也会参与<a href="/zh-CN/docs/CSS/Positioning_scheme" title="CSS/Positioning scheme">定位方案</a>。</p> + +<p><img alt="venn_blocks.png" class="internal lwrap" src="/@api/deki/files/5995/=venn_blocks.png" style="float: left;">一个块级盒子可能也是一个块容器盒子。块容器盒子（<em>block container box）要么</em>只包含其它块级盒子，要么只包含行内盒子并同时创建一个行内<a href="/en-US/docs/CSS/Inline_formatting_context" title="CSS/Inline formatting context">格式化上下文（inline formatting context）</a>。</p> + +<p>能够注意到块级盒子与块容器盒子是不同的这一点很重要。前者描述了元素与其父元素和兄弟元素之间的行为，而后者描述了元素跟其后代之间的行为。有些块级盒子并不是块容器盒子，比如表格；而有些块容器盒子也不是块级盒子，比如非替换行内块和非替换表格单元格。</p> + +<p>一个同时是块容器盒子的块级盒子称为块盒子（<em>block box）。</em></p> + +<h4 id="匿名块盒子" style="">匿名块盒子</h4> + +<p>在某些情况下进行视觉格式化时，需要添加一些增补性的盒子，这些盒子不能用CSS选择符选中，因此称为匿名盒子（<em>anonymous boxes）</em>。</p> + +<p><span style="line-height: inherit;">CSS选择器不能作用于匿名盒子(</span><em>anonymous boxes</em><span style="line-height: inherit;">)，所以它不能被样式表赋予样式。也就是说，此时所有可继承的 CSS 属性值都为</span> <code>inherit</code> ，而所有不可继承的 CSS 属性值都为 <code>initial</code>。</p> + +<p>块包含盒子可能只包含行内级盒子，也可能只包含块级盒子，但通常的文档都会同时包含两者，在这种情况下，就会在相邻的行内级盒子外创建<span style="line-height: inherit;">匿名块盒子。</span></p> + +<h3 id="示例">示例</h3> + +<p>考虑下面的HTML代码，假设 {{ HTMLElement("div") }} 和 {{ HTMLElement("p") }} 都保持默认的样式（即它们的 <code>display</code> 为 <code>block</code>）：</p> + +<pre class="brush: html"><div>Some inline text <p>followed by a paragraph</p> followed by more inline text.</div> +</pre> + +<p>此时会产生两个匿名块盒子：一个是 <code><p></code> 元素前面的那些文本（<code>Some inline text</code>），另一个是 <p> 元素后面的文本（<code>followed by more inline text.</code>）。此时会生成下面的块结构：</p> + +<p><img alt="" src="https://developer.mozilla.org/@api/deki/files/5996/=anonymous_block-level_boxes.png" style="height: 137px; width: 597px;"></p> + +<p>显示为：</p> + +<pre>Some inline text +followed by a paragraph +followed by more inline text. +</pre> + +<p>对这两个匿名盒子来说，程序员无法像 {{ HTMLElement("p") }} 元素那样控制它们的样式，因此它们会从 {{ HTMLElement("div") }} 那里继承那些可继承的属性，如 {{ cssxref("color") }}。其他不可继承的属性则会设置为 <code>initial</code>，比如，因为没有为它们指定 {{ cssxref("background-color") }}，因此其具有默认的透明背景，而 <code><p></code> 元素的盒子则能够用CSS指定背景颜色。类似地，两个匿名盒子的文本颜色总是一样的。</p> + +<p>另一种会创建匿名块盒子的情况是一个行内盒子中包含一或多个块盒子。此时，包含块盒子的盒子会拆分为两个行内盒子，分别位于块盒子的前面和后面。块盒子前面的所有行内盒子会被一个匿名块盒子包裹，块盒子后面的行内盒子也是一样。因此，块盒子将成为这两个匿名块盒子的兄弟盒子。</p> + +<p>如果有多个块盒子，而它们中间又没有行内元素，则会在这些盒子的前面和后面创建两个匿名块盒子。</p> + +<h3 id="示例_2">示例</h3> + +<p>考虑下面的HTML代码，假设 {{ HTMLElement("p") }} 的 <code>display</code> 为 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">inline</span></font>，{{ HTMLElement("span") }} 的 <code>display</code> 为 <code>block</code>：</p> + +<pre class="brush: html"><code><p>Some <em>inline</em> text <span>followed by a paragraph</span> followed by more inline text.</p></code> +</pre> + +<p>此时会产生两个匿名块盒子：一个是 <code><span></code> 元素前面的文本（<code>Some <em>inline</em> text</code>），另一个是其之后的文本（<code>followed by more inline text.</code>）。此时会生成下面的块结构：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13625/anonymous_block_box_break.png" style="height: 137px; width: 597px;"></p> + +<p>显示为：</p> + +<pre>Some inline text +followed by a paragraph +followed by more inline text. +</pre> + +<h3 id="行内级元素和行内盒子">行内级元素和行内盒子</h3> + +<p>如果一个元素的 {{ cssxref("display") }} 属性为 <code>inline</code>、<code>inline-block</code> 或 <code>inline-table</code>，则称该元素为行内级元素。显示时，它不会生成内容块，但是可以与其他行内级内容一起显示为多行。一个典型的例子是包含多种格式内容（如强调文本、图片等）的段落，就可以由行内级元素组成。</p> + +<p><img alt="" class="internal lwrap" src="https://developer.mozilla.org/@api/deki/files/6008/=venn_inlines.png" style="float: left; height: 287px; width: 384px;"></p> + +<div class="warning"> +<p>该图使用了过时的术语，见下面的“注意”（译注：指图中的 “Atomic inline boxes”）。除此之外该图还有一个错误，右边的黄色部分应该完全包含左侧的椭圆（类似于数学上的超集），因为标准所说的是“如果行内级元素生成的盒子参与行内格式化上下文的创建，则该盒子为一个行内级盒子”，见“CSS 2.2标准的9.2.2节”。</p> +</div> + +<p>行内级元素会生成行内级盒子，该盒子同时会参与行内格式化上下文（<a href="https://developer.mozilla.org/zh-CN/docs/CSS/Inline_formatting_context">inline formatting context</a>）的创建。行内盒子既是行内级盒子，也是一个其内容会参与创建其容器的行内格式化上下文的盒子，比如所有具有 <code>display:inline</code> 样式的非替换盒子。如果一个行内级盒子的内容不参与行内格式化上下文的创建，则称其为原子行内级盒子。而通过替换行内级元素或 <code>display</code> 值为 <code>inline-block</code> 或 <code>inline-table</code> 的元素创建的盒子不会像行内盒子一样可以被拆分为多个盒子。</p> + +<div class="note"> +<p>注意：开始的时候，原子行内级盒子叫做原子行内盒子，这并不准确，因为它们并不是行内盒子。后来在一次勘误时修正了这一问题。不过，当你见到某些文章中使用了“原子行内盒子”的时候，你尽可以将其理解为“原子行内级盒子”，因为这仅仅是一个名字的修改。</p> +</div> + +<div class="note"> +<p>在同一个行内格式化上下文中，原子行内级盒子不能拆分成多行：</p> + +<pre class="brush: html"><style> + span { + display:inline; /* default value*/ + } +</style> +<div style="width:20em;"> + The text in the span <span>can be split in several + lines as it</span> is an inline box. +</div> +</pre> + +<p>可能会显示为：</p> + +<p>The text in the span can be split into several<br> + lines as it is an inline box.</p> + +<p>而：</p> + +<pre class="brush: html"><style> + span { + display:inline-block; + } +</style> +<div style="width:20em;"> + The text in the span <span>cannot be split in several + lines as it</span> is an inline-block box. +</div> +</pre> + +<p>则可能显示为：</p> + +<p>The text in the span <br> + cannot be split into several lines as it is an<br> + inline-block box.</p> + +<p>其中的“cannot be split into several lines as it”永远不会换行。</p> +</div> + +<h4 id="匿名行内盒子">匿名行内盒子</h4> + +<div>类似于块盒子，CSS引擎有时候也会自动创建一些行内盒子。这些行内盒子无法被选择符选中，因此是匿名的，它们从父元素那里继承那些可继承的属性，其他属性保持默认值 <code>initial</code>。</div> + +<div> </div> + +<div>一种常见的情况是CSS引擎会自动为直接包含在块盒子中的文本创建一个行内格式化上下文，在这种情况下，这些文本会被一个足够大的匿名行内盒子所包含。但是如果仅包含空格则有可能不会生成匿名行内盒子，因为空格有可能会由于 {{ cssxref("white-space") }} 的设置而被移除，从而导致最终的实际内容为空。</div> + +<div> </div> + +<div class="note">示例 TBD</div> + +<h3 id="其他类型的盒子">其他类型的盒子</h3> + +<h4 id="行盒子">行盒子</h4> + +<p>行盒子由行内格式化上下文创建，用来显示一行文本。在块盒子内部，行盒子总是从块盒子的一边延伸到另一边（译注：即占据整个块盒子的宽度）。当有浮动元素时，行盒子会从向左浮动的元素的右边缘延伸到向右浮动的元素的左边缘。</p> + +<div>行盒子更多是以技术性目的而存在的，Web开发者通常不需要关心。</div> + +<h4 id="Run-in_盒子">Run-in 盒子</h4> + +<div>Run-in 盒子通过 <code>display:run-in</code> 来定义，它可以是块盒子，也可以是行内盒子，这取决于紧随其后的盒子的类型。Run-in 盒子可以用来在可能的情况下将标题嵌入文章的第一个段落中。</div> + +<div> </div> + +<div class="note"> +<p>注意：Run-in 盒子已经在CSS 2.1的标准中移除了，但可能会在CSS 3中作为一个实验性的内容再次加入。因此最好不要将其用于正式项目。</p> +</div> + +<h4 id="由其他模型引入的盒子">由其他模型引入的盒子</h4> + +<div>除了行内格式化上下文和块格式化上下文之外，CSS还定义了几种内容模型，这些模型同样可以应用于元素。这些模型一般用来描述布局，它们可能会定义一些额外的盒子类型：</div> + +<div> </div> + +<ul> + <li><a href="https://developer.mozilla.org/zh-CN/docs/CSS/table-layout">表格内容模型</a>可能会创建一个表格包装器盒子和一个表格盒子，以及多个其他盒子如表格标题盒子等</li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/CSS/Using_CSS_multi-column_layouts">多列内容模型</a>可能会在容器盒子和内容之间创建多个列盒子</li> + <li>实验性的网格内容模型或flex-box内容模型同样会创建一些其他种类的盒子</li> +</ul> + +<h4 id="定位规则">定位规则</h4> + +<p>一旦生成了盒子以后，CSS引擎就需要定位它们以完成布局。下面是定位盒子时所使用的规则：</p> + +<ul> + <li>普通流：按照次序依次定位每个盒子</li> + <li>浮动：将盒子从普通流中单独拎出来，将其放到外层盒子的某一边</li> + <li>绝对定位：按照绝对位置来定位盒子，其位置根据盒子的包含元素所建立的绝对坐标系来计算，因此绝对定位元素有可能会覆盖其他元素</li> +</ul> + +<h3 id="普通流">普通流</h3> + +<div>在普通流中，盒子会依次放置。在块格式化上下文中，盒子在垂直方向依次排列；而在行内格式化上下文中，盒子则水平排列。当CSS的 {{ cssxref("position") }} 属性为 <code>static</code> 或 <code>relative</code>，并且 {{ cssxref("float") }} 为 <code>none</code> 时，其布局方式为普通流。</div> + +<h3 id="示例_3">示例</h3> + +<div class="note"> +<p>在普通流的块格式化上下文中，盒子会垂直依次排列：</p> + +<p>[TODO 图片]</p> + +<p>在普通流的行内格式化上下文中，盒子会水平依次排列：</p> + +<p>[TODO 图片]</p> +</div> + +<div class="note"> +<p>普通流又有两种情况：静态定位和相对定位：</p> + +<p>{{ cssxref("position") }} 为 <code>static</code> 时为静态定位，此时每个盒子根据普通流所计算出的确切位置来定位。</p> + +<p>[TODO 图片]</p> + +<p>当 {{ cssxref("position") }} 为 <code>relative</code> 时为相对定位，此时每个盒子还会根据 {{ cssxref("top") }}、{{ cssxref("bottom") }}、{{ cssxref("left") }} 和 {{ cssxref("right") }} 属性的值在其原本所在的位置上产生指定大小的偏移。</p> +</div> + +<h3 id="浮动">浮动</h3> + +<p>在浮动定位中，浮动盒子会浮动到当前行的开始或尾部位置。这会导致普通流中的文本及其他内容会“流”到浮动盒子的边缘处，除非元素通过 {{ cssxref("clear") }} 清除了前面的浮动。</p> + +<p>一个盒子的 {{ cssxref("float") }} 值不为 <code>none</code>，并且其 {{ cssxref("position") }} 为 <code>static</code> 或 <code>relative</code> 时，该盒子为浮动定位。如果将 {{ cssxref("float") }} 设置为 <code>left</code>，浮动盒子会定位到当前行盒子的开始位置（左侧），如果设置为 <code>right</code>，浮动盒子会定位到当前行盒子的尾部位置（右侧）。不管是左浮动还是右浮动，行盒子都会伸缩以适应浮动盒子的大小。</p> + +<p>[TODO 图片]</p> + +<h3 id="绝对定位">绝对定位</h3> + +<p>在绝对定位中，盒子会完全从当前流中移除，并且不会再与其有任何联系（译注：此处仅指定位和位置计算，而绝对定位的元素在文档树中仍然与其他元素有父子或兄弟等关系），其位置会使用 {{ cssxref("top") }}、{{ cssxref("bottom") }}、{{ cssxref("left") }} 和 {{ cssxref("right") }} 相对其<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/All_About_The_Containing_Block">包含块</a>进行计算。</p> + +<p>如果元素的 {{ cssxref("position") }} 为 <code>absolute</code> 或 <code>fixed</code>，该元素为绝对定位。</p> + +<p>对固定位置的元素来说，其包含块为整个视口，该元素相对视口进行绝对定位，因此滚动时元素的位置并不会改变。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{css_key_concepts}}</li> +</ul> |