|
页面布局是样式研发的第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;
| 
发表于 2024-6-30 08:56:31
楼主