CSS布局技巧 | 应用场景和实操实践

用户71042439630
219 阅读5分钟

课程链接：深入CSS （上） - 掘金

布局应用场景

通过基本布局理解 - 学习 Web 开发 | MDN来讲解 CSS 弹性盒（Flexbox） 、浮动（Float） 和 定位(Position) 方法

具有基本样式但没有布局的页面：

image.png

添加布局后的页面：

afe3ec1303a48a8001be2db90e6777f.png

  1. 导航条应随着内容一起滚动并且在触碰到视口顶部之后于顶部固定。
nav {
  position: sticky;
  top: 0;
  background-color: #333;  /* 深灰色背景 */
  padding: 0.5em 2em; /* 给导航栏上下和左右加一些内边距 */
  font-family: 'Arial', sans-serif; /* 设置字体 */
}

  • position: sticky：使 .navbar（导航条）成为粘性元素。当页面滚动时，导航条会一直跟随内容，但当它触及视口顶部时，它会固定在那里。

  • top: 0：当 .navbar 到达视口的顶部时，它会固定在顶部。

image.png

position 属性的概念和应用场景

1. position: static;（默认值）

  • 概念：元素按照文档流的正常顺序排列，top、left 等属性不起作用。
  • 应用场景：默认布局，适用于不需要特殊定位的普通元素。

2. position: relative;

  • 概念：元素相对于其原始位置进行偏移，top、right、bottom 和 left 可以调整其位置，但仍保留原始占位。
  • 应用场景：假设你想要让一个元素稍微移动一点，但又不想影响页面上其他元素的位置。这时候用 relative 定位很有用。

3. position: absolute;

  • 概念：不再占据原本的空间，其他元素会忽略它，相对于最近的已定位祖先元素（relative, absolute, fixed）进行定位。如果没有，则相对于 <html> 或 <body>。
  • 应用场景：用于弹出框、菜单、工具提示等，精确控制元素位置。

4. position: fixed;

  • 概念：元素相对于浏览器窗口固定位置，不受页面滚动影响。
  • 应用场景：创建固定的导航栏、悬浮按钮、广告横幅等，始终保持在屏幕上的某个位置。

5. position: sticky;

  • 概念：元素在页面滚动到指定位置时，变为固定定位，滚动后依然保持在视口某个位置。
  • 应用场景：常用于粘性头部、导航栏等，元素滚动到某个位置时固定在屏幕顶部。

第四点与第五点的区别：前者固定在视口，页面滚动时不动，后者初始位置随页面滚动，滚动到指定位置后固定。

  1. 导航选项之间拥有相同的空间。
nav ul {
  display: flex;  /* 使用 flexbox 布局让列表项横向排列 */
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

nav ul li {
  margin: 0 55px;  /* 给每个列表项左右间隔 */
}

<ul> 会成为一个 Flex 容器，所有的 <li> 列表项会被按横向排列。

Flexbox 布局可以使子元素在容器内以弹性的方式对齐、分配空间，并自动调整布局，适应不同的屏幕大小。

  • display: flex 是开启 Flexbox 布局的关键。

  • 一旦应用到父元素（容器），它的子元素会变成 flex 项，并按照 Flexbox 的规则自动布局。

Flexbox 属性的概念和应用场景

1. flex-direction;

  • 概念：决定主轴（排列方向），影响元素在容器中的排列方向。主轴默认是水平方向（row），即子元素横向排列。若设置为 column，就变成垂直方向。
  • 应用场景：决定元素的水平排列还是垂直排列。

2. justify-content;

  • 概念：主轴上对齐子元素，控制它们如何分布在容器内。
  • 应用场景：决定元素的水平排列还是垂直排列。

flex-start: 元素从主轴起始位置对齐（默认值）。

flex-end: 元素向主轴结束位置对齐。

center: 元素居中对齐。

space-between: 元素之间的间距均等，第一个和最后一个元素分别靠近起始和结束边缘。

space-around: 元素之间的间距均等，元素两侧的间距也相等。

3. align-items;

  • 概念：控制 垂直方向上对齐子元素的位置.
  • 应用场景：决定元素的水平排列还是垂直排列。

flex-start: 元素从交叉轴的起始位置对齐。

flex-end: 元素向交叉轴的结束位置对齐。

center: 元素居中对齐。

baseline: 元素的基线对齐（通常用于文本的对齐）。

stretch: 元素拉伸以填满容器（默认值）。

4. align-self;

  • 概念：用来 单独 定义某个子元素在 垂直轴上的对齐方式.
  • 应用场景：当你想要某个元素和其他元素对齐方式不同，比如让某个元素垂直居中，其他元素顶端对齐。
  1. 文章内的图片应该被文本包围。
.feature { /* 左边图片class="feature" */
      width: 200px;
      float: left;
      margin-right: 20px; /* 与右边文本的间距 */
      margin-bottom: 20px; /* 与下方文本的间距 */
  }

图片向左浮动，实现文本围绕。同时要防止内容和浮动元素之间紧贴。

image.png

Float 属性的概念和应用场景

1. float: left;

  • 概念： 元素会被浮动到容器的左（右）侧，并且其他元素会围绕它流动。
  • 应用场景： 适用于常见的文本环绕图片的布局，或者左（右）侧的图片或侧边栏。

2. clear: left;, clear: right;, clear: both;

  • 概念： 用来清除浮动元素的影响，防止浮动元素让后续内容不按预期排列。
  • 应用场景：在页面的底部清除浮动，避免页面布局混乱。
  1. 照片应显示为两列网格，图像之间有 1 像素的间隙。
.photos {
    display: flex;
    flex-wrap: wrap;  /* 允许换行 */
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 1px;  /* 设置图像之间的间隙 */
  }

  /* 每个图片项占用父容器的 50% 宽度，即一行两个图片 */
  .photos li {
    width: calc(50% - 1px);
  }

使用 calc(50% - 1px) 的目的是考虑到间隙的存在，使得每个 li 元素的实际宽度能够适应容器的宽度，并且避免元素溢出。

image.png

avatar
文章
阅读
粉丝