以大厂的方式带你重学HTML设计-盒子模型与页面布局上一篇文章中，我们以一个导演的视角介绍了HTML与CSS样式，但光学

上一篇文章中，我们以一个导演的视角介绍了HTML与CSS样式，但光学会那两项还远远不够，这节课我们继续来聊一聊页面的布局。

盒子模型

所有HTML元素可以看作一个盒子。我们回到上节课的界面，我们发现，大写字母是一个盒子，小写字母也是一个盒子，整个页面都是一个盒子。

那么每个盒子的细节是什么样的呢？

这就是我们的整个盒模型

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

重要: 当我们指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和外边距。像下面这个盒子我们设置他的属性宽度为300px。但是最后他的占位为450px。

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

页面布局

元素类型

已经知道了元素在页面中是一个个小盒子，那么我们现在要做的就是把他安排到规定的位置上，我们先来了解一下两种基本的标签类型

1.块级元素

块级元素在页面中每个元素占据一整行或者多个整行，可以对其设置宽度、高度、对齐等属性。常见:元素有 <h1>~<h6>、<p>、<div>、 <ul>、<ol>、<li>等其中

标记是最典型的块元素。

2.行内元素

行内元素通常会和其前后的其他行内元素显示在同一行中，不占独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置高度、对齐等属性，常用于控制页面中文本的样式。常见的行内元素有<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、 <u>、 <a>、<span>等，其中<span>标记是最典型的行内元素。

类型转换

使用display属性对元素的类型进行转换。 display属性常用的属性值及含义：

inline：此元素将显示为行内元素(行内元素默认的display属性值)。
block:此元素将显示为块元素(块元素默认的display属性值)。
inline- block: 此元素将显示为行内块元素，可以对其设置宽度、高度和对齐等属性，但是该元素不会独占一行。
none:此元素将被隐藏，不显示，也不占用页面空间，相当于该元素不存在。

这样子元素就占据了行和列，就能够让元素出现在想要的位置了。

文档流

顺序性：文档流遵循HTML元素在标记中出现的顺序。这意味着，如果在HTML代码中先写了一个<div>元素，然后写了另一个<div>元素，那么在页面上，第一个<div>会先显示，第二个<div>会在它后面显示。
流式布局：文档流是一种流式布局，这意味着内容会从左到右、从上到下填充页面，就像水流过一样。如果一行内容排不下，它会自动换行到下一行。
默认布局：文档流是浏览器对HTML文档的默认解释方式。除非通过CSS或其他方式明确改变，否则元素会按照文档流的规则进行布局。
文档结构：文档流反映了HTML文档的结构。块级元素（如<div>、<p>、<h1>等）会占据整行空间，而行内元素（如<span>、<a>、<img>等）会在一行内排列。

内容驱动：文档流的布局是由文档的内容和结构驱动的。元素的位置和尺寸是根据其在文档中的位置、内容和CSS样式决定的。 “文档流”这个术语形象地描述了HTML元素在页面上的默认布局方式，它就像水流过一样，从左到右、从上到下填充页面，反映了文档的结构和内容。简单来说，就是元素原来规定所在的位置。

定位

1.相对定位 `position: relative`

相对定位是普通文档流的一部分，相对于本元素在文档流原来出现位置的左上角进行定位，可以通过位置偏移属性改变元素的位置。虽然其移动到其他位置，但该元素仍占据原来未移动时的位置，该元素移动后会导致其覆盖其他的框元素。

简单来说，就是元素移动是按照自己的左上角坐标移动。并且其他元素在此元素移动后不会改变自己位置。

可以看到元素还在文档流中

绝对定位 position:absolute

绝对定位是脱离文档流的，不占据其原来未移动时的位置，是相对于父级元素或更高的祖先元素中有relative (相对)定位并且离本元素层级关系上最近元素的左上角进行定位。如果在祖先元素中没有设置relative定位时，就默认相对于body进行定位。

可以看到元素之间不会相互影响。

简单来说，就是元素移动是按照自己的父元素左上角坐标移动。并且其他元素在此元素移动后会占据此元素位置。相当于此元素不存在了

固定定位 position:fixed

固定定位是绝对定位的一种特殊形式，是以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。当对元素设置固定定位后，该元索将脱离标准文档流的控制，始终依据浏览器窗口的左上角来定义自己的显示位置。不管浏览器滚动条如何滚动，也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。

定位元索的层叠次序 z-index:(number)

多个块元素形成多个层。可以使用z-index属性对这些层进行层叠设置。 z-index属性设置一个定位元素沿z轴的位置, z轴定义为垂直延伸到显示区的轴。如果为数，则离用户更近，为负数则表示离用户更远。即拥有z-index属性值大的元素放置顺序在上。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .box1 {
      position: absolute;
      z-index: 1;
      background-color: lightblue;
      width: 100px;
      height: 100px;
      margin: 20px;
    }

    .box2 {
      position: absolute;
      z-index: 2;
      background-color: lightgreen;
      width: 100px;
      height: 100px;
      margin: 20px;
      left: 20px;
    }

    .box3 {
      position: absolute;
      z-index: 3;
      background-color: lightcoral;
      width: 100px;
      height: 100px;
      margin: 20px;
      left: 40px;
    }
  </style>
  <title>z-index Example</title>
</head>
<body>

  <div class="box1">Box 1 (z-index: 2)</div>
  <div class="box2">Box 2 (z-index: 1)</div>
  <div class="box3">Box 3 (z-index: 3)</div>

</body>
</html>

值得注意的是，z-index 会受到 层叠上下文（stacking context）的影响。如果父元素的 z-index 被设置为某个值，或者元素本身具有某些 CSS 属性（如 opacity 小于 1、transform 等），那么该元素和它的子元素就会创建一个新的层叠上下文。新的层叠上下文会限制该元素和子元素的 z-index 层叠作用域，影响它们的堆叠顺序。

以大厂的方式带你重学HTML设计-盒子模型与页面布局