版权声明：本文为博主原创文章，转载时请标明出处 https://blog.csdn.net/weixin_41056807/article/details/86497322
第一章 概述
1.1 CSS世界的“世界观”
1.2 世界都是创造出来的
1.3 CSS完胜SVG的武器——流
1.3.1
什么是“流”：实际上是css世界中的一种基本的定位和布局机制。
css世界构建的基石是HTML，而HTML最具有代表的2个基石<div>和<span>正好是css世界中块级元素和内联级元素的代表
1.3.2
流是如何影响整个css世界
1.3.3
什么是流式布局？
利用元素“流”的特性实现的各类布局效果。“流”本身具有自适应特性。
流体布局不等于自适应布局
表格布局也可以设置为100%自适应，但是表格和“流”不是一路的，并不属于“流体布局”
div+css布局：实际上就是这里的“流式布局”
1.4 CSS世界的开启从IE8开始
1.5 table自己的世界
1.6 CSS新世界——CSS3
css3：
布局更为丰富：
- 移动端
- 弹性盒子布局flexible box layout
- 栅格布局grid layout
视觉表现长足进步 - 圆角，阴影和渐变让元素更为质感
- transform变换让元素有更多可能
- filter滤镜和混合模式让web轻松变成Photoshop
- animation让动画更简单
第二章 需提前了解的 术语和概念
2.1务必了解css世界的专业术语
- 属性
- 值：常见类型：整数型，数值，百分比，长度值，颜色值，还有字符串值，位置值等类型。在css3中还有角度值频率值时间值等类型
- 关键字 如：transparent，solid，inherit（作为泛关键字也就是所有css属性都可以拥有的关键字）
- 变量 css中变量有限，css3中currentColor就是
这里简单介绍一下，详细请转入
currentColor顾名思意就是“当前颜色”，准确讲应该是“当前的文字颜色”，例如：
.xxx { border: 1px solid currentColor; }
虽然改变的是文字颜色，但是图标颜色也一起变化了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.icon {
display: inline-block;
width: 6px; height: 10px;
background-image: url("images/tick.png");
background-color: currentColor; /* 该颜色控制图标的颜色 */
}
.link:hover { color: #333; }/* 虽然改变的是文字颜色，但是图标颜色也一起变化了 */
</style>
</head>
<body>
<a href="##" class="link"><i class="icon icon1"></i>返回</a>
</body>
</html>
鼠标放到上面
可以看到效果在
- 长度单位 （2%后面的%不是长度单位） 关系：
<number> +长度单位 =<length>
- 功能符 是值以函数的形式指定，主要用来表示颜色（rgb（），rgba（）），背景图片地址url（），元素属性值，计算calc（），过渡效果等。
- 属性值 是由 值+关键字+功能符 组成
- 声明 是属性名+属性值
- 声明块 是花括号{}包裹的一系列声明
- 规则或规则集
- 选择器 类选择器，ID选择器，属性选择器，属性选择器，伪类选择器，伪元素选择器
- 关系选择器 常见符号 空格， > ,~,+
有后代选择器（空格），相邻后代选择器（>），兄弟选择器（~），相邻兄弟选择器（+） - @规则 是指以@开头的一些规则，如@media，@font-face，@page,@support