CSS布局技巧 | 豆包MarsCode AI刷题

luusq
117 阅读9分钟

一、布局是什么？

布局（Layout）在网页设计和开发中，指的是组织和排列网页内容的方式，以确保其既美观又易于使用。这涉及到如何安排文本、图片、视频、导航元素和其他网页组件，以创建出清晰、有条理且吸引人的页面结构。布局通常涉及到使用特定的CSS属性和技术来控制元素、内容、容器等信息在页面上的位置、大小和排列方式。

二、CSS布局基础

1、盒模型（Box Model）是CSS中的一个核心概念，它定义了在网页布局中每个HTML元素的尺寸和位置。

  • 内容（content）是盒模型的最核心部分，包含了元素的实际内容，比如文本、图像或其他媒体，内容的大小通过width和height属性来设置。
  • 内边距（padding）是内容与边框之间的空间，用于增加内容与边框之间的距离，使内容看起来不那么紧贴边框。- 内边距的大小可以通过padding-top、padding-right、padding-bottom和padding-left属性分别设置上、右、下、左四个方向的内边距；也可以使用padding简写属性一次性设置所有四个方向的内边距。
  • 边框（border）是围绕内容和内边距的线条，用于突出显示元素或与其他元素区分开来。边框的宽度、样式和颜色可以通过border-width、border-style和border-color属性分别设置，也可以使用border简写属性一次性设置所有这三个属性。
  • 外边距（margin）是元素与其他元素之间的空间，用于控制元素之间的间距，使页面布局更加美观和有序。外边距的大小可以通过margin-top、margin-right、margin-bottom和margin-left属性分别设置上、右、下、左四个方向的外边距，也可以使用border简写属性一次性设置四个方向的外边距。

image.png

2、定位（Position）：通过CSS的定位属性，可以控制元素在页面上的精确位置。CSS提供了五种定位方式，分别是：

  • 静态定位（static）：元素默认的定位方式，按照文档流自然排列，不受定位属性的影响。
  • 相对定位（relative）：元素从其正常位置偏移，但仍保持在文档流中。可以通过top、right、bottom、left来调整偏移位置。
  • 绝对定位（absolute）：元素从文档流中移出，相对于最近的已定位祖先元素（如果不是，则相对于初始包含块）定位。 top、right、bottom、left用于指定位置。
  • 固定定位（fixed）：元素固定在视口的一个位置，不随页面滚动而移动。
  • 粘性定位（sticky）：元素在达到某个阈值之前，表现如同relative；到达阈值之后，表现如同fixed。- 常用于创建导航栏等界面元素， 当元素滚动到指定位置时，将固定在该位置。

3、浮动（Float)是一种布局方式，它允许元素从其正常文档流中移出，并向左或向右浮动，而其他内容则环绕在其周围。其语法为：

selector {
  float: value;
}

其中，selector是想要应用浮动属性的元素的选择器，value可以是以下值之一：

  • none：默认值，元素不会浮动，保持在标准文档流中的位置。
  • left：元素向左浮动。
  • right：元素向右浮动。
  • inherit：继承父元素的float属性值。

设置了float属性（不为none）的元素具有包裹性，其宽度由内部元素决定，最大不会超过其包含块的宽度。并且，浮动元素会生成一个BFC（块级格式化上下文），这意味着它与其他元素之间的布局会遵循BFC的规则。

清除浮动：清除浮动是指阻止元素环绕浮动元素，通常用于解决父容器高度塌陷的问题。清除浮动的方法有以下几种：

  • 使用clear属性：对需要清除浮动的元素应用clear属性，其值可以是left、right、both或none。这表示元素的哪些边不应该挨着浮动元素。
  • 使用“clearfix”技术：通过在浮动元素的父容器内添加一个伪元素，并设置其clear属性为both，可以自动清除浮动。这种方法无需在HTML中添加额外的清除元素，更加简洁和语义化。

三、现代CSS布局技术

1、Flexbox（弹性盒模型）：提供一种新型的、有效的方式来布局、对齐和分配容器内空间。Flexbox布局由两个主要部分组成：Flex容器（Flex Container）和Flex项目（Flex Items）。

属性如下：

（1） flex-direction：定义主轴的方向（即项目排列的方向）。可选值有：

  • row（默认值）：主轴为水平方向，起点在左端。
  • row-reverse：主轴为水平方向，但起点在右端。
  • column：主轴为垂直方向，起点在上沿。
  • column-reverse：主轴为垂直方向，但起点在下沿。

（2） flex-wrap：定义项目是否换行。可选值有：

  • nowrap（默认值）：不换行。
  • wrap：换行。
  • wrap-reverse：换行，但顺序反转。

（3） flex-flow：flex-direction和flex-wrap的简写形式。

（4） justify-content：定义项目在主轴上的对齐方式。可选值有：

  • flex-start（默认值）：项目从起点排列。
  • flex-end：项目从终点排列。
  • center：项目居中排列。
  • space-between：项目之间的间隔相等。
  • space-around：项目周围的间隔相等。
  • space-evenly：项目之间的间隔以及项目与容器边缘的间隔都相等。

（5） align-items：定义项目在交叉轴上的对齐方式。可选值有：

  • stretch（默认值）：项目拉伸填满容器。
  • flex-start：项目在交叉轴的起点对齐。
  • flex-end：项目在交叉轴的终点对齐。
  • center：项目在交叉轴上居中对齐。
  • baseline：项目在基线对齐。

（6） align-content：定义多根轴线的对齐方式（如果项目在主轴上换行）。可选值有：

  • stretch（默认值）：轴线拉伸填满容器。
  • flex-start：轴线在交叉轴的起点对齐。
  • flex-end：轴线在交叉轴的终点对齐。
  • center：轴线在交叉轴上居中对齐。
  • space-between：轴线之间的间隔相等。
  • space-around：轴线周围的间隔相等。

image.png

应用场景

  • 导航栏和菜单
  • 响应式布局
  • 页面头部和底部工具栏
  • 表单布局

2、Grid Layout（网格布局）

（1）网格容器：样式设置为display: grid;或display: inline-grid;的元素。其中，display: grid使元素生成一个块级的Grid容器，创建的网格项目会占用整个容器的宽度，而display: inline-grid使元素生成行级创建的Grid容器，网格项目宽度由自身宽度决定。

（2）基本属性

  • grid-template-columns：定义网格容器的列轨道大小及数量。可以使用px、fr（表示轨道尺寸配额，即按配额比例分配可用空间）以及CSS函数（repeat()、minmax()）来定义。
  • grid-template-rows：定义网格容器的行轨道大小及数量。用法与grid-template-columns类似。
  • grid-template-areas：用于定义区域名称，每个字符串（用引号括起来）代表网格的一行。通过指定网格项目的位置（使用.表示空单元格，或使用自定义名称表示特定区域），可以创建复杂的布局结构。
  • grid-auto-flow：自定自动布局的方式，可以是行优先（row，默认值）或列优先（column）。
  • grid-gap（或grid-row-gap和grid-column-gap）：定义行和列之间的间距。
  • grid-column-start、grid-row-start、grid-column-end、grid-row-end：指定网格项目开始的网格线编号和结束的网格线编号。
  • justify-items、align-items：设置网格区域内的所有元素在水平方向和垂直方向上的对齐方式。
  • ustify-content、align-content：设置网格容器在水平方向和垂直方向上的对齐方式。

image.png

应用场景

  • 多列布局
  • 网格导航
  • 图片展示
  • 复杂布局

四、案例分析

对于一个包含四个子元素的容器，使用 Flexbox 布局来控制子元素的排列和大小。

<head>
    <link rel="stylesheet" type="text/css" href="10.css">
</head>

<div class="container">
    <div class="item item-a">A</div>
    <div class="item item-b">B</div>
    <div class="item item-c">C</div>
    <div class="item item-d">D</div>
</div>

<style>
    .container {
      display: flex;
      background-color: #f0f0f0;
      padding: 10px;
      border: 1px solid #ccc;
    }

    .item {
      width: 200px;
      height: 100px;
      margin: 5px;
      background-color: #4CAF50;
      color: white;
      text-align: center;
      line-height: 100px;
      font-size: 24px;
    }

    .item-a {
      flex-grow: 1;
      background-color: #2196F3;
    }

    .item-b {
      flex-grow: 1;
      background-color: #FF9800;
    }

    .item-c {
      flex-grow: 1;
      background-color: #9C27B0;
    }

    .item-d {
      flex-grow: 1;
      background-color: #F44336;
    }
  </style>

（1）容器元素<div class="container">包含了4个子元素：item-a, item-b, item-c, item-d，每个子元素都是一个 div，类名为 item 和 item-a（或item-b, item-c, item-d）。

.item是一个通用的类名，应用于所有子元素（item-a, item-b, item-c, item-d）。它定义了这些子元素的通用样式。- .item-a是特定的类名，仅应用于 <div class="item item-a">A</div> 这个元素，它定义了这个特定元素的样式，并且可以覆盖或补充  .item 类中定义的样式。

（2） .container 样式

  • display: flex; : 将容器设置为 Flexbox 布局，这意味着其子元素将按照 Flexbox 的规则进行排列。
  • background-color: #f0f0f0; : 设置容器的背景颜色为浅灰色。
  • padding: 10px; : 设置容器的内边距为 10px。
  • border: 1px solid #ccc; : 设置容器的边框为 1px 的灰色实线。

（3）.item 样式

  • width: 200px; : 设置每个子元素的宽度为 200px。
  • height: 100px; : 设置每个子元素的高度为 100px。
  • margin: 5px; : 设置每个子元素的外边距为 5px。
  • background-color: #4CAF50; : 设置每个子元素的背景颜色为绿色。
  • color: white; : 设置每个子元素的文本颜色为白色。
  • text-align: center; : 设置每个子元素的文本居中对齐。
  • line-height: 100px; : 设置每个子元素的行高为 100px，使其文本垂直居中。
  • font-size: 24px; : 设置每个子元素的字体大小为 24px。

(4) .item-a, .item-b, .item-c, .item-d 样式

  • flex-grow: 1; : 对于.item-a, .item-b, .item-c, .item-d，设置其 flex-grow 属性为 1，这意味着它们将平分剩余空间。
  • background-color: ...; : 分别为每个子元素设置不同的背景颜色。

（5）结果展示

image.png

avatar
文章
阅读
粉丝