《CSS世界》学习笔记（一）

最新推荐文章于 2021-09-22 00:49:49 发布

置顶 monkeyfly007

最新推荐文章于 2021-09-22 00:49:49 发布

阅读量502

点赞数 4

分类专栏： css 文章标签： CSS世界 CSS世界学习笔记 CSS世界第一章

本文链接：https://blog.csdn.net/tel13259437538/article/details/83592544

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

《CSS世界》

第一章概述

1.1 CSS 世界的“世界观”

HTML —— 对应一块 魔法石
CSS 选择器 —— 对应魔法师手中的 选择法器，可以选择任何一块魔法石
每一种 CSS 属性 —— 对应一位 魔法师
CSS 的各种属性值 —— 对应魔法师的 魔法技能
浏览器 —— 它们所在的 “王国”
- “王国” 会不断更新法律法规（版本升级）；
- 或者允许魔法师使用某些新技能（即 CSS 新的属性值）；
- 以及是否舍弃某些魔法技能（如：display:run-in ）；
操作系统 —— 它们所在的世界。不同的操作系统代表不同的平行世界。
- CSS 世界拥有的 4 大平行世界：
  - PC 端的：Windows 世界、OS X 世界
  - 移动端的：Android 世界、IOS 世界

而对于不同的世界而言，各个浏览器王国的命运也是不一样的。

以上这一切就构成了完整的 CSS 世界的“世界观”。

问：为何要这样认识 CSS 世界呢？
答：
（1）将抽象的 CSS 直接和具体的现实世界相对应，更加易于理解。

（2）以完整的体系来学习 CSS ，要比单纯关注属性值理解得更加深刻。
可以培养从宏观层面认识与理解 CSS 的习惯。

（3）方便记忆。
因为枯燥的代码总是过目就忘，鲜活的角色总是印象深刻。

1.2 世界都是创造出来的

首先来看一下 CSS 世界出现的历史。

深入理解 CSS 属性的设计原因、表现原理——离不开当时的历史环境。

1995 年，在这个时间点，HTML 才是第一版且刚诞生没几年，W3C 刚成立，CSS 还未出现。

随着前端技术的快速发展，设计师要求越来越多，HTML 也越来越庞杂。

所以，此时急需要一门专门负责样式的语言。而 CSS 就是其中之一。

早期，CSS 从众多的样式表语言中脱颖而出，靠的就是它的“层叠”特性。

CSS 的全称是 Cascading Style Sheets ，即层叠样式表。英/kæ'skeɪdɪŋ/

层叠：即样式可以进行层层累加。后面写的样式可以覆盖先前写的同名样式。

CSS世界的诞生就是为图文信息的展示服务的。【很重要的一句话】

原因如下：

因为早期网站的功能就是为了信息展示。而早期的信息就是图片和文字。

所以，早期的网站前端技术关心的只是图片和文字的呈现。

反复强调的一句话：世界都是创造出来的。

如果自己当一回造物主，让自己重新构建一个 CSS 世界，唯一的要求就是：这个世界要非常便于图片和文字的呈现。

那么，你会如何去构建呢？

1.3 CSS完胜SVG的武器——流

在 2003 年，SVG1.1 就被确立为 W3C 标准。而 CSS2.1 是 2007 年才发布的。

SVG 的强项——图形，文字内容的呈现不敢恭维。
SVG 连基本的文字排版都做不好，要它何用？
因此，SVG被打入“冷宫”。而 CSS 被重用。

问：为什么 CSS 世界的图文显示能力那么强？为什么它可以抑制 SVG 这么多年？
答：流。

1.3.1 何为“流”？

“文档流” 的概念大家都听过吧。
“文档” 二字可以直接去掉，直接称为 “流”。

问：CSS 世界中的 “流” 指的是什么呢？
答： “流” 实际上是 CSS 世界中的一种基本的定位和布局机制。可以理解为现实世界的一套物理规则。

我们可以发现：

“流” 和现实世界的 “水流” 有着异曲同工的表现。
CSS 世界的 “流” 似乎就是按照物理世界的 “水流” 创造的。

CSS 世界构建的基石是 HTML ，而 HTML 最具代表的两个基石是 <div> 和 <span>。

div 是 CSS 世界中块级元素的代表；——对应盛水容器中的水。（水流会自动充满容器）
span 是 CSS 世界中内联级元素的代表。——对应盛水容器中的木头。（放入木头，水位升高，木头依次排列，不足则换行）

所以， “流” 就是 CSS 世界中 引导元素排列和定位 的一条看不见的 “水流”。

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

在 CSS 2.1 时代，我们可以直接称 CSS 为 “流的世界” 。
整个 CSS 世界几乎就是围绕 “流” 来建立的。

那么，“流” 是如何影响整个 CSS 世界的呢？
（1）擒贼先擒王。

既然 HTML 是 CSS 世界的基石，那么，只需要让 HTML 默认的表现符合 “流” 即可。
然后整个 CSS 世界就可以被“流”统治了。
（2）特殊布局与流的破坏。
对于复杂的网页布局来说，默认的 “流” 的形式就不再适用了。
所以，可以适时通过破坏 “流” 来实现特殊的布局。
（3）流向的改变。
“流” 存在一个默认的流向：“一江春水向东流” 以及 “ 飞流直下三千尺”
然而，我们可以对这种流向做出改变，来让 CSS 的表现更丰富。
【因此，“文档流从左往右，自上而下” 这种说法是不严谨的。】

如果你是造物主，你会想到设计 “流” 这套机制来实现强大的图文排列功能吗？

由此看来，目前 CSS 的设计还是很有智慧的。

1.3.3 什么是流体布局

“流体布局”，指利用元素 “流” 的特性实现的各类布局效果。

因为 “流” 本身就具有自适应特性，所以，“流体布局” 往往都是具有自适应性。

但是，“流体布局”≠ “自适应布局”。

“自适应布局” 是对具有自适应特性的一类布局的统称。
而 “流体布局” 的范围比较狭窄。

CSS 中最常用的魔法石，即最常使用的 HTML 标签 <div>。它就是典型的具有 “流” 特性的元素。

1.4 CSS世界的开启从IE开始

这里的 “世界” 特指 CSS 2.1 的世界，并不包括 CSS 3 。
对 CSS2.1 的全面支持是从 IE8 开始的。

1.5 table自己的世界

<table> 比 CSS 还老。在 CSS 正式诞生之前，<table> 就已经出现了。
前面提到过，“流影响了整个CSS世界”，其中并不包括 <table> 。
它有着自己的世界，“流” 的特性对 <table> 并不适用。

1.6 CSS新世界——CSS3

以前 以图文展示为主 的门户网站已经无法满足用户的需求。
技术总是随着需求发展的。
10年前的图文展示需求缔造了 CSS 世界。
如今的移动互联网以及硬件发展也带动了 CSS 进入了新的世界。即CSS3。

以下为 CSS3 的新属性：

（1）布局更为丰富

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

（2）视觉表现长足进步