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/max-width/index.html | 214 +++++++++++++++++++++++++++++++ 1 file changed, 214 insertions(+) create mode 100644 files/zh-cn/web/css/max-width/index.html (limited to 'files/zh-cn/web/css/max-width') diff --git a/files/zh-cn/web/css/max-width/index.html b/files/zh-cn/web/css/max-width/index.html new file mode 100644 index 0000000000..10a4e12f17 --- /dev/null +++ b/files/zh-cn/web/css/max-width/index.html @@ -0,0 +1,214 @@ +--- +title: max-width +slug: Web/CSS/max-width +translation_of: Web/CSS/max-width +--- +

{{ CSSRef() }}

+ +

摘要

+ +

max-width 属性用来给元素设置最大宽度值. 定义了max-width的元素会在达到max-width值之后避免进一步按照width属性设置变大.

+ +

{{ Cssxref("max-width") }} 会覆盖{{cssxref("width")}}设置, 但 {{ Cssxref("min-width") }}设置会覆盖 {{ Cssxref("max-width") }}.

+ +

{{cssinfo}}

+ +

语法

+ +
/* <长度> 值 */
+max-width: 3.5em;
+
+/* <百分比> 值 */
+max-width: 75%;
+
+/* 关键字 */
+max-width: none;
+max-width: max-content;
+max-width: min-content;
+max-width: fit-content;
+max-width: fill-available;
+
+/* 全局设置 */
+max-width: inherit;
+max-width: initial;
+max-width: unset;
+
+ +

可选值

+ +
+
none
+
元素未设置最大值
+
<长度>
+
请参阅{{cssxref("<length>")}}所提及的长度单位.
+
<百分比>
+
以父级块级容器宽度的百分比{{cssxref("<percentage>")}}作为最大宽度.
+
max-content{{experimental_inline()}}
+
The intrinsic preferred width.
+
min-content{{experimental_inline()}}
+
The intrinsic minimum width.
+
fill-available{{experimental_inline()}}
+
The containing block width minus horizontal margin, border, and padding. Some browsers implement an ancient name for this keyword, available.
+
fit-content{{experimental_inline()}}
+
与max-content等价.
+
+ +

形式语法

+ +
{{csssyntax}}
+ +

例子

+ +

在下面的例子里,id为"child"的<div>元素设置了width值, 使它的宽度与父元素"parent"相等(100%),但是max-width值限制了它最大宽度只能到150px.

+ +
+
<div id="parent">
+    <div id="child">
+        The Mozilla community produces a lot of great software.
+    </div>
+</div>
+
+ +
#parent { width: 300px; }
+
+#child  { background: gold;
+          width: 100%;
+          max-width: 150px;
+        }
+
+
+ +

{{EmbedLiveSample("basic-max-width-demo", 350, 100)}}

+ +

fit-content 值可以用来给元素设置基于其内容大小的宽度:

+ +
+ + +
#parent { background: lightblue;
+          width: 300px; }
+
+#child  { background: gold;
+          width: 100%;
+          max-width: -moz-fit-content;
+          max-width: -webkit-fit-content;
+        }
+
+
+ +

{{EmbedLiveSample("fit-content-demo", 400, 100)}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'max-width') }}{{ Spec2('CSS3 Sizing') }}Adds the max-content, min-content, fit-content, and fill-available keywords.
+ Both CSS3 Box and CSS3 Writing Modes drafts defined at some point these keywords. These drafts are superseded by this spec.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'max-width') }}{{ Spec2('CSS3 Transitions') }}Defines max-width as animatable.
{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'max-width') }}{{ Spec2('CSS2.1') }}Initial definition.
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatGeckoDesktop("1.0")}}7.04.02.0.2 (416),
+ buggy before
applies to <table> [1]{{ CompatNo() }}{{CompatVersionUnknown()}}{{ CompatNo() }}{{CompatVersionUnknown()}}{{ CompatNo() }}
max-content, min-content, fit-content, and fill-available {{ experimental_inline() }}{{ CompatNo() }} [3]{{CompatGeckoDesktop("1.9")}}{{property_prefix("-moz")}} [2]{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }} [3]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1] CSS 2.1 explicitly leaves the behavior of max-width with {{ HTMLElement("table") }} undefined. Therefore any behavior is CSS2.1-compliant; newer CSS specifications may define this behavior, so Web developers shouldn't rely on a specific one now.

+ +

[2] Gecko experimentally implements the definitions given in CSS3 Basic Box. This one defines available and not fill-available. Also the definition of fit-content is simpler than in CSS3 Sizing.

+ +

[3] WebKit implements an earlier proposal for setting the height to an intrinsic height: the keywords intrinsic, instead of max-content, and min-intrinsic, instead of min-content There is no equivalent for fill-available or fit-content.

+ +

参考链接

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