本文提供了CSS布局代码大全，帮助开发者创建各种布局：弹性盒子模型：灵活的布局系统，允许水平或垂直排列元素。网格布局：使用行和列创建基于网格的布局。浮动：允许元素水平排列，绕过其他元素流动。绝对定位：从正常文档流中移除元素，并根据父元素位置定位。相对定位：从正常文档流中偏移元素，但受周围元素影响。固定定位：相对于浏览器窗口定位元素，滚动页面也不移动。

CSS 布局代码大全

CSS 布局是一个关键元素，它决定了网站的外观和可用性。本文提供了 CSS 布局代码的全面集合，帮助开发者创建各种布局。

1. 弹性盒子模型

弹性盒子模型是一种灵活的布局系统，它允许元素水平或垂直排列，并自动适应其内容的大小。

  display: flex;  /* 将容器设置为弹性容器 */
  flex-direction: row;  /* 设置元素的排列方向 */
  flex-wrap: wrap;  /* 允许元素换行 */
  justify-content: center;  /* 对齐元素 */
  align-items: center;  /* 垂直对齐元素 */

2. 网格布局

网格布局允许开发者使用行和列创建基于网格的布局。

  display: grid;  /* 将容器设置为网格容器 */
  grid-template-columns: repeat(3, 1fr);  /* 定义列 */
  grid-template-rows: repeat(2, 1fr);  /* 定义行 */
  gap: 1em;  /* 设置单元格之间的间距 */

3. 浮动

浮动是一种经典的布局技术，它允许元素水平排列，同时绕过其他元素流动。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

  float: left;  /* 将元素向左浮动 */
  float: right;  /* 将元素向右浮动 */
  clear: both;  /* 清除浮动，防止元素重叠 */

4. 绝对定位

绝对定位允许元素从其正常文档流中移除，并根据其父元素的位置进行定位。

  position: absolute;  /* 将元素定位为绝对 */
  top: 0;  /* 距父元素顶部的距离 */
  left: 0;  /* 距父元素左边的距离 */

5. 相对定位

相对定位允许元素从其正常文档流中偏移，但仍然受到其周围元素的影响。

  position: relative;  /* 将元素定位为相对 */
  top: 10px;  /* 相对于其正常位置向上移动 10 像素 */
  left: 20px;  /* 相对于其正常位置向左移动 20 像素 */

6. 固定定位

固定定位允许元素相对于浏览器窗口进行定位，即使滚动页面也不移动。

  position: fixed;  /* 将元素定位为固定 */
  top: 0;  /* 距浏览器窗口顶部的距离 */
  left: 0;  /* 距浏览器窗口左边的距离 */

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！