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/gap/index.html | 211 +++++++++++++++++++++++++++++++++++++ 1 file changed, 211 insertions(+) create mode 100644 files/zh-cn/web/css/gap/index.html (limited to 'files/zh-cn/web/css/gap/index.html') diff --git a/files/zh-cn/web/css/gap/index.html b/files/zh-cn/web/css/gap/index.html new file mode 100644 index 0000000000..c95b2c5897 --- /dev/null +++ b/files/zh-cn/web/css/gap/index.html @@ -0,0 +1,211 @@ +--- +title: gap (grid-gap) +slug: Web/CSS/gap +tags: + - CSS + - CSS Flexible Boxes + - CSS Grid +translation_of: Web/CSS/gap +--- +
{{CSSRef}}
+ +

gap 属性是用来设置网格行与列之间的间隙（{{glossary("gutters")}}），该属性是{{cssxref("row-gap")}} and {{cssxref("column-gap")}}的简写形式。

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

CSS Grid Layout 起初是用 {{cssxref('grid-gap')}} 属性来定义的，目前逐渐被 gap 替代。但是，为了兼容那些不支持 gap 属性的浏览器，你需要像上面的例子一样，使用带有前缀的属性。

+
+ +

语法

+ +
/* One <length> value */
+gap: 20px;
+gap: 1em;
+gap: 3vmin;
+gap: 0.5cm;
+
+/* One <percentage> value */
+gap: 16%;
+gap: 100%;
+
+/* Two <length> values */
+gap: 20px 10px;
+gap: 1em 0.5em;
+gap: 3vmin 2vmax;
+gap: 0.5cm 2mm;
+
+/* One or two <percentage> values */
+gap: 16% 100%;
+gap: 21px 82%;
+
+/* calc() values */
+gap: calc(10% + 20px);
+gap: calc(20px + 10%) calc(10% - 5px);
+
+/* Global values */
+gap: inherit;
+gap: initial;
+gap: unset;
+
+ +

该属性用来表示 <'row-gap'> 和 <'column-gap'>的值，而<'column-gap'>是可选的，假如 <'column-gap'> 缺失的话，则会被设置成跟<'row-gap'>一样的的值。

+ +

<'row-gap'> and <'column-gap'> 都可以用  <length> 或者 <percentage> 来表示。

+ +

值

+ +
+
{{cssxref("<length>")}}
+
网格线之间的间隙宽度。
+
{{cssxref("<percentage>")}}
+
网格线直接的间隙宽度，相对网格容器的百分比。
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +

Flex布局

+ +

{{SeeCompatTable}}

+ +

HTML

+ +
<div id="flexbox">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+
+ +

CSS

+ +
#flexbox {
+  display: flex;
+  flex-wrap: wrap;
+  width: 300px;
+  gap: 20px 5px;
+}
+
+#flexbox > div {
+  border: 1px solid green;
+  background-color: lime;
+  flex: 1 1 auto;
+  width: 100px;
+  height: 50px;
+
+}
+
+ +

Result

+ +

{{EmbedLiveSample('Flex布局', "auto", "120px")}}

+ +

Grid布局

+ +

HTML

+ +
<div id="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

CSS

+ +
#grid {
+  display: grid;
+  height: 200px;
+  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
+  gap: 20px 5px;
+}
+
+#grid > div {
+  background-color: lime;
+}
+
+ +

Result

+ +

{{EmbedLiveSample('Grid布局', 'auto', 120)}}

+ +

多列布局

+ +

HTML

+ +
<p class="content-box">
+  This is some multi-column text with a 40px column
+  gap created with the CSS <code>gap</code> property.
+  Don't you think that's fun and exciting? I sure do!
+</p>
+
+ +

CSS

+ +
.content-box {
+  column-count: 3;
+  gap: 40px;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("多列布局", "auto", "120px")}}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName("CSS3 Box Alignment", "#propdef-gap", "gap")}}{{Spec2("CSS3 Box Alignment")}}Initial definition
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

在Flex 布局的兼容性

+ +

{{Compat("css.properties.gap.flex_context")}}

+ +

在Grid layout的兼容性

+ +

{{Compat("css.properties.gap.grid_context")}}

+ +

多列布局的兼容性

+ +

{{Compat("css.properties.gap.multicol_context")}}

+ +

参见

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