CSS世界观

CSS 世界的诞生就是为图文信息展示服务的

CSS流

image-20231016112240934

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

“流体布局”,指的是利用元素“流”的特性实现的各类布局效果。因为“流”本身具有自适应特性,所以“流体布局”往往是具有自适应特性的。

“流体布局”并不等同于 “自适应布局”。“自适应布局”是对凡是具有自适应特性的一类布局的统称,“流体布局”要狭 窄得多。

CSS世界的开启从IE8开始

本书的CSS世界特指的是 CSS2.1 的世界。对 CSS2.1 的全面支持是从微软公司的 IE8 开始的,因此,本书中几乎所有特性、行为表现 都是针对 IE8 以上浏览器的。

CSS3新世界

  1. 布局更为丰富。
    • 移动端的崛起,催生了 CSS3 媒介查询以及许多响应式布局特性的出现,如图片元素 的 srcset 属性、CSS 的 object-fit 属性。
    • 弹性盒子布局(flexible box layout)终于熬出了头。
    • 格栅布局(grid layout)姗姗来迟。
  2. 视觉表现长足进步。
    • 圆角、阴影和渐变让元素更有质感。
    • transform 变换让元素有更多可能。
    • filter 滤镜和混合模式让 Web 轻松变成在线的 Photoshop;
    • animation 让动画变得非常简单