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/height/index.html | 167 ++++++++++++++++++++++++++++++++++ 1 file changed, 167 insertions(+) create mode 100644 files/zh-cn/web/css/height/index.html (limited to 'files/zh-cn/web/css/height/index.html') diff --git a/files/zh-cn/web/css/height/index.html b/files/zh-cn/web/css/height/index.html new file mode 100644 index 0000000000..1666465e3f --- /dev/null +++ b/files/zh-cn/web/css/height/index.html @@ -0,0 +1,167 @@ +--- +title: height +slug: Web/CSS/height +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/height +--- +
{{CSSRef()}}
+ +
height CSS 属性指定了一个元素的高度。默认情况下，这个属性决定的是内容区（ content area）的高度，但是，如果将 {{cssxref("box-sizing")}} 设置为  border-box , 这个属性决定的将是边框区域（border area）的高度。
+ +
{{EmbedInteractiveExample("pages/css/height.html")}}
+ +
{{cssxref("min-height")}} 和 {{cssxref("max-height")}} 属性会覆盖  {{Cssxref("height")}}。
+ +

语法

+ +
/* Keyword value */
+height: auto;
+
+/* <length> values */
+height: 120px;
+height: 10em;
+
+/* <percentage> value */
+height: 75%;
+
+/* Global values */
+height: inherit;
+height: initial;
+height: unset;
+ +

值

+ +
+
{{cssxref("<length>")}}
+
将高度定义为一个绝对值。
+
{{cssxref("<percentage>")}}
+
将高度定义为相对包含块高度的百分比。
+
border-box {{experimental_inline}}
+
如果设置该值，则 {{cssxref("<length>")}} 或者 {{cssxref("<percentage>")}} 会设置为该元素的 border box。
+
content-box {{experimental_inline}}
+
如果设置该值，则 {{cssxref("<length>")}} 或者 {{cssxref("<percentage>")}} 会设置为该元素的 content box。
+
+ +
+
auto
+
由浏览器为元素计算并选择一个高度。
+
fill {{experimental_inline}}
+
根据文字方向，使用 fill-available 作为行大小或者块大小。
+
max-content {{experimental_inline}}
+
设置为允许的最大高度。
+
min-content {{experimental_inline}}
+
设置为允许的最小高度.
+
available {{experimental_inline}}
+
包含块高度减去当前元素的边距，边框和填充。
+
fit-content {{experimental_inline}}
+
将 fill-content 公式中的可用位置替换为特定的参数以进行使用，如：min(max-content, max(min-content, ))
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

示例

+ +

HTML

+ +
<div id="taller">I'm 50 pixels tall.</div>
+<div id="shorter">I'm 25 pixels tall.</div>
+<div id="parent">
+  <div id="child">
+    I'm half the height of my parent.
+  </div>
+</div>
+ +

CSS

+ +
div {
+  width: 250px;
+  margin-bottom: 5px;
+  border: 2px solid blue;
+}
+
+#taller {
+  height: 50px;
+}
+
+#shorter {
+  height: 25px;
+}
+
+#parent {
+  height: 100px;
+}
+
+#child {
+  height: 50%;
+  width: 75%;
+}
+
+ +

结果

+ +

{{EmbedLiveSample('示例', 'auto', 240)}}

+ +

无障碍问题

+ +

确保设定了 height 的元素在显示上不会被截断，或者当页面放大时增大的字体大小不会遮挡其他内容。 

+ + + +

规范

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

{{cssinfo}}

+ +

浏览器兼容性

+ +

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

+ +

参见

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