From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- files/zh-tw/web/css/width/index.html | 294 +++++++++++++++++++++++++++++++++++ 1 file changed, 294 insertions(+) create mode 100644 files/zh-tw/web/css/width/index.html (limited to 'files/zh-tw/web/css/width') diff --git a/files/zh-tw/web/css/width/index.html b/files/zh-tw/web/css/width/index.html new file mode 100644 index 0000000000..9459dd32e9 --- /dev/null +++ b/files/zh-tw/web/css/width/index.html @@ -0,0 +1,294 @@ +--- +title: width +slug: Web/CSS/width +translation_of: Web/CSS/width +--- +
{{CSSRef}}
+ +

The width CSS property specifies the width of an element. By default, the property defines the width of the content area. If {{cssxref("box-sizing")}} is set to border-box, however, it instead determines the width of the border area.

+ +
/* <length> values */
+width: 300px;
+width: 25em;
+
+/* <percentage> value */
+width: 75%;
+
+/* Keyword values */
+width: 25em border-box;
+width: 75% content-box;
+width: max-content;
+width: min-content;
+width: available;
+width: fit-content;
+width: auto;
+
+/* Global values */
+width: inherit;
+width: initial;
+width: unset;
+
+ + + +
{{EmbedLiveSample("width", "100%", 660, "", "", "example-outcome-frame")}}
+ +
+

注意： {{cssxref("min-width")}} 和 {{cssxref("max-width")}} 會覆寫 {{cssxref("width")}}.

+
+ +
{{cssinfo}}
+ +

Syntax

+ +

The width property is specified as either:

+ + + +

Values

+ +
+
{{cssxref("<length>")}}
+
Defines the width as an absolute value.
+
{{cssxref("<percentage>")}}
+
Defines the width as a percentage of the containing block's width. If the width of the containing block depends on the width of the element, the resulting layout is undefined.
+
border-box {{experimental_inline}}
+
If present, the preceding {{cssxref("<length>")}} or {{cssxref("<percentage>")}} is applied to the element's border box.
+
content-box {{experimental_inline}}
+
If present, the preceding {{cssxref("<length>")}} or {{cssxref("<percentage>")}} is applied to the element's content box.
+
auto
+
The browser will calculate and select a width for the specified element.
+
fill {{experimental_inline}}
+
Use the fill-available inline size or fill-available block size, as appropriate to the writing mode.
+
max-content {{experimental_inline}}
+
The intrinsic preferred width.
+
min-content {{experimental_inline}}
+
The intrinsic minimum width.
+
available {{experimental_inline}}
+
The containing block width minus horizontal margin, border and padding.
+
fit-content {{experimental_inline}}
+
The larger of: +
    +
  • the intrinsic minimum width
    • +
  • the smaller of the intrinsic preferred width and the available width
    • +
+
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

範例

+ +

預設寬度

+ +
p.goldie {
+  background: gold;
+}
+ +
<p class="goldie">The Mozilla community produces a lot of great software.</p>
+ +

{{EmbedLiveSample('Default_width', '500px', '64px')}}

+ +

像素和相對大小

+ +
.px_length {
+  width: 200px;
+  background-color: red;
+  color: white;
+  border: 1px solid black;
+}
+
+.em_length {
+  width: 20em;
+  background-color: white;
+  color: red;
+  border: 1px solid black;
+}
+
+ +
<div class="px_length">Width measured in px</div>
+<div class="em_length">Width measured in em</div>
+ +

{{EmbedLiveSample('Pixels_and_ems', '500px', '64px')}}

+ +

百分比

+ +
.percent {
+  width: 20%;
+  background-color: silver;
+  border: 1px solid red;
+}
+ +
<div class="percent">Width in percentage</div>
+ +

{{EmbedLiveSample('Percentage', '500px', '64px')}}

+ +

內容最大值

+ +
p.maxgreen {
+  background: lightgreen;
+  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
+  width: -moz-max-content;    /* Firefox/Gecko */
+  width: -webkit-max-content; /* Chrome */
+}
+ +
<p class="maxgreen">The Mozilla community produces a lot of great software.</p>
+ +

{{EmbedLiveSample('max-content_2', '500px', '64px')}}

+ +

內容最小值

+ +
p.minblue {
+  background: lightblue;
+  width: -moz-min-content;    /* Firefox */
+  width: -webkit-min-content; /* Chrome */
+}
+ +
<p class="minblue">The Mozilla community produces a lot of great software.</p>
+ +

{{EmbedLiveSample('min-content_2', '500px', '155px')}}

+ +

規範

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Box', '#the-width-and-height-properties', 'width')}}{{Spec2('CSS3 Box')}}Added the max-content, min-content, available, fit-content, border-box, content-box keywords.
{{SpecName('CSS3 Transitions', '#animatable-css', 'width')}}{{Spec2('CSS3 Transitions')}}Lists width as animatable.
{{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}}{{Spec2('CSS2.1')}}Precises on which element it applies to.
{{SpecName('CSS1', '#width', 'width')}}{{Spec2('CSS1')}}Initial definition.
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}{{Spec2('CSS3 Sizing')}}Adds new sizing keywords for width and height.
+ +

瀏覽器相容性

+ + + +

{{Compat("css.properties.width")}}

+ +

參考

+ + -- cgit v1.2.3-54-g00ecf