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

69 阅读6分钟

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

盒子模型

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

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

image.png 这就是我们的整个盒模型
  • 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>标记是最典型的行内元素。

image.png

类型转换

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

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

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

文档流

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

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

定位

1.相对定位 position: relative

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

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

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

绝对定位 position:absolute

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

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

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

固定定位 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 层叠作用域,影响它们的堆叠顺序。

image.png