找回密码
 注册账号

QQ登录

只需一步,快速开始

《泰拉瑞亚下载-1.4.2.3版》 泰拉瑞亚服务器 - MOD模组下载

入驻泰拉战网 新手指引 - 升级 - 师徒

泰拉瑞亚合成表 泰拉卡牌 - 泰拉江湖 - 泰拉刺客

联系泰拉开发组👈进入 积分市场 - 房产交易 - 水晶获取

查看: 3544|回复: 1

[CSS] CSS Grid 网格布局教程(3容器属性:display)

[复制链接]

498

主题

18

回帖

5

广播

论坛版主

积分
257
泰拉
22
水晶
1
铜钥匙
0
银钥匙
0
金钥匙
0

【江湖新秀】【宝剑回鞘】【泰拉达人】【奥运选手】

发表于 2021-4-12 10:15:36 | 显示全部楼层 |阅读模式
三、容器属性

Grid 布局的属性分成两类。一类定义在容器上面,称为容器属性;另一类定义在项目上面,称为项目属性。这部分先介绍容器属性。

3.1 display 属性

display: grid指定一个容器采用网格布局。

  1. div {
  2.   display: grid;
  3. }
复制代码


bg2019032504.png

上图是display: grid的效果。

默认情况下,容器元素都是块级元素,但也可以设成行内元素。

  1. div {
  2.   display: inline-grid;
  3. }
复制代码


上面代码指定div是一个行内元素,该元素内部采用网格布局。

bg2019032505.png

[foo 和 bar 是前后元素位置]

上图是display: inline-grid的效果。

注意,设为网格布局以后,容器子元素(项目)的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

获得 大财神卡 一张

卡片说明:君山 遇到 [老神仙离歌] 被赠与 2 铜钥匙.

卡片效果:获得 2 铜钥匙

幻术师
法师

2052

主题

2405

回帖

2472

广播

技术小组

积分
15858
泰拉
4991
水晶
11837
铜钥匙
289
银钥匙
3
金钥匙
18

【江湖新秀】【基友证明】【水贴恶魔】【高朋满座】【论坛蘑菇党】【我是小土豪】【宝剑回鞘】【伪娘证书】【超级玛丽】【泰拉达人】【文艺青年证】【社区最高荣誉勋章】【奥运选手】【我很囧证】【宠物·缘定三生】【发帖机器】【潜水高手】【我很萌证】【动漫迷】【有头有脸】【视频爱好者】【萝莉控】【香水有毒】【朋友控】【我素软妹纸】【我是巫婆】【我是公主】【我很聪明证】【新官上任三把火】

QQ
发表于 2021-7-25 12:42:17 | 显示全部楼层
返回目录 - CSS Grid 网格布局教程 - 汇总目录
http://www.zgxsh.com/forum.php?mod=viewthread&tid=70589

每天签到都被打劫

泰拉宝石
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册账号

本版积分规则

QQ|友链申请|Archiver|手机版|小黑屋|游芯沙盒 ( 陕ICP备11006283号-1 )

GMT+8, 2024-3-28 21:00 , Processed in 0.151155 second(s), 49 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表