CSS世界概述

欢迎来到CSS世界，这里有几个比较大的平行世界，不同世界有浏览器王国的命运也不一样，这里还有许多厉害的魔法师哦！

一、CSS世界的世界观

在CSS世界中：

世界：操作系统

不同的操作系统代表了不同的评选世界，CSS世界有几个比较大的平行世界，即：

• Window世界
• OS X世界
• 移动端iOS世界
• Android世界

王国：浏览器

不同世界的浏览器王国的命运不一样，例如：

• 在OS X世界中，IE王国是不存在的，而Safari王国异常强大
• 而在Window世界中，Safari王国异常落寞

魔法师：CSS属性

CSS的各种属性值就是魔法师的魔法技能

魔法石：HTML

选择法器：选择器

例如，使用.umbrella法器，即可对所有class="umbrella"的元素进行改变 CSS世界

二、CSS世界为什么被创造出来

2.1 CSS的诞生

在最开始的时候，互联网领域的信息就是图片和文字，网站的功能就是信息展示。那时候的网站前端技术关心的是图片和文字的呈现，而

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

2.2 CSS完胜SVG的武器——流

在很长一段时间里，网站的主要功能都是图片和文字信息的展示，而SVG的强项是图片，但是文字内容的呈现不敢恭维，所以SVG被打入冷宫，CSS一如既往被重用。

CSS为什么有强大的图文显示能力？

流！

2.3 什么是流？

流，即是“文档流”的简称，“流”实际上是CSS世界中的一种基本的定位和布局机制，可以理解为现实世界的“水流”。

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

CSS世界构建的基石是HTML,而HTML最具代表的两个基石<div><span>正好是CSS世界中的块级元素和内联元素的代表，对应着盛水容器的水和木头

现实中的水流：水流自动铺满容器，放入木头，水位升高，木头依次排序。
CSS世界中的流：div自动铺满容器，图片文字依次排列，不足则换行。

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

• 通过控制HTML默认的表现符合流，来使流”统治CSS世界
• 通过破坏“流”来实现特殊布局
• 通过改变流的流向来改变表现形式

流体布局

利用元素“流”的特性实现的各类布局效果。例如“div+CSS布局”

注意：“自适应布局”是凡具有自适应特性的一类布局的统称，“流体布局要小寨的多。例如表格布局是自适应布局，但不是流体布局”

2.4 CSS的世界的一些备注

• 对CSS2.1的全面支持是从微软公司的IE8开始的。
• <table>比CSS还要老,他有自己的世界。“流”的特性对<table>并不适用，一些CSS属性的表现，如单元格的vertical-align，也和普通元素不一样。
• CSS新世界——CSS3:布局更为丰富，视觉表现长足进步。

三、致谢

本文内容我对张鑫旭老师《CSS世界》一书第一章的学习笔记，感谢张鑫旭老师，也感谢阅读本文的你给我的鼓励!也欢迎来我的网页踩踩哦,网页里阅读更轻松~网页入口在这哦

作为一个前端小白，如果学习笔记中有错误的地方，还请不吝指点，谢谢！