外链论坛

 找回密码
 立即注册
搜索
查看: 75|回复: 2

只要一行代码,实现五种 CSS 经典布局

[复制链接]

3016

主题

2万

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99139149
发表于 2024-6-30 08:56:31 | 显示全部楼层 |阅读模式

页面布局是样式研发第1步,是 CSS 最要紧的功能之一。

常用的页面布局,其实就那样几个。下面我会介绍5个经典布局,只要把握了它们,就能应对绝大都数常规页面。

这几个布局都是自适应的,自动适配桌面设备和移动设备。代码实现很简单,核心代码仅有一行,有很大的学习价值,内容很实用。

1、空间居中布局

空间居中布局指的是,不管容器的体积,项目总是占据中心点。

CSS 代码如下

.container { display: grid; place-items: center; }

上面代码必须写在容器上,指定为 Grid 布局。核心代码是place-items属性那一行,它是一个简写形式。

place-items: <align-items> <justify-items>;

align-items属性掌控垂直位置,justify-items属性掌控水平位置。这两个属性的值一致时,就能够合并写成一个值。因此,place-items: center;等同于place-items: center center;。

同理,左上角布局能够写成下面这般

place-items: start;

右下角布局。

place-items: end;
回复

使用道具 举报

3003

主题

2万

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99139269
发表于 2024-10-24 13:13:19 | 显示全部楼层
我们有着相似的经历,你的感受我深有体会。
回复

使用道具 举报

3016

主题

2万

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99139149
 楼主| 发表于 2024-10-28 12:21:45 | 显示全部楼层
对于这个问题,我有不同的看法...
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|外链论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-9 06:25 , Processed in 0.068064 second(s), 19 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.