From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/width/index.html | 202 +++++++++++++++++++++++++++++++++++ 1 file changed, 202 insertions(+) create mode 100644 files/zh-cn/web/css/width/index.html (limited to 'files/zh-cn/web/css/width') diff --git a/files/zh-cn/web/css/width/index.html b/files/zh-cn/web/css/width/index.html new file mode 100644 index 0000000000..3f687f1dde --- /dev/null +++ b/files/zh-cn/web/css/width/index.html @@ -0,0 +1,202 @@ +--- +title: width +slug: Web/CSS/width +tags: + - CSS + - 参考 + - 大小 + - 宽度 +translation_of: Web/CSS/width +--- +
{{CSSRef}}
+ +

width 属性用于设置元素的宽度。width 默认设置内容区域的宽度，但如果 {{cssxref("box-sizing")}} 属性被设置为 border-box，就转而设置边框区域的宽度。

+ +
{{EmbedInteractiveExample("pages/css/width.html")}}
+ + + +

{{ cssxref("min-width") }} 和 {{ cssxref("max-width") }} 属性的优先级高于 {{ cssxref("width") }}。

+ +

语法

+ +
/* <length> values */
+width: 300px;
+width: 25em;
+
+/* <percentage> value */
+width: 75%;
+
+/* Keyword values */
+width: max-content;
+width: min-content;
+width: fit-content(20em);
+width: auto;
+
+/* Global values */
+width: inherit;
+width: initial;
+width: unset;
+
+ +

width 属性也指定为：

+ + + +

值

+ +
+
{{cssxref("<length>")}}
+
使用绝对值定义宽度。
+
{{cssxref("<percentage>")}}
+
使用外层元素的容纳区块宽度（the containing block's width）的百分比定义宽度。
+
auto
+
浏览器将会为指定的元素计算并选择一个宽度。
+
max-content {{ experimental_inline }}
+
元素内容固有的（intrinsic）合适宽度。
+
min-content {{ experimental_inline }}
+
元素内容固有的最小宽度。
+
fit-content {{ experimental_inline }}
+
取以下两种值中的较大值: +
    +
  • 固有的最小宽度
    • +
  • 固有首选宽度（max-content）和可用宽度（available）两者中的较小值
    • +
+ 可表示为：min(max-content, max(min-content, <length-percentage>))
+
+ +

形式化语法

+ +
{{csssyntax}}
+ +

示例

+ +

默认宽度

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

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

+ +

像素 px 和字高 em

+ +
.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">以 px 度量的宽度</div>
+<div class="em_length">以 em 度量的宽度</div>
+ +

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

+ +

百分比

+ +
.percent {
+  width: 20%;
+  background-color: silver;
+  border: 1px solid red;
+}
+ +
<div class="percent">按照百分比度量的宽度</div>
+ +

{{EmbedLiveSample('百分比', '500px', '64px')}}

+ +

max-content

+ +
p.maxgreen {
+  background: lightgreen;
+  width: intrinsic;           /* Safari/WebKit 使用了非标准的名称 */
+  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', '500px', '64px')}}

+ +

min-content

+ +
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', '500px', '155px')}}

+ +

无障碍考虑

+ +

当页面放大以增加文本大小时，请确保 width 设置的元素不会被截断并且不会遮挡其他内容。

+ + + +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态注释
{{ SpecName('CSS3 Box', '#the-width-and-height-properties', 'width') }}{{Spec2('CSS3 Box')}}增加 max-content, min-content, available, fit-content, border-box, content-box 关键字。
{{ SpecName('CSS2.1', 'visudet.html#the-width-property', 'width') }}{{Spec2('CSS2.1')}}明确了此属性对哪些元素有效。
{{ SpecName('CSS1', '#width', 'width') }}{{Spec2('CSS1')}}初始定义。
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ +

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

+ + + +

另请参见

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