页面布局是样式研发的第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;
|