温故而知我不懂的CSS _CSS

我们是否想过没有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%自适应，但表格和“流”不是一路的，并不属于“流体布局”