网页的布局概念

CSS主要负责样式的美化，那么网站的布局自然也是可以受到其控制，但CSS大多用于局部样式的美化。

对于整个网站的布局来说一般遵循html > 语义化标签的规范来完成网页的总体布局，

img

这是比较通用的网站布局方式，根据实际需求我们可以适当的增减或修改网站的布局

但是呢，有时候网站的一些布局内容是隐藏的只有特定时候才会出现，所以布局有时候会需要使用template标签包裹静态代码,当需要时，JS会动态渲染这一部分
这点其实在后面的Vue框架中是挺容易实现的，这里就不讲具体原生的实现了，毕竟这不是重点

网页的坐标定义

在前端开发中，页面的范围通常指的是当前整个浏览器窗口的页面范围，即视口（viewport）。视口是用户在浏览器中实际看到的网页部分，可以通过滚动条来滚动查看网页的其他部分。

通常情况下，页面的左上角坐标是 (0,0)，x 轴向右递增，y 轴向下递增。这是以视口的左上角作为参考点的坐标系统。

在前端开发中：

  • DOM 元素通常有相对于其父级元素的坐标和尺寸，这称为元素的相对范围。这可以通过 DOM API（如 offsetLeft、offsetTop、offsetWidth、offsetHeight 等）来获取。
  • 对于 Vue 组件，其范围通常限定在其父级 DOM 元素内部。Vue 组件可以使用 Vue 的特定 API（如 、refs 等）来访问其在 DOM 中的位置和尺寸。

要获取相对于整个页面的绝对范围，需要将相对范围与父级元素的绝对范围相加。

需要注意的是，页面范围、元素范围和组件范围的坐标和尺寸都可能受到 CSS 样式、布局和浏览器窗口大小等因素的影响，因此在实际开发中需要进行相应的计算和处理。

盒子模型（Box Model）

盒子模型是指 HTML 元素在页面中所占的空间和布局结构。它将每个 HTML 元素看作是一个矩形的盒子，包括内容区域、内边距、边框和外边距等部分。盒子模型定义了如何计算和控制元素的尺寸、边距和边框等属性。

图示盒子模型

Note

内外边距是一个相对的概念，看选中的视角是谁，且留意“默认情况下内边距会影响整个盒子的大小”的问题
image-20211114003655424
左浮动、右浮动都是为了使元素排布在同一行
image-20211114005507260

盒子模型的核心属性包括：

  • width / height：定义元素的宽度和高度。
  • padding：定义元素的内边距，即内容区域与边框之间的空间。
  • border：定义元素的边框，可以包括边框的宽度、样式和颜色等属性。
  • margin：定义元素的外边距，即元素与其他元素之间的空间。

盒子模型为我们提供了一种直观的方式来控制元素的布局和样式，通过调整各个属性的值，我们可以实现丰富多彩的页面布局效果。

网格布局（Grid）

网格布局（Grid Layout）是 CSS3 中提供的一种强大的布局方式，它允许您以网格形式来对页面进行布局，将页面划分为行和列，并将元素放置到指定的网格单元中。网格布局提供了更灵活、更强大的布局控制，使得创建复杂的页面布局变得更加简单和直观。

以下是网格布局的一些关键概念和特点：

  1. 网格容器（Grid Container）： 包含网格布局的父元素称为网格容器。通过将 display: grid; 应用于网格容器，可以将其设置为网格布局。

  2. 网格线（Grid Lines）： 网格中的水平线和垂直线称为网格线，用于划分网格区域。可以通过指定网格线的位置来定义网格布局的行和列。

  3. 网格单元（Grid Item）： 放置在网格布局中的子元素称为网格单元，它们被放置在网格容器的指定网格区域中。

  4. 网格轨道（Grid Track）： 相邻的两条网格线之间形成的空间称为网格轨道，可以是行轨道（水平方向）或列轨道（垂直方向）。

  5. 网格区域（Grid Area）： 由网格线围成的矩形区域称为网格区域，可以放置网格单元。

  6. 网格线命名（Grid Line Naming）： 可以为网格线指定名称，以便于引用和定位。可以使用 grid-template-rows 和 grid-template-columns 属性来为网格线命名。

网格布局提供了一系列用于控制网格布局的属性，包括：

  • grid-template-rows / grid-template-columns：定义网格布局的行和列的大小和数量。
  • grid-gap：定义网格单元之间的间隔。
  • grid-template-areas：定义网格区域的名称和布局。
  • grid-column / grid-row：指定网格单元的起始和结束位置。
  • justify-items / align-items：定义网格单元在网格区域中的对齐方式。

通过灵活运用这些属性，您可以创建各种复杂的网页布局，实现更加丰富和灵活的页面设计。网格布局是 CSS 中强大而灵活的布局方式之一，适用于响应式设计和构建复杂的网页布局结构。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Layout Example</title>
<style>
  .container {
    display: grid;
    grid-template-columns: 100px 100px 100px; /* 定义三列 */
    grid-template-rows: 100px 100px; /* 定义两行 */
    gap: 10px; /* 定义网格间距 */
  }
  .item {
    background-color: #ccc;
    padding: 10px;
    text-align: center;
  }
</style>
</head>
<body>

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

</body>
</html>

效果：

image.png

弹性布局（Flexbox）

弹性布局是一种用于创建灵活和自适应的布局结构的 CSS 技术。它主要用于在一个容器内对其子元素进行排列和对齐，以便能够适应不同的屏幕尺寸和设备类型。Flexbox 提供了一套强大的属性和值，可以让您轻松地实现水平居中、垂直居中、等高列布局、自适应布局等效果。

一些常用的 Flexbox 属性包括：

  • display: flex;：定义容器为弹性布局容器。
  • flex-direction：定义主轴的方向（水平或垂直）。
  • justify-content：定义子元素在主轴上的对齐方式。
  • align-items：定义子元素在交叉轴上的对齐方式。
  • flex：定义子元素的弹性增长和收缩能力等。

弹性布局非常适用于构建响应式的、动态的布局结构，它提供了更多的灵活性和便利性，使得网页布局变得更加简单和直观。

例子：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性布局示例</title>
<style>
.container {
  display: flex; /* 使用弹性布局 */
  justify-content: space-around; /* 子元素沿主轴等间距分布 */
  align-items: center; /* 子元素在交叉轴居中对齐 */
}

.item {
  width: 100px; /* 设置子元素的固定宽度 */
  height: 100px; /* 设置子元素的固定高度 */
  background-color: lightblue;
  margin: 10px; /* 设置子元素之间的间距 */
  display: flex; /* 子元素也可以使用弹性布局 */
  justify-content: center; /* 子元素内部内容居中 */
  align-items: center; /* 子元素内部内容居中 */
}
</style>
</head>
<body>

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

</body>
</html>

效果：

image.png

相关属性和取值

以下是常见且常用的布局相关的 CSS 属性：

  1. display： 定义元素应该生成的框的类型。常见取值包括 block、inline、inline-block、flex、grid 等。

  2. position： 定义元素的定位方式。常见取值包括 static、relative、absolute、fixed。

  3. float： 控制元素的浮动方式。常见取值包括 left、right。

  4. width / height： 定义元素的宽度和高度。

  5. margin： 定义元素的外边距。常用于控制元素与其他元素之间的间距。

  6. padding： 定义元素的内边距。常用于控制元素内容与边框之间的间距。

  7. box-sizing： 定义元素的框模型。常见取值包括 content-box、border-box。

  8. flexbox 相关属性： 如 display: flex、flex-direction、justify-content、align-items 等，用于控制弹性盒子布局。

  9. grid 相关属性： 如 display: grid、grid-template-columns、grid-template-rows、grid-gap 等，用于控制网格布局。

  10. overflow： 定义元素的溢出内容的处理方式。常见取值包括 visible、hidden、scroll、auto。

  11. z-index： 控制元素的层叠顺序。通常用于定位元素的层叠顺序。

  12. position 相关属性： 如 top、right、bottom、left，用于定义定位元素的位置。

  13. media queries： 用于根据不同的设备和屏幕尺寸应用不同的 CSS 样式。

这些 CSS 属性可以帮助您控制页面元素的布局、尺寸、位置和层叠顺序等，从而实现各种不同的页面布局效果。

布局实现

说到底我们还是要落实布局，那我们应该怎么去实现上述我们谈及到的种种布局呢？下面以实现如下图所示的布局效果为例演示：

image-20230407211153466

Flex容器布局

先说说flex: 1

flex: 1; 是一个用于 flexbox 布局的 CSS 属性，它的作用是将弹性容器（flex container）中的子元素设置为相同的长度（等分剩余空间），从而平均分配弹性容器中的剩余空间。

更具体地说，flex: 1; 相当于以下三个属性的组合：

flex-grow: 1;   /* 子元素放大比例，默认为0，即不放大 */  
flex-shrink: 1; /* 子元素缩小比例，默认为1，即会缩小 */  
flex-basis: 0;  /* 初始宽度或高度，默认为auto，即根据内容决定 */
  • flex-grow: 1; 表示子元素可放大的比例，默认为0，即不放大。设置为1时，表示子元素将平均分配剩余空间。如果有一个子元素的 flex-grow 值为2，而另一个子元素为1，则前者将分配的剩余空间是后者的两倍。
  • flex-shrink: 1; 表示子元素可缩小的比例，默认为1，即子元素会缩小以适应容器。如果有多个子元素的 flex-shrink 值不同时，那么将按照比例缩小。如果设置为0，则表示该元素不会缩小。
  • flex-basis: 0; 表示子元素的初始宽度或高度，默认为auto，即根据内容自适应。设置为0时，表示将平均分配剩余空间。
    在实际的布局中，可以使用 flex: 1; 作为快捷方式，以便更快地设置子元素的宽度。
    通过设置 flex: 1;，子元素将以平均的比例分配剩余空间。
    如果希望某个子元素的宽度占据剩余空间的比例更大，可以将其 flex-grow 值设置为更大的值，例如 flex-grow: 2;。
    如果不希望某个子元素缩小以适应容器，可以将其 flex-shrink 值设置为0，例如 flex-shrink: 0;。

Flex容器实现布局

这个例子中，.container 使用 Flexbox 布局，垂直方向为列布局，占据整个视窗的高度。.main 是一个 Flexbox 容器，占据除了 header 和 footer 之外的全部空间，.left 和 .right 使用 Flexbox 布局，宽度平均分配，高度占据.main 的全部空间，.header 和 .footer 分别设置固定高度。

说白了就是：一个Flexbox 容器是垂直布局的，然后在这个垂直布局中又放置了一个Flexbox的水平容器

```vue ​ ```

Grid网格布局

这个示例中，我们使用了 display: grid 声明了一个网格布局的容器，并使用了 grid-template-columns、grid-template-rows 和 grid-template-areas 分别指定了网格的列数、行数和区域。

具体来说，我们将布局分成了五列和三行，分别对应 header、left、main、right 和 footer 五个区域，并使用 grid-template-areas 属性将这些区域按照上方、左下、右下的布局方式排列。

然后，我们在样式中分别对五个区域进行了样式定义，并使用了 grid-area 属性将它们分别放置到了对应的区域中。

最终，我们就可以得到一个类似上方、左下、右下的布局。

​ ```vue ```

布局方式比较和选取

Grid 布局和 Flex 布局都是 CSS 的布局方案，它们有一些共同点，也有一些不同点。下面是它们的异同点和如何选择布局方案的建议：

共同点：

都是 CSS 的布局方案，能够让开发者更灵活地布局页面。 都可以设置容器的排列方式，包括排列方向、排列顺序、间距等。 都可以设置项目的对齐方式、排序方式等。

不同点：

Flex 布局是一维布局，主要用于在一条轴线上排列项目；Grid 布局是二维布局，可以在行和列两个方向上同时排列项目。 Flex 布局对于不同尺寸的屏幕响应更灵活，可以通过 media query 等方式来调整项目的排列顺序、对齐方式等；Grid 布局对于网格布局更适合，对于复杂的布局有更好的支持。 Grid 布局的一些特性，比如自动填充、自动放大等，可以实现更加灵活和高效的布局方案。

建议：

如果页面中的布局相对简单，只需要单独控制一个维度的排列方式，建议使用 Flex 布局。 如果页面中的布局相对复杂，需要控制两个维度上的排列方式，建议使用 Grid 布局。 当然，两者并不是互斥的，也可以在一个页面中混合使用，根据不同的需求选择不同的布局方案。

除了 Flex 和 Grid 布局，CSS 还有其他的布局方案，比如 float、position、table 等，但是这些布局方案都有一些缺点，使用灵活性相对较差，现在很少用于布局。

CSS布局工具

看起来似乎不错，用来练习和验证css布局也是不错的

七个宝藏CSS布局网站，让你再也不用为CSS布局发愁了！！_哔哩哔哩_bilibili
七个宝藏CSS布局网站，让你再也不用为CSS布局发愁了！！, 视频播放量 913、弹幕量 24、点赞数 39、投硬币枚数 27、收藏人数 72、转发人数 15, 视频作者 账号已注销, 作者简介 ，相关视频：【3天精通网页布局】HTML+CSS+案例_完整的网页结构_网页设计与制作_网页制作_网页设计——HTML+CSS+实战案例_网页设计基础到实战，笑麻了呀！某UP主用C++仿了一个王者荣耀去tx面试，结果被赶了出来...，给大学计算机学生的血泪建议，你可以不随波逐流，但不能一无所知！！，计算机学不下去的时候，看看这个，翁凯老师真的说的很对，HTML+CSS+实战案例-网站设计（两天精通网页布局）完整的网页结构_网页设计与制作_网页制作_网页设计——HTML+CSS+实战案例_网页设计基础到实战】，【全568集】清华大佬终于把Python做成动画片了，通俗易懂，2024最新版，从基础到人工智能！拿走不谢！学不会我退出IT界！，【全749集】华为大佬终于把Python做成了漫画书，漫画教学更加通俗易懂，2024最新内部版，学完即就业！这还学不会我直接退出IT圈！，这大概就是计算机专业的一生吧……，【零基础入门Python】清华大学72小时讲完的Python，2024最新版，学完即可就业！拿走不谢，学不会我退出IT界，说出来你可能不信，这是一个正常计算机专业大学生的桌面
www.bilibili.com
Interactive Graph
Table Of Contents
网页的布局概念
网页的坐标定义
盒子模型（Box Model）
网格布局（Grid）
弹性布局（Flexbox）
相关属性和取值
布局实现
Flex容器布局
先说说flex: 1
Flex容器实现布局
Grid网格布局
布局方式比较和选取
CSS布局工具