CSS布局技巧 实践记录｜ 青训营

略略略62
110 阅读6分钟

本文将针对一些CSS布局技巧，给出具体的应用场景和实操实践。

Part1：常用的一些 CSS 布局技巧：

  1. 浮动（Float）布局：

    • 使用 float 属性使元素脱离正常的文档流，使其能够在父容器内浮动。
    • 常用于创建多列布局，如左右两栏布局。

HTML：

<div class="container">
  <div class="left-column">左侧内容</div>
  <div class="right-column">右侧内容</div>
</div>

CSS：

.container {
  width: 100%;
  overflow: hidden; /* 清除浮动的影响 */
}

.left-column {
  float: left;
  width: 30%;
  background-color: lightblue;
}

.right-column {
  float: right;
  width: 70%;
  background-color: lightgreen;
}

  1. 定位（Positioning）布局：

    • 使用 position 属性将元素放置在页面的指定位置。
    • 常用的 position 值有 relative、absolute 和 fixed。

image.png

  1. 弹性盒子布局（Flexbox） ：

    • 使用 display: flex 创建一个弹性容器，其中的子元素成为弹性项目。
    • 弹性盒子布局提供了灵活且强大的对齐和排列子元素的方式。
    • （示例见后文）

  2. 网格布局（Grid Layout） ：

    • 使用 display: grid 创建一个网格容器，其中的子元素成为网格项目。
    • 网格布局提供了更复杂的网格化布局能力，比如多行多列布局和不规则网格。
    • （示例见后文）

  3. Table 布局：

    • 使用 display: table、display: table-row 和 display: table-cell 创建表格式布局。
    • 只有在需要展示真正的表格数据时，才建议使用 Table 布局。

HTML:

<table class="table-layout">
  <tr>
    <td class="left-column">左侧内容</td>
    <td class="center-column">中间内容</td>
    <td class="right-column">右侧内容</td>
  </tr>
</table>

CSS:

.table-layout {
  width: 100%;
  border-collapse: collapse; /* 合并边框，使表格看起来更整齐 */
}

.left-column, .center-column, .right-column {
  padding: 10px;
  border: 1px solid #333; /* 添加边框，使表格内容更易于区分 */
}

.left-column {
  width: 30%;
  background-color: lightblue;
}

.center-column {
  width: 40%;
  background-color: lightgreen;
}

.right-column {
  width: 30%;
  background-color: lightyellow;
}

  1. 多列布局（Multiple Columns） ：

    • 使用 column-count 和 column-gap 将内容划分为多列。

  2. 层叠式布局（Layered Layout） ：

    • 使用 z-index 控制元素的层叠顺序，从而创建不同层级的布局。
    • z-index 属性用于控制层叠顺序，具有较高值的层级将覆盖位于下方的层级。

  3. 圣杯布局（Holy Grail Layout） ：

    • 使用负边距和相对定位实现左中右三栏布局，其中中间列优先于其他列。

HTML:

<div class="container">
  <div class="center-column">
    <!-- 中间内容区 -->
    <main>
      <p>BALABALA...</p>
    </main>
  </div>
  <div class="left-column">
    <!-- 左侧侧边栏 -->
    <aside>
      <ul>
        <li>侧边栏项目 1</li>
        <li>侧边栏项目 2</li>
        <li>侧边栏项目 3</li>
      </ul>
    </aside>
  </div>
  <div class="right-column">
    <!-- 右侧侧边栏 -->
    <aside>
      <ul>
        <li>侧边栏项目 A</li>
        <li>侧边栏项目 B</li>
        <li>侧边栏项目 C</li>
      </ul>
    </aside>
  </div>
</div>

CSS:

.left-column, .right-column {
  /* 设置固定宽度，这里可以根据需要调整 */
  width: 200px;
  /* 可选：为了可视化效果，添加一些样式 */
  background-color: lightgreen;
  padding: 10px;
}

.left-column {
  /* 设置左侧侧边栏的位置 */
  order: -1;
}

.right-column {
  /* 设置右侧侧边栏的位置 */
  order: 1;
}

通过设置 order 属性，我们让左侧侧边栏（order：-1）优先显示在内容区（不设置的话，默认order：0）前面，右侧侧边栏（order：1）优先显示在内容区后面。

  1. 双飞翼布局（Double Wings Layout） ：

    • 类似于圣杯布局，但使用负边距优化 HTML 结构，使代码更加简洁。

（HTML同圣杯布局）

CSS：

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

main {
  margin: 0 200px; 
}

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

.right-column {
  float: left;
  width: 200px;
  margin-left: -200px; 
}

中间内容区使用了 width: 100%;，使其宽度自适应，然后通过设置左右侧边栏的外边距来让侧边栏位置优先于内容区。通过调整外边距的值，可以控制左右侧边栏的位置。 10. 响应式布局（Responsive Layout） ：

-   使用媒体查询和百分比布局使网页在不同设备上适应不同的屏幕尺寸。

11. 悬挂式布局（Hang Layout） ：

-   使用负边距将一个元素“悬挂”在另一个元素的上方。

HTML：

<div class="hang-layout-container">
  <div class="hang-element">悬挂元素</div>
  <div class="main-content">
    <!-- 主要内容区 -->
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod...</p>
  </div>
</div>

CSS：

.hang-layout-container {
  position: relative;
  height: 200px;
}

.hang-element {
  position: absolute;
  top: -20px; 
  left: 20px; 
}

.main-content {
  /* 为了避免悬挂元素遮挡主要内容区，添加一些内边距 */
  padding-top: 40px;
}

Part2：实操常见需求

1.水平垂直居中

- 使用Flexbox

HTML：（"centered-box"是要居中的元素）

<div class="container">
  <div class="centered-box">
    <!-- 内容 -->
  </div>
</div>

CSS:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

注意：justify-content: center 和 align-items: center 这两个属性通常是应用于父元素，用于控制其子元素在主轴（水平方向）和交叉轴（垂直方向）上的对齐方式。且这两个属性只能作用于 Flexbox 弹性容器，如果应用于其他非 Flexbox 容器，是不会生效的。

- 使用Flexbox和margin: auto（HTML同上）

CSS:

.container {
  display: flex; 
}

.centered-box {
  margin: auto;
}

注意：margin用法： 只有1个参数（上下左右外边距都是xx）

有2个参数（上下 左右）

有4个参数（上 右 下 左）

- 使用绝对定位（HTML同上）

CSS:

.container {
  position: relative;
  width: 300px;
  height: 200px;
}

.centered-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

注意：1.translate 函数有两个参数，第一个参数 -50% 表示在水平方向上将元素的中心点水平向左移动50%的宽度，第二个参数 -50% 表示在垂直方向上将元素的中心点垂直向上移动50%的高度。

2.为了让 transform: translate(-50%, -50%); 正确工作，元素的父容器需要设置 position: relative; 或 position: absolute;。因为 translate 函数是基于元素的包含块来计算移动距离的，而相对定位或绝对定位的元素会将其父容器作为包含块。（联系今天课上老师说的非static类元素理解。如果一直找不到非static的父元素，可能会找html根元素）

- 使用 Grid 布局（HTML同上）

CSS：

.container {
  display: grid;
  place-items: center; /* 快捷属性，水平垂直居中对齐 */
}

2.多元素水平居中

- 使用Flexbox

HTML：

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

CSS:

.container {
  display: flex;
  justify-content: center;
}

注意：justify-content：用于在主轴（水平方向）上对齐弹性元素，align-items：用于在侧轴（垂直方向）上对齐弹性元素。

关于 justify-content 和 align-items，今天的课上有两张图：

image.png

image.png - 使用绝对定位和transform（HTML同上）

CSS：

.container {
  position: relative;
}

.box {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

注意：当使用 transform: translateX(-50%); 时，元素将以其自身宽度的 50% 为偏移量向左平移。

- 使用 Grid 布局（HTML同上）

CSS：

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

注意：在Grid布局中使用的是 justify-items 和 align-items。区分Flexbox中的 justify-content 和 align-items。它俩只是名字不同，用法其实大同小异。但是记住Grid布局有stretch：将网格元素拉伸以填充整个行轨道的宽度（默认值）。

avatar
文章
阅读
粉丝