[HTML/CSS]colum-gap属性

tianlai 发布于2019-04-23 11:52 / 591人阅读

摘要：属性定义及使用说明的属性指定的列之间的差距。注意如果指定了列之间的距离规则，它会取平均值。语法值描述一个指定的长度，将设置列之间的差距指定一个列之间的普通差距。

属性定义及使用说明

column-gap的属性指定的列之间的差距。

注意： 如果指定了列之间的距离规则，它会取平均值。

语法

column-gap: length|normal;

值	描述
length	一个指定的长度，将设置列之间的差距
normal	指定一个列之间的普通差距。 W3C建议1EM值

Flex layout(存在兼容性问题)

HTML

1 <div id="flexbox">
2   <div>div>
3   <div>div>
4   <div>div>
5 div>

CSS

#flexbox {
  display: flex;
  height: 100px;
  column-gap: 20px;
}
#flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: auto;
}

Result

Grid layout(存在兼容性问题)

HTML

1 <div id="grid">
2   <div>div>
3   <div>div>
4   <div>div>
5 div>

CSS

 1 #grid {
 2   display: grid;
 3   height: 100px;
 4   grid-template-columns: repeat(3, 1fr);
 5   grid-template-rows: 100px;
 6   column-gap: 20px;
 7 }
 8 
 9 #grid > div {
10   border: 1px solid green;
11   background-color: lime;
12 }

Result

Multi-column layout

HTML

1 <p class="content-box">女流直播和解说的游戏不同于国内常见的流行游戏，以优秀的独立游戏和极具艺术性富含哲理的顶尖大作为主。独立游戏的走向相对地取决于开发者，他们可以做自己想做的游戏而不受限制，所以这类游戏往往带有作者的态度和表达。这类游戏不同于声势浩大的大型游戏，却总能给人带来出乎意料的惊喜。p>

CSS

1 .content-box {
2   column-count: 3;
3   column-gap: 40px;
4 }

Result

GPU云服务器云服务器 html css HTML+CSS html+css: 学完html css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1264.html

[译]HTML&CSS Lesson1: 构建第一张页面

摘要：元素是使用小于号和大于号包裹元素名来标示。一个结束标签表示元素的结束它由小于号元素名组成例如。和嵌套在内，它们页面中都是可视的。使用选择器类型选择器类型选择器也叫作元素选择器根据元素类型选择元素。可以的话，请想象一下互联网没有发明之前的日子。网站还不存在，纸质的书本是我们主要的信息来源，而在书本中查询我们想要的资料会耗费相当多的精力和时间。而如今，你打开个浏览器用搜索引擎搜索，任...

X_AirDu 2019-08-29 13:01 评论0 收藏0
[译]HTML&CSS Lesson1: 构建第一张页面

摘要：元素是使用小于号和大于号包裹元素名来标示。一个结束标签表示元素的结束它由小于号元素名组成例如。和嵌套在内，它们页面中都是可视的。使用选择器类型选择器类型选择器也叫作元素选择器根据元素类型选择元素。可以的话，请想象一下互联网没有发明之前的日子。网站还不存在，纸质的书本是我们主要的信息来源，而在书本中查询我们想要的资料会耗费相当多的精力和时间。而如今，你打开个浏览器用搜索引擎搜索，任...

LuDongWei 2019-08-01 17:13 评论0 收藏0
[译]谷歌 HTML/CSS 规范

摘要：通用格式规范缩进一次缩进个空格，不要使用或者混合和空格的缩进。语义化根据使用场景选择正确的元素有时被错误的称为标签。格式规范引号属性值用双引号。风格规范和命名使用有含义的和名称。和单位值为时不用添加单位。原文 Google HTML/CSS Style Guide 背景这篇文章定义了 HTML 和 CSS 的格式和代码规范，旨在提高代码质量和协作效率。通用样式规范协议图片，样...

seasonley 2019-08-29 11:22 评论0 收藏0
[译]谷歌 HTML/CSS 规范

摘要：通用格式规范缩进一次缩进个空格，不要使用或者混合和空格的缩进。语义化根据使用场景选择正确的元素有时被错误的称为标签。格式规范引号属性值用双引号。风格规范和命名使用有含义的和名称。和单位值为时不用添加单位。原文 Google HTML/CSS Style Guide 背景这篇文章定义了 HTML 和 CSS 的格式和代码规范，旨在提高代码质量和协作效率。通用样式规范协议图片，样...

whinc 2019-08-01 15:47 评论0 收藏0
谷歌HTML/CSS规范

摘要：通用格式规范缩进一次缩进个空格，不要使用或者混合和空格的缩进。语义化根据使用场景选择正确的元素有时被错误的称为标签。格式规范引号属性值用双引号。风格规范和命名使用有含义的和名称。背景这篇文章定义了 HTML 和 CSS 的格式和代码规范，旨在提高代码质量和协作效率。通用样式规范协议省略图片、样式、脚本以及其他媒体文件 URL 的协议部分（http:,https:），除非文件在...

whataa 2019-08-30 13:19 评论0 收藏0