diff options
Diffstat (limited to 'files/zh-tw/web/css/height/index.html')
| -rw-r--r-- | files/zh-tw/web/css/height/index.html | 234 |
1 files changed, 234 insertions, 0 deletions
diff --git a/files/zh-tw/web/css/height/index.html b/files/zh-tw/web/css/height/index.html new file mode 100644 index 0000000000..139ec496b6 --- /dev/null +++ b/files/zh-tw/web/css/height/index.html @@ -0,0 +1,234 @@ +--- +title: height +slug: Web/CSS/height +translation_of: Web/CSS/height +--- +<div>{{CSSRef}}</div> + +<h2 id="概要">概要</h2> + +<p><strong><code>高度(height)</code></strong> 的 CSS 屬性指定了元素內容區域的高度。<a href="/en-US/docs/CSS/box_model#content">content area</a> 在元素的留白(padding)、邊框(border) 與 邊界(margin) 內。</p> + +<p>{{cssxref("min-height")}} 與 {{cssxref("max-height")}} 的特性比 {{Cssxref("height")}} 更重要。</p> + +<p>{{cssinfo}}</p> + +<h2 id="語法">語法</h2> + +<pre class="brush:css">/* Keyword value */ +height: auto; + +/* <length> values */ +height: 120px; +height: 10em; + +/* <percentage> value */ +height: 75%; + +/* Global values */ +height: inherit; +height: initial; +height: unset; +</pre> + +<h3 id="值">值</h3> + +<dl> + <dt><code><length></code></dt> + <dd>查看 {{cssxref("<length>")}} 可用的單位。</dd> + <dt><code><percentage></code></dt> + <dd>{{cssxref("<percentage>")}} 相對於元素的塊狀高度。如果沒有指定塊狀元素的高度，預設值為 <code>auto。</code>用在 root 元素 (e.g. <code><html></code>) 上是相對於初始塊狀元素（即顯示器的尺寸）。</dd> + <dt><code>border-box </code>{{experimental_inline}}</dt> + <dd>If present, the preceding {{cssxref("<length>")}} or {{cssxref("<percentage>")}} is applied to the element's border box.</dd> + <dt><code>content-box</code> {{experimental_inline}}</dt> + <dd>{{cssxref("<length>")}} 或 {{cssxref("<percentage>")}} 是應用於元素的 content box.</dd> + <dt><code>auto</code></dt> + <dd>瀏覽器將計算並選擇指定元素的高度。</dd> + <dt>fill {{experimental_inline}}</dt> + <dd>Use the <code>fill-available</code> inline size or <code>fill-available</code> block size, as appropriate to the writing mode.</dd> + <dt><code>max-content</code> {{experimental_inline}}</dt> + <dd>The intrinsic preferred height.</dd> + <dt><code>min-content</code> {{experimental_inline}}</dt> + <dd>The intrinsic minimum height.</dd> + <dt><code>available</code> {{experimental_inline}}</dt> + <dd>The containing block height minus vertical margin, border and padding.</dd> + <dt><code>fit-content</code> {{experimental_inline}}</dt> + <dd>The larger of: + <ul> + <li>the intrinsic minimum height</li> + <li>the smaller of the intrinsic preferred height and the available height</li> + </ul> + </dd> +</dl> + +<h3 id="正式語法">正式語法</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="範例">範例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="red"> + <span>I'm 50 pixels tall.</span> +</div> +<div id="green"> + <span>I'm 25 pixels tall.</span> +</div> +<div id="parent"> + <div id="child"> + <span>I'm half the height of my parent.</span> + </div> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + width: 250px; + margin-bottom: 5px; + border: 3px solid #999999; +} + +#red { + height: 50px; +} + +#green { + height: 25px; +} + +#parent { + height: 100px; +} + +#child { + height: 50%; + width: 75%; +} +</pre> + +<p>{{EmbedLiveSample('Example')}}</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('CSS3 Box', '#the-width-and-height-properties', 'height')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td>Added the <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>, <code>border-box</code>, <code>content-box</code> keywords.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Lists <code>height</code> as animatable.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Adds support for the {{cssxref("<length>")}} values and precises on which element it applies to.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#height', 'height')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}</td> + <td>{{Spec2('CSS3 Sizing')}}</td> + <td>Adds new sizing keywords for width and height.</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>Edge</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>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>4.0</td> + <td>7.0</td> + <td>1.0</td> + </tr> + <tr> + <td><code>fill</code>, <code>fit-content</code>, <code>min-content</code>, <code>max-content</code></td> + <td>{{CompatChrome(46.0)}}</td> + <td>{{CompatUnknown}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>fill</code>, <code>fit-content</code>, <code>min-content</code>, <code>max-content</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(46.0)}}</td> + <td>{{CompatUnknown}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td>{{CompatChrome(46.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/CSS/box_model">box model</a>, {{cssxref("width")}}, {{cssxref("box-sizing")}}, {{cssxref("min-height")}}, {{cssxref("max-height")}}</li> +</ul> |