CSS 实现 10 种现代布局的代码

CSS 实现现代布局有很多种方式，但是通常我们可以通过浮动、定位、Flexbox 和 CSS Grid 等技术来实现。下面是一份完整的攻略，让你了解如何实现 10 种常见的现代布局，并包含了两个示例说明。

1. 上下左右布局

这种布局方式也被称为定位布局，需要使用到 position 属性来设置元素的位置。通常，我们可以将容器设置为 position: relative;，然后将内部的子元素设置为 position: absolute; 并且设置 top、right、bottom 和 left 属性来控制元素的位置。

<div class="container">
  <div class="box"></div>
</div>

.container {
  position: relative;
}

.box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

2. 左右布局

这种布局方式最常见的实现方式是通过浮动来实现。我们可以将左侧的子元素设置为 float: left;，右侧的子元素设置为 float: right; 即可。

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

.left {
  float: left;
}

.right {
  float: right;
}

示例说明：

一个简单的左右布局可以用来展示内容和侧栏。比如一个博客网站可以使用这种布局，将文章放在左侧，将相关文章链接放在右侧。

<div class="container">
  <div class="content">
    <h1>文章标题</h1>
    <p>文章内容</p>
  </div>
  <div class="sidebar">
    <h2>相关文章</h2>
    <ul>
      <li><a href="#">文章1</a></li>
      <li><a href="#">文章2</a></li>
      <li><a href="#">文章3</a></li>
    </ul>
  </div>
</div>

.content {
  float: left;
  width: 70%;
}

.sidebar {
  float: right;
  width: 30%;
}

3. 两栏布局

这种布局方式通常使用 Flexbox 技术来实现。我们需要将容器设置为 display: flex;，然后将左侧的子元素设置为 flex: 1;（或者设置一个固定宽度），右侧的子元素设置为 flex: 2;（或者设置一个固定宽度）。

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

.container {
  display: flex;
}

.left {
  flex: 1;
}

.right {
  flex: 2;
}

4. 三栏布局

这种布局方式也适合使用 Flexbox 技术来实现。我们需要将容器设置为 display: flex;，然后将左侧的子元素设置为 flex: 1;，中间的子元素设置为 flex: 2;，右侧的子元素设置为 flex: 1;。

<div class="container">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>

.container {
  display: flex;
}

.left {
  flex: 1;
}

.middle {
  flex: 2;
}

.right {
  flex: 1;
}

5. 等高布局

这种布局方式可以使用 Flexbox 或者 Grid 技术来实现。我们需要让容器中的所有子元素高度相等，可以通过设置 height 或者 flex: 1; 来实现。

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.container {
  display: flex;
}

.item {
  flex: 1;
}

6. 栅格布局

这种布局方式同样可以使用 Flexbox 或者 Grid 技术来实现。我们需要将容器分割为一定数量的行和列，然后将每个子元素放在指定的位置上。

<div class="container">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
  <div class="item item4"></div>
  <div class="item item5"></div>
  <div class="item item6"></div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.item1 {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.item2 {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}

.item3 {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

.item4 {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}

.item5 {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}

.item6 {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
}

7. 非对称布局

这种布局方式可以使用 Flexbox 或者 Grid 技术来实现。我们需要将容器中的子元素放置在不同的位置上，并且使用 align-self 和 justify-self 来进行微调。

<div class="container">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
  <div class="item item4"></div>
  <div class="item item5"></div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.item1 {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.item2 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  align-self: end;
}

.item3 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  justify-self: end;
}

.item4 {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}

.item5 {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
  align-self: start;
}

示例说明：

非对称布局可以用来展示不同大小的图片和文字。比如一个图片库网站可以使用这种布局，让大图和描述文字分别在不同的位置上，以达到更好的视觉效果。

<div class="container">
  <div class="item item1"><img src="large-image.jpg"></div>
  <div class="item item2">描述文字</div>
  <div class="item item3"><img src="small-image1.jpg"></div>
  <div class="item item4"><img src="small-image2.jpg"></div>
  <div class="item item5"><img src="small-image3.jpg"></div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.item1 {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.item2 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  align-self: end;
}

.item3 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  justify-self: end;
}

.item4 {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}

.item5 {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
  align-self: start;
}

8. 圣杯布局

这种布局方式通常用来展示网页的头部、底部和主内容区域。我们可以使用 Float 技术来实现。通常，我们可以将主内容 div 先放在 HTML 中，然后使用 float: left; 将其向左浮动，然后设置三个定位的子元素，一个放在左边、一个放在右边、一个放在主内容区域下方，大小和位置根据具体情况设置。

<div class="container">
  <div class="main-content">这里是主内容</div>
  <div class="left-sidebar">这里是左侧边栏</div>
  <div class="right-sidebar">这里是右侧边栏</div>
  <div class="header">这里是头部</div>
  <div class="footer">这里是底部</div>
</div>

.container {
  padding-left: 200px;
  padding-right: 200px;
}

.main-content {
  float: left;
  width: 100%;
}

.left-sidebar {
  float: left;
  width: 200px;
  margin-left: -100%;
  position: relative;
  left: -200px;
}

.right-sidebar {
  float: right;
  width: 200px;
  margin-right: -100%;
  position: relative;
  right: -200px;
}

.header, .footer {
  clear: both;
}

9. 双飞翼布局

这种布局方式也可以用来展示网页的头部、底部和主内容区域，与圣杯布局相似。但是双飞翼布局相比于圣杯布局，使用了更少的 HTML 标记。通常，我们可以将主内容 div 放在 HTML 中，使用 float: left; 浮动它，并且使用负边距将它移出容器的左右边距。然后，我们在主内容区域内部使用一个额外的 div 来包裹着放置左边栏 div 和右边栏 div，再对这个额外的 div 应用 margin-left 和 margin-right 来设置左右边栏的宽度、位置。

<div class="container">
  <div class="main-content">
    <div class="inner-content">这里是主内容</div>
  </div>
  <div class="left-sidebar">这里是左侧边栏</div>
  <div class="right-sidebar">这里是右侧边栏</div>
</div>

.container {
  padding-left: 200px;
  padding-right: 200px;
}

.main-content {
  float: left;
  width: 100%;
}

.inner-content {
  margin-left: 200px;
  margin-right: 200px;
}

.left-sidebar {
  float: left;
  width: 200px;
  margin-left: -100%;
}

.right-sidebar {
  float: right;
  width: 200px;
  margin-right: -100%;
}

10. Sticky Footer 布局

这种布局方式可以用来实现一个 "粘性" 底部布局，即当页面内容较少时，底部区域始终固定在视图底端。我们可以通过使用 Flexbox 或者 Grid 技术来实现。主要思路是将页面设置为至少充满整个视图，然后将底部区域固定在底部。

<body>
  <div class="container">
    <div class="content"></div>
  </div>
  <div class="footer"></div>
</body>

html, body {
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.container {
  flex: 1;
}

.footer {
  flex-shrink: 0;
}

示例说明：

Sticky Footer 布局可以用来实现网页的底部区域（比如版权信息或者联系方式）固定在底部，不管页面内容多少。比如一个企业官网可以使用这种布局，让联系方式一直在底端，方便用户获取相关信息。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS 实现 10 种现代布局的代码 - Python技术站