01|CSS世界
01|CSS世界的世界观
将抽象的CSS直接和具体的现实世界相对应,更加易于理解,与此同时,理解魔法师和魔法石比理解CSS代码容易,完整的体系来学习CSS要比单纯关注属性值理解的更加深刻!
从宏观层面上认识和理解CSS的习惯,鲜活的角色总是印象深刻,枯燥的代码总是过目就忘!
其实本小节所体现的主体其实就在上面予以体现了!
着重的强调了以下几点:
- 知识的体系化
- 理论与生活相结合(加深概念的理解!)
- 让自己爽的理解方式和记忆方式
02|世界都是创造出来的!
CSS世界的诞生就是为了图文信息展示服务的!
03|CSS完胜SVG的武器-流
SVG 1.1 ====> 2003年1月被W3C纳入标准
CSS2.1 ====> 2007年发布!
SVG近几年来才慢慢火起来! 沉寂了好多年!
其中的话涉及到一个典故,就是SVG和Flash竞争,其实是被CSS打败的!
因为当时网站的初衷就是图文信息的展示,SVG厉害的地方在图形这块,但是SVG的文字内容的呈现效果不好,因此也就被CSS打败了!
知道我们后面现在的Web技术的快速发展,网页内容的丰富多彩,加上SVG在矢量图形领域的造诣,才大放光彩!
CSS之所以因为能够在图文展示这块压制SVG,其实是因为流,对 其实就是CSS世界中的"文档流"
01|什么叫做流
我们可以简单的通过河流来进行类比:
让水流流入一个容器,水平面一定是平整的,在水里面放入物体,水平面就会上升,多半会让木头浮在水面上!水一多了起来的话,水就会向外溢出!
通过以上的描述其实可以很简单的理解,与物理世界的关联其实可以很好的让我们来学习并且理解文档流
CSS世界构建的基石(基础)是HTML,对应的典型的块级元素和内联元素的代表,div和span,他们在文档流中的特性是:
- div自动撑满容器 依次往下排列
- span从左到右排列,挤满了就换行!
02|文档流是如何影响CSS世界的
CSS其实就是围绕"流"建立起来的,那么如何通过流,来影响CSS世界呢?
- 上文所提到的HTML默认表现符合"流"!
- 特殊布局与流破坏
- 因为默认是按照 流 实现基本布局的,但是如果说涉及到 复杂的布局 我们需要通过破坏流 进行特殊布局 其实 还是离不开 所谓的"流"!
03|什么是流体布局?
所谓的流体布局 或者是 "流式布局" 其实就是按照默认HTML默认的表现形式"文档流"来实现布局的!
但是呢,流体布局往往具有自适应性的,但是并不等于"自适应布局",自适应布局其实是对具有适应特征的一类布局的统称,其实所谓的"表格布局"也能实现100%自适应,但是表格和流并不是一路的,因此不属于"流体布局".
在很久之前的Web开发,网页布局其实主要是使用的div+css进行布局的,其实这利用的就是 流体布局!
04|CSS世界的开启从IE8开始
CSS世界这本书,其实就是指代的CSS2.1的世界,不包括更为广阔的CSS3,但是我们需要夯实基础的话,必须对CSS2.1有一个全面系统的了解和深入.
之所以说CSS世界的开启是从IE8开始的,是因为IE8全面支持CSS2.1,并且书中所有的特性和行为表现都是针对IE8以上浏览器的!
05|table自己的世界
为什么说table自己的世界呢,其实table标签比CSS还要老的!
table其实是HTML里面的东西,当时为了更好地图文信息展示,后面才慢慢有了对应的CSS!
与此同时table并不适用于CSS中的文档流特性!
06|CSS新世界-CSS3
随着技术的快速发展和互联网的野蛮生长,CSS也在不断更新迭代,CSS也迭代到了CSS3.
其中主要的特性包括:
- 布局更为丰富
- 移动端的兴起, 催生了 媒体查询和响应式布局
- 弹性盒子布局的出现! (flexible box layout)
- 栅格布局的出现! (grid layout)
- 视觉表现更为突出
- 圆角,阴影,渐变
- transform变换让元素更有可能!
- filter滤镜和混合模式让Web变成在线的PS
- animation让动画更加简单易用!
