正确认识CSS

概念

CSS 全称是 Cascading Style Sheets，意思是 “层叠样式表”。所谓 “层叠”，就是样式可以层层叠加。如页面所有元素都继承了 12 像素的大小，某标题却可以设置成 16 像素进行叠加。这种层叠策略对于样式的显示会更灵活。

不同于传统编程语言

CSS 是一名门有别于其他程序语言的语言。绝大多数传统编程语言，规则、方法等等表现的结果相对来说都是确定的，学习时能记住一个是一个，到手直接用就行，不用担心会出现让人莫名其妙的各种 “幺蛾子”。
但是 CSS 不一样，不能用之前学习其他语言的思路去学习它，因为页面上任何看似简单的呈现，都是由许多 CSS 属性共同作用的结果，如果仅仅套用一两个 CSS 属性值应有的表现来理解，会很狭隘、很不全面，甚至会导致根本无法理解。很多人的 CSS 水平，如博主本人，之所以停滞不前，是因为没有将所有的 CSS 当做一个整体，放在一个完整的世界中去看待。每个 CSS 属性，都和其它的 CSS 属性存在着千丝万缕的关系，背后的种种联系，远比我们想象的要强大。
典型的计算机开发语言，看重逻辑思维和抽象能力，但是 CSS 这门语言本身并无逻辑可言，看重的是特性间的相互联系和具象能力。

文档流（流）

要更好地认识 CSS，还得知道 “文档流” 这个概念，一般简称为 “流”。CSS 中的 “流” 实际上是，一种基本的排列布局和定位机制，可以理解为现实世界的一套物理规则。
“流” 如何影响整个 CSS：
让HTML默认的表现符合 “流” ，因为 CSS 世界的基石就是HTML；
现实中的页面有很多复杂布局，此时，就会通过破坏 “流” 来实现特殊布局；
为了使 CSS 的展现更为丰富，流向是可以改变的，所以，常说的 “文档流从左往右自上而下” 这种说法并不严谨，一定要纠正过来。

从 IE8 开始

对 CSS2.1的全面支持是从微软公司的 IE8 开始的，很多特性和行为表现都针对 IE8 以上的浏览器来讲了。
而现在的 CSS3 则更为庞杂和宏大：

1. 布局更为丰富
   • 媒体查询及许多响应式布局特性出现，如图片元素的 srcset 属性，CSS 的 object-fit 属性
   • 弹性盒子布局（flex）
   • 格栅布局（grid）
2. 视觉变现更进一步
   • 圆角、阴影和渐变让元素更有质感
   • transform 变换让元素有更多可能
   • filter 滤镜和混合模式让 Web 轻松变成在线的 PS
   • animation 让动画变得非常简单

起初，CSS 的诞生就是为图文信息展示服务的。而CSS3 的设计初衷，是为了实现更丰富、更复杂的网页，所以基本和“流”关系不大。和 CSS2 相比，CSS3 是一个全新的世界，更加丰富、规范、体系化，也更加复杂。