温故而知我不懂的CSS

myzbx 2024-12-07 15:12 54 浏览

我们是否想过没有CSS对HTML标签元素的影响，那么我们的标签在浏览器是什么样形式存在的？CSS对HTML标签元素到底产生了什么影响？又做了什么规则限定？来聊聊吧！！！

CSS 作为一门标记性语言，但是它的简单易学，很多开发者都不知道它是一门语言，语言的东西必定具备诸多概念，但是我们会往往忽略这些概念，确实，就算你不知道这些概念，你仅仅知道这些样式是干什么的，都能写出一张复杂的页面，所以我们不止要做到会用，而且要理解实质性的原理而不是只知道这些样式是仅仅做什么的，所以痛定思痛，好好温故而知新吧

流（Normal flow）

Normal flow直译为正常流，但是为什么称为文档流，倒是很好奇，会给人别人容易产生误会，所以一下的介绍中，我们都是以流的形式称呼

流：“流”实际上是 CSS世界中的一种基本的定位和布局机制，可以理解为现实世界的一套物理规则，“流”跟现实世界的“水流”有异曲同工的表现。

CSS世界

有同学可能听到CSS世界这个概念似懂非懂，这个概念出自**张鑫旭大佬的《CSS世界》**,我的理解是世界就是一张我们布局完的网页，而如何形成这个世界就是CSS去规定的

那通过这个流我们来理解CSS的元素在这个流是怎么布局的,首先来看看CSS流布局（你可以理解为标签元素在流默认以什么形式布局的）中，我们的HTML的<div>和<span>正好是CSS中块级元素和内联级元素的代表，你可以把div理解成水，span是木块，如图：

举个例子：

举个例子：

效果图：

上述的div占满了一整行(没有声明width:100%的情况下)，像水一样铺满容器,而span则是像木头一样依次排列

所以总结一句：所谓“流”，就是CSS中引导元素排列和定位的一条看不见的“水流”，在这个流中，我们的块级元素和内联级元素默认都有与其对应的排列和定位

流是如何影响整个CSS世界的

CSS2.1 时代，我们直接称 CSS 为“流的世界”真是一点儿也不为过，整个 CSS 世界几乎就是围绕“流”来建立的，那么流是如何影响整个 CSS 世界的呢？

因为 CSS 世界的基石是 HTML，所以只要让 HTML **默认**的表现符合“流”，那么整个 CSS 世界就可以被“流”统治，而事实就是如此！
特殊布局与流的破坏。如果全部都是以默认的“流”来渲染，我们只能实现类似 W3C 那样的文档网页，但是，实际的网页是有很多复杂的布局的，怎么办？可以通过破坏“流”来实现特殊布局。实际上，还是和“流”打交道。
流向的改变。默认的流向是“一江春水向东流”，以及“飞流直下三千尺”。然而，这种流向我们是可以改变的，可以让CSS的展现更为丰富。??因此，“文档流从左往右自上而下”这种说法是不严谨的，大家一定要纠正过来。

什么是流体布局

??流体布局不是什么新技术，实际开发中我们已经百分百使用过的，而且是必备的技巧

世界的形成需要我们去搭建(布局)，在流的世界中当然用流的方式去搭建（布局）了,所谓“流体布局”，指的是利用元素“流”的特性实现的各类布局效果。因为“流”本身具有自适应特性，所以“流体布局”往往都是具有自适应性的。但是，“流体布局”并不等同于 “自适应布局”。“自适应布局”是对凡是具有自适应特性的一类布局的统称，“流体布局”要狭窄得多。例如，表格布局也可以设置为100%自适应，但表格和“流”不是一路的，并不属于“流体布局”

比如上述这个demo就是流体布局的一种体现

CSS 中最常用的魔法石，也就是最常使用的 HTML 标签，是<div>，而<div>是典型的具有“流”特性的元素，因此，曾经风靡的“DIV+CSS 布局”，实际上指的就是这里的“流体布局”。

CSS 新世界——CSS3

布局更为丰富

移动端的崛起，催生了 CSS3 媒介查询以及许多响应式布局特性的出现，如图片元素的 srcset 属性、CSS 的 object-fit 属性
弹性盒子布局（flexible box layout）终于熬出了头
格栅布局（grid layout）姗姗来迟

视觉表现长足进步

圆角、阴影和渐变让元素更有质感
transform 变换让元素有更多可能。
filter 滤镜和混合模式让 Web 轻松变成在线的 Photoshop；
animation 让动画变得非常简单

盒模型

??假设我们HTMl标签元素在没有CSS的影响下，是以什么形式存在的，有人可能会想到以盒子形式存在的,实际则不然，HTMl标签元素在浏览器中具体的存在形式是被CSS所定义的，也就是说的盒模型，就相当于出来一种MSS标记性语言（虚拟的语言）定义HTML标签元素为圆形模型

MDN是这样定义的：CSS 基础框盒模型是 CSS 规范的一个模块，它定义了一种长方形的盒子——包括它们各自的内边距（padding）与外边距（margin ），并根据视觉格式化模型(算法机制)来生成元素，对其进行布置、编排、布局（lay out）。常被直译为盒子模型、盒模型或框模型。

??HTML标签元素在CSS规则下是盒子形式存在，如果没有被CSS影响，HTML标签元素可能不是以盒子形式存在，并且，CSS世界存在流(CSS世界中的一种基本的定位和布局机制)，在流的多个规则下，盒子就具备不同的规则，不同的规则（比如BFC、IFC、FFC、GFC）影响着盒子的排列，所以我们把这种盒子也叫做正常流的盒子我们会在CSS规则中讲到

举个例子：

  .demo {
      height: 100px;
      background: lightblue;
    }
  </style>
  <body>
    <div class="demo">div</div>
  </body>

如的图可以看出，这个就是盒模型

盒模型分为IE盒模型和W3C标准盒模型。我们在下面会讲述到，先来看看盒子是怎么形成的吧

视觉格式化模型(visual formatting model)

??视觉格式化模不是一种盒模型类型，而是一种算法机制,具体可以去看看W3C

CSS 视觉格式化模型（visual formatting model）是用来处理和在视觉媒体上显示文档时使用的计算规则。该模型是 CSS 的基础概念之一

盒子的生成

MDN解释：盒子的生成是 CSS 视觉格式化模型的一部分，用于从文档元素生成盒子。盒子有不同的类型，不同类型的盒子的格式化方法（也叫格式化上下文）也有所不同。盒子的类型取决于 CSS display 属性。

??我们来理解上面这句话吧，盒子的生成是通过视觉格式化模型，而生成的盒子处于格式化上下文，因为有不同的格式化上下文,格式化上下文(formatting context) 是定义盒子环境的规则，不同格式化上下文(formatting context)下的盒子有不同的表现。也就是盒子通过视觉格式化模型出生，出生后被一种规则限制,可能有同学对格式化上下文有点难以理解，没关系，我也懵逼，所以接下来会在CSS规则章节讲到

W3C 标准盒模型：

属性width,height只包含内容content，不包含border和padding。

举个例子：

<style>
    .demo {
      width: 200px;
      height: 100px;
      padding: 20px 20px;
      background: lightblue;
      border: 10px solid red;
    }
</style>
  <body>
    <div class="demo">div</div>
  </body>

效果图：

可以看到标准盒模型中， width = 内容的宽度、height = 内容的高度，如上图中height等于内容的高度为100px，width等于内容的宽度为100px

IE盒模型：

属性width,height包含border和padding，指的是content+padding+border。

举个例子：

.demo {
      box-sizing: border-box; /* 代表为IE盒模型 */
      width: 200px;
      height: 100px;
      padding: 20px 20px;
      background: lightblue;
      border: 10px solid red;
    }
  </style>
  <body>
    <div class="demo">div</div>
  </body>

效果图：

可以看到，IE盒模型中，width = border + padding + 内容的宽度,height = border + padding + 内容的高度,如上图height = border 10px*2+ padding20px*2 + 内容的高度40px=100px,width = border 10px*2 + padding 20px*2+ 内容的宽度 140px=200px

box-sizing属性更改盒模型

??CSS 中的 box-sizing属性定义了user agent应该如何计算一个元素的总宽度和总高度。

IE模型不是一无所用，开发中我们有时候会改变padding的值，这样会影响到整个盒子的区域面积，我们还得手动计算改width或者height，这样显然影响效率，这时候IE盒模型的作用就来了，我们只要按照设计师给的盒子固定区域，写死，给我写死就行！！！,我们将盒子转化为IE盒模型，我们不管怎么改变padding或者border，区域面积永远固定在哪里

box-sizing:content-box /*（标准盒模型）*/
box-sizing:border-box /*（IE盒模型）*/

在ie8+浏览器中使用哪个盒模型可以由box-sizing(CSS新增的属性)控制，默认值为content-box，即标准盒模型；如果将box-sizing设为border-box则用的是IE盒模型。如果在ie6,7,8中DOCTYPE缺失会触发IE模式。在当前W3C标准中盒模型是可以通过box-sizing自由的进行切换的

CSS流的规则

“流”之所以影响了整个 CSS 世界，就是因为影响了 CSS 世界的基石 HTML。那具体是如何影响的呢？

什么是格式化上下文（Fatting context）

前面我们反复讲到的格式化上下文到底是什么东东？查阅了W3C得到的是这句话:Boxes in the normal flow belong to a formatting context意思是正常流的盒子属于格式化上下文，前面我们讲到不同格式化上下文(formatting context)下的盒子有不同的表现，我们知道正常流的盒子属于格式化上下文，那么格式化上下文就是制定规则的区域，那么大家想想，想到规则会想起CSS的谁？也就是流, 在我的理解里:。FC就是我们的流，它是页面中的一块渲染区域，有一套渲染规则如何理解块级格式化上下文BFC(block formatting context)?,那么流中具有不同的规则，比如BFC、IFC、FFC、GFC,下面我们逐个击破它们吧

块级元素和内联级元素

在讲块级元素和内联元素之前，我们会这样想块级元素：总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示,内联元素：和相邻的内联元素在同一行，的确可以这样理解，但是有没有想过就是这些元素为什么会具备这些属性？与其说具备这些属性，倒不如说HTML标签元素被不同的规则所影响，导致拥有不同的属性

HTML 常见的标签有<div>、<p>、<li>和<table>以及<span>、<img>、<strong> 和<em>等。虽然标签种类繁多，但通常我们就把它们分为两类：块级元素（block-level element）和内联元素（inline element）。

多年开发老码农福利赠送：网页制作，网站开发，web前端开发，从最零基础开始的的HTML+CSS+JavaScript。jQuery，Vue、React、Ajax，node，angular框架等到移动端小程序项目实战【视频＋工具＋电子书＋系统路线图】都有整理，需要的伙伴可以私信我，发送“前端”等3秒后就可以获取领取地址，送给每一位对编程感兴趣的小伙伴

持续更新......

HTML 块

上一篇：1. 如何理解HTML语义化?
下一篇：深入理解javascript作用域系列第四篇——块作用域

温故而知我不懂的CSS

流（Normal flow）

CSS世界

流是如何影响整个CSS世界的

什么是流体布局

CSS 新世界——CSS3

布局更为丰富

视觉表现长足进步

盒模型

视觉格式化模型(visual formatting model)

盒子的生成

W3C 标准盒模型：

IE盒模型：

box-sizing属性更改盒模型

CSS流的规则

什么是格式化上下文（Fatting context）

块级元素和内联级元素

持续更新......

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿