只要一行代码，实现五种 CSS 经典布局
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">页面布局是样式<span style="color: black;">研发</span>的<span style="color: black;">第1</span>步，<span style="color: black;">亦</span>是 CSS 最<span style="color: black;">要紧</span>的功能之一。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-6bfedeceafbbf72c1489cb1da800c1a2_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">常用的页面布局，其实就<span style="color: black;">那样</span>几个。下面我会介绍5个经典布局，只要<span style="color: black;">把握</span>了它们，就能应对绝大<span style="color: black;">都数</span>常规页面。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这几个布局都是自适应的，自动适配桌面设备和移动设备。代码实现很简单，核心代码<span style="color: black;">仅有</span>一行，有很大的学习价值，内容<span style="color: black;">亦</span>很实用。</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">1、</span>空间居中布局</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">空间居中布局指的是，不管容器的<span style="color: black;">体积</span>，项目总是占据中心点。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-57982d3eaeb92aa497577df29f52f690_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">CSS 代码如下</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.container {
display: grid;
place-items: center;
}</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">上面代码<span style="color: black;">必须</span>写在容器上，指定为 Grid 布局。核心代码是place-items属性那一行，它是一个简写形式。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">place-items: <align-items> <justify-items>;</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">align-items属性<span style="color: black;">掌控</span>垂直位置，justify-items属性<span style="color: black;">掌控</span>水平位置。这两个属性的值一致时，就<span style="color: black;">能够</span>合并写成一个值。<span style="color: black;">因此</span>，place-items: center;等同于place-items: center center;。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">同理，左上角布局<span style="color: black;">能够</span>写成下面<span style="color: black;">这般</span>。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">place-items: start;</div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-9b8ed4cc50cd54245644ba6ceb910648_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">右下角布局。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">place-items: end;</div>
我们有着相似的经历，你的感受我深有体会。 对于这个问题，我有不同的看法...
页:
[1]