CSS布局技巧 | 青训营笔记

Milchstra
93 阅读6分钟

网页是一个多层结构，一层叠着一层，通过HTML超文本标签可以定义网页内容的基本框架结构，通过CSS可以分别为每一层来设置样式。

文档流（默认）

  • 概念： 文档流是CSS布局中的一个核心概念，文档流是浏览器默认的 HTML 元素排列方式，遵循从上到下、从左到右的顺序依次布局元素。就好像文档里的文字自然成行成段一样，HTML 元素也按其在代码中的先后顺序，依据自身的特性（块级元素独占一行，行内元素在一行内从左到右排列等）占据页面空间。

  • 元素在文档流中的特点

    • 块级元素（Block）：如 <div>、<h1> - <h6>、<p> 等，默认独占一行，宽度通常占满父元素的可用宽度（除非另有样式设置改变宽度），且多个块级元素会垂直堆叠排列，元素间的间距可通过外边距（margin）等样式属性控制。

      • 特点：
        1. 独占一行：块级元素（如 <div>、<h1> - <h6>、<p> 等）在文档流中会自动独占一行，从新的一行开始显示，并且会尽可能地占据父元素的可用宽度（水平方向），其宽度默认是父元素的 100%（除非有其他样式设置改变宽度，比如设置具体的像素宽度值或者百分比宽度等）。
        2. 垂直排列：多个块级元素会按照在 HTML 文档中的先后顺序，依次垂直向下排列，每个块级元素之间的间距由其外边距（margin）等样式属性来控制。比如有两个 <div> 元素在 HTML 中先后出现，它们会上下堆叠显示在页面上。

    • 行内元素（Inline）：像 <a>、<span>、<strong> 等，在一行内从左到右依次排列，宽度和高度由内容撑开，自身一般不能直接设置尺寸（特殊情况除外，如 display: inline-block），并且其排列会受文本排版相关样式（如 text-align）影响，元素间空白字符（空格、换行等）会产生间距效果。

      • 特点：
        1. 同行显示：行内元素（如 <a>、<span>、<strong> 等）在文档流中不会独占一行，而是会在一行中按照从左到右的顺序依次排列，如果一行空间不够了，才会换行显示。它们的宽度和高度由其内容撑开，自身不能设置宽度和高度等尺寸属性（除非将其设置为 display: inline-block 等特殊情况）。
        2. 遵循文本排版规则：行内元素在排列时就像文字一样，会受到一些文本排版相关的样式影响，比如 text-align（控制文本对齐方式）等。而且它们之间的空白字符（空格、换行等）在浏览器渲染时也会被当作一定的间距显示（有时候可以通过一些 CSS 技巧来去除这些多余的空白间距）。

    • 内联块级元素（Inline-block） ：既表现为内联元素，又可以设置宽高，如<input>、<button>等。

定位流（Position）

  • 相对定位（relative） ：相对定位的元素虽然可以通过 top、bottom、left、right 等属性相对于它原本在文档流中的位置进行偏移，但它本身在文档流中的空间依然保留，其他元素不会占据它原本的位置，也就是说它只是在视觉上 “移动” 了，对整体文档流的排列顺序影响不大。
.relative-box {
    position: relative;
    top: 10px;
    left: 10px;
    background-color: #ccc;
    width: 100px;
    height: 100px;
}
  • 绝对定位（absolute） ：绝对定位的元素完全脱离文档流，它不再占据原本文档流中的空间，其位置是相对于最近的已定位（非 static 定位）的祖先元素或者 html 元素来确定的，其他元素会像它不存在一样重新排列布局，填补它原来的位置空缺。
.absolute-box {
    position: absolute;
    top: 50px;
    left: 50px;
    background-color: #ff0000;
    width: 80px;
    height: 80px;
}
  • 固定定位（fixed） ：固定定位同样脱离文档流，并且是相对于浏览器窗口进行定位的，不管页面如何滚动，它始终处在固定的位置，页面上的其他元素也会按照正常文档流进行排列，不受它的影响。
.fixed-box {
    position: fixed;
    top: 10px;
    right: 10px;
    background-color: #00ff00;
    width: 60px;
    height: 60px;
}

上面三种定位的元素在页面中显示的效果如下图，相对定位的盒子偏移了位置但原来空间保留，文字会正常排列在它下方；绝对定位的盒子脱离文档流，文字会无视它原本的位置进行排列；固定定位的盒子固定在浏览器窗口右上角，页面滚动时也不影响文字的正常文档排列。

image.png

层叠上下文

层叠上下文是 HTML 元素的一种三维概念上的布局环境，它决定了元素在垂直于屏幕方向（通常所说的 Z 轴方向）上如何层叠显示，也就是哪个元素在上面，哪个元素在下面。可以通过多种方式创建层叠上下文。

  • 层叠顺序规则（从后往前）：

    1. 背景和边框
    2. 负 z-index 值的子元素
    3. 块级盒子
    4. 浮动盒子
    5. 行内盒子
    6. z-index为0或auto的定位盒子（如 position 设置为 absolute、relative、fixed 且 z-index 为 auto）
    7. 正z-index值的元素

下面这张图为稀土掘金首页的图层显示，可在浏览器调试工具中选择“更多工具”中的“图层”进行查看。

image.png

文档流与层叠上下的关系

  1. 层叠上下文与文档流的独立性：层叠上下文是独立于文档流的，这意味着即使元素在文档流中是顺序排列的，它们在层叠上下文中也可能有不同的堆叠顺序。
  2. 层叠上下文的嵌套：层叠上下文可以嵌套，即一个层叠上下文可以是另一个层叠上下文的子元素。在这种情况下，子层叠上下文的元素会根据其自身的z-index值在其父层叠上下文中排序。
  3. 层叠上下文与定位：定位元素（absolute、fixed、relative）可以创建自己的层叠上下文，并且它们的z-index值相对于其最近的非static定位的祖先元素。
  4. 层叠上下文与可见性：即使元素在文档流中被隐藏（例如，通过display: none;），它们仍然可以参与层叠上下文的计算，因为层叠上下文是基于元素的存在，而不是它们的可见性。
  5. 文档流确定基本布局，层叠上下文影响显示顺序： 文档流先从平面上确定了元素的基本排列位置，而层叠上下文在此基础上，从垂直页面的z轴方向进一步确定元素的层叠显示情况，当存在元素重叠或需要明确显示层次关系时，层叠上下文就起作用了。
avatar
文章
阅读
粉丝