本文共 2970 字,大约阅读时间需要 9 分钟。
HTML
—— 对应一块 魔法石CSS
选择器 —— 对应魔法师手中的 选择法器,可以选择任何一块魔法石CSS
属性 —— 对应一位 魔法师CSS
的各种属性值 —— 对应魔法师的 魔法技能“王国”
“王国”
会不断更新法律法规(版本升级);CSS
新的属性值);display:run-in
);CSS
世界拥有的 4
大平行世界: PC
端的:Windows
世界、OS X
世界Android
世界、IOS
世界而对于不同的世界而言,各个浏览器王国的命运也是不一样的。
以上这一切就构成了完整的 CSS
世界的“世界观”。
问:为何要这样认识 CSS
世界呢?
CSS
直接和具体的现实世界相对应,更加易于理解。 (2)以完整的体系来学习 CSS
,要比单纯关注属性值理解得更加深刻。
CSS
的习惯。 (3)方便记忆。
因为枯燥的代码总是过目就忘,鲜活的角色总是印象深刻。首先来看一下 CSS
世界出现的历史。
深入理解 CSS
属性的设计原因、表现原理——离不开当时的历史环境。
1995
年,在这个时间点,HTML
才是第一版且刚诞生没几年,W3C
刚成立,CSS
还未出现。
随着前端技术的快速发展,设计师要求越来越多,HTML
也越来越庞杂。
所以,此时急需要一门专门负责样式的语言。而 CSS
就是其中之一。
早期,CSS
从众多的样式表语言中脱颖而出,靠的就是它的“层叠”特性。
CSS
的全称是 Cascading Style Sheets
,即层叠样式表。英/kæ'skeɪdɪŋ/
层叠:即样式可以进行层层累加。后面写的样式可以覆盖先前写的同名样式。
CSS世界的诞生就是为图文信息的展示服务的。【很重要的一句话】
原因如下:
因为早期网站的功能就是为了信息展示。而早期的信息就是图片和文字。所以,早期的网站前端技术关心的只是图片和文字的呈现。
反复强调的一句话:世界都是创造出来的。
如果自己当一回造物主,让自己重新构建一个 CSS
世界,唯一的要求就是:这个世界要非常便于图片和文字的呈现。
那么,你会如何去构建呢?
在 2003
年,SVG1.1
就被确立为 W3C
标准。而 CSS2.1
是 2007
年才发布的。
SVG
的强项——图形,文字内容的呈现不敢恭维。SVG
连基本的文字排版都做不好,要它何用?SVG
被打入“冷宫”。而 CSS
被重用。问:为什么 CSS
世界的图文显示能力那么强?为什么它可以抑制 SVG
这么多年? 答:流。
“文档流”
的概念大家都听过吧。
“文档”
二字可以直接去掉,直接称为 “流”
。
问:CSS
世界中的 “流”
指的是什么呢? 答: “流”
实际上是 CSS
世界中的一种基本的定位和布局机制。可以理解为现实世界的一套物理规则。
我们可以发现:
“流”
和现实世界的 “水流”
有着异曲同工的表现。CSS
世界的 “流”
似乎就是按照物理世界的 “水流”
创造的。CSS
世界构建的基石是 HTML
,而 HTML
最具代表的两个基石是 <div>
和 <span>
。
div
是 CSS
世界中块级元素的代表;——对应盛水容器中的水。(水流会自动充满容器)span
是 CSS
世界中内联级元素的代表。——对应盛水容器中的木头。(放入木头,水位升高,木头依次排列,不足则换行)所以, “流”
就是 CSS
世界中 引导元素排列和定位
的一条看不见的 “水流”
。
在 CSS 2.1
时代,我们可以直接称 CSS
为 “流的世界”
。
CSS
世界几乎就是围绕 “流”
来建立的。 那么,“流”
是如何影响整个 CSS
世界的呢?
HTML
是 CSS
世界的基石,那么,只需要让 HTML
默认的表现符合 “流”
即可。CSS
世界就可以被“流”统治了。 (2)特殊布局与流的破坏。“流”
的形式就不再适用了。“流”
来实现特殊的布局。 (3)流向的改变。“流”
存在一个默认的流向:“一江春水向东流”
以及 “ 飞流直下三千尺”
CSS
的表现更丰富。 【因此,“文档流从左往右,自上而下”
这种说法是不严谨的。】如果你是造物主,你会想到设计 “流”
这套机制来实现强大的图文排列功能吗?
由此看来,目前 CSS
的设计还是很有智慧的。
“流体布局”
,指利用元素 “流”
的特性实现的各类布局效果。
因为 “流”
本身就具有自适应特性,所以,“流体布局”
往往都是具有自适应性。
但是,“流体布局”≠ “自适应布局”
。
“自适应布局”
是对具有自适应特性的一类布局的统称。“流体布局”
的范围比较狭窄。CSS
中最常用的魔法石,即最常使用的 HTML
标签 <div>
。它就是典型的具有 “流”
特性的元素。
“世界”
特指 CSS 2.1
的世界,并不包括 CSS 3
。CSS2.1
的全面支持是从 IE8
开始的。<table>
比 CSS
还老。在 CSS
正式诞生之前,<table>
就已经出现了。“流影响了整个CSS世界”
,其中并不包括 <table>
。“流”
的特性对 <table>
并不适用。以前 以图文展示为主
的门户网站已经无法满足用户的需求。
技术总是随着需求发展的。
10年前的图文展示需求缔造了 CSS
世界。
如今的移动互联网以及硬件发展也带动了 CSS
进入了新的世界。即CSS3
。
以下为 CSS3
的新属性:
(1)布局更为丰富
CSS3
媒介查询 以及许多 响应式布局特性 的出现。 (如:图片元素的 srcset
属性、CSS的 object-fit
属性)(flexible box layout)
终于熬出了头。(grid layout)
姗姗来迟。(2)视觉表现长足进步
(border-radius)
、阴影(box-shadow)
和渐变(gradient)
让元素更有质感。transform
变换 让元素有更多可能。filter
滤镜 和 混合模式 让 Web
轻松变成在线的 Photoshop
。animation
让 动画 变得非常简单。因为 CSS3
的设计初衷是为了实现更丰富、更复杂的网页,所以基本上和 “流”
的关系并不大。
转载地址:http://xxwli.baihongyu.com/