css3中引入了一个新的单位fr（fraction），中文意思为分数，用于替代百分比，因为百分比（小数）存在除不尽的情况，用分数表示可以避免多位小数的写法。
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。
一、 px 全称是pixel(像素)，相对长度单位，相对于屏幕分辨率而言的。特点：IE无法调整使用px作为单位的字体大小；
二、em是基于基数来计算出来的相对字体大小
特点：①em是相对长度单位，相对于当前对象内文本的字体尺寸。如果当前对象文本大小未设定，则相对于浏览器的默认字体尺寸。
② em的值不是固定的；
③ em会继承父级元素的字体大小；
根据以上特点我们知道em单位转换为像素值，大小取决于自身父级元素所设置的px值大小。父级元素字体大小乘以em的值。
三、rem是css3新增的属性，也是一个相对单位
特点：rem只相对于HTML根元素，所以通过rem既可以设定页面根元素就成比例的调整所有字体的大小，有可以避免字体大小逐层复合的连锁反应。
如：浏览器默认的字号16px，那么，
| px | rem |
| 12 | 12/16 = .75 |
| 14 | 14/16 = .875 |
| 16 | 16/16 = 1 |
| 18 | 18/16 = 1.125 |
| 20 | 20/16 = 1.25 |
| 24 | 24/16 = 1.5 |
| 30 | 30/16 = 1.875 |
| 36 | 36/16 = 2.25 |
| 42 | 42/16 = 2.625 |
| 48 | 48/16 = 3 |
四、fr是自适应单位，fr单位被用在一系列长度值中分配剩余空间，如果多个已指定多个部分，则剩下的空间根据各自数字按比例分配。
（另外，vh，vw也是css3新增属性，分别是相对于视口的高度和宽度，视口被分为100等分）
css中允许多个class：
<h1 class="green bold">... </h1>。
举例：如果同时有一个p元素和一个h1元素下都有一个 class = uppercase ，那么可以通过在类名前添加它的父类来加以区分：
注意：两个元素之间没有空格。(类似的， background-image: url(图片地址) ，url和后面的括号之间也不能有空格）
想要设置 <li>... </li> 的css样式，可以通过嵌套元素的设置方法设置：
同时选中：
通过用逗号分隔 .h1 和 .menu ， 这两个类都会被相应的css格式修饰。
CSS declarations are structured into property and value pairs.
CSS语句都是属性和值相对应的结构。
font-family 定义了元素的字体。
font-size 控制文字显示的大小。
font-weight 定义文字的粗细程度。
text-align 属性控制文字的对齐方式，可以取的分别为： left , right , center 。
文字可以有两种颜色属性：前景色—— color 和背景色—— background-color 。 color 控制文字的颜色， background-color 控制文字的背景色。
CSS中可以用 opacity 属性来令某个元素透明。
CSS中也可以通过 background-image 属性来设置某个元素的背景为一张图片。
除了颜色、边框样式、边框大小之外，还可以调节边框的圆角大小，单位也是 px ：
可以分别声明padding-top、padding-right、padding-bottom以及padding-left的值。
同时也可以直接声明 padding: 3px 4px 5 px 6px ，顺序分别是上、右、下、左。
使用上面这种写法时，所有边的padding数值都必须写明。
不过，如果上下、左右的padding值是相等的，也可以写作：
padding: 5px 10px ，这代表上下的padding都是5px，而左右的padding都是10px。
margin和padding类似，也有 margin-top 、 margin-right 、 margin-bottom 、 margin-left 。
同样可以写作
margin: 10px 20px 10px 2opx或者 margin: 10px 20px，表示上下边距为10px，左右边距为20px。
margin的叠加有一点特殊：
水平方向的叠加就是简单的数字叠加。例如，如果左边盒子 margin-right = 10px，而右边盒子的 margin-left = 20px，那么这两个盒子放置在一起时，他们交界处的 margin= 10 + 20 = 30px。
而竖直方向的情况则有所不同，对于叠放的两个盒子，如果上面盒子的 margin-bottom = 30px，而下面盒子的 margin-left = 20px，则交界处的 margin值 为：30px。
利用margin实现居中对齐：
首先需要父元素有固定的 width 或者 height 。比如如果想要让 div1 实现横向居中对齐，首先应该设置其父元素 div0 的 width= 400px ，然后在 css文件 中设置div1的margin值为： margin: 0 auto
被父元素包裹着的子元素可能会占据空间过大而超过父元素的容纳范围，此时可以通过设置overflow的值来进行调整。
overflow的值可以为： scroll 、 hide 、 display 。
可以利用 display 属性来设置HTML元素的显示方式。
可以设置为： none , block , inline-block , inline 。
none 表示元素不显示；
block 表示显示为块级元素；
inline 表示显示为行内元素；
inline-block 表示显示为行内块级元素。
块级元素和行内块级元素可以设置 width height 属性，
而行内元素则不能。
注：一旦给元素加上absolute或float就相当于给元素加上了 display:block。
1. static属性：
static是html元素的默认position值，也就是按照正常的文档流排列。
2. fixed属性：
fixed的效果参见各种定在网页上的广告。
3. relative属性：
relative的元素是相对于自己的default position来定位的。
3.1 默认情况下：
可以看到与默认情况并无区别，
这是因为没有指定目标HTML元素相对其default position的偏移量。
结果：
结果：
结果：
结果：
通过float属性，可以使HTML元素脱离正常的文档流，竖直方向上将不再占用文档的空间，不过水平方向上不变。
比如可以利用这一特性，让序列横向排列:
HTML文件：
CSS文件：
默认情况下的结果：
利用float属性来ul元素横向排列：
结果：
此时只需要设置一下backPanel的height即可：
比如现在 ul元素 都没有父元素包裹了，上面只有一个 <p></p>元素，float之后的 ul元素 并不会“飞到”文档顶端去：
css中的color从类型上可以分为 color (前景色) 和 background-color ：
效果：
举例：
结果：
font-family: 字体名称
font-weight: bold | normal
也可以用数值来表示，数值的范围为[100, 900]且必须是100的整数倍。
举例：
font-style: italic ——斜体；
text-transform: uppercase | lowercase
text-align: left | right | center
举例：
以上CSS语句的意思是：
注：
相对应地，也存在 非衬线字体 ： sans-serif fonts
grid-template-columns: 100px 200px的意思是：将此网格分为两列。
其中，第一列的width = 100px，第二列的width = 200px。
宽度的单位也可以不是 px ，可以用 百分数 表示：
上面grid的宽度是1000px， 所以第一列的宽度是1000 * 20% = 200px；同理，第二列的宽度是500px。
也可以混用 px 和 % ：
这3列中，第一列width为20px，第二列为100 * 40% = 40px，第三列width为60px。
注意： 也就是说，总宽度20 + 40 + 60 = 120px，超过了100px，元素会超出grid的界限。
与定义 grid columns 是类似的:
结果：
结果：
通过单位 fr ，我们可以将行和列定义为对grid的length和width的划分——作用类似于 % ，但是用 % 是有超出父容器边界的风险的，而用 fr 则不用担心，因为浏览器会自动对grid进行划分。
如果行高或列宽相等，可以用 repeat() 函数来简化语句：
结果：
.grid {
display: grid
grid-template-columns: 100px minmax(100px, 500px) 100px
}
结果：
行间距同理：
grid-row-gap: 10px
同时设置行、列间距：
grid-gap: 20px 10px —— 一句话，分别设置行间距为20px，列间距为10px。
注：
这一简写形式并不需要 / ，如果只提供了一个值，比如： grid-gap: 10px，则相当于 grid-gap: 10px 10px。
简写形式：
同理，
同样，也可以写作：
span 可以明确地指出希望行或列跨越的距离：
比如，如果想要row从第4行开始，占两行，就可以直接写作：
不用 grid-row 的简写形式，也可以写作：
当然， span 也可以用在 grid-row-start 之后，浏览器会自动为我们计算出结果：
结果：
可以用一句话声明一个item占grid的多少行、列，并限定它在grid中的具体位置。
结果：
利用这个属性，可以先做出一个模板，然后让各个元素分别去“认领”他们所占的行和列。
比如 container 下面有5个板块:
注：
图中的grid是四行两列的，当header 和 header并列时，表示header占两列，此时header将占据整行，即使存在grid gap，依然不会将两个header分隔开。虚线只是为了便于理解，实际并不存在。
设置grid元素在每个格子中水平方向上的 对齐方式 。
justify-items 属性可以接收的值为：
注：这个属性是container中的，而不是每个item的。
设置grid元素在每个格子中竖直方向上的 对齐方式 ：
同样可以接收以下值：
注：这个属性是container中的，而不是每个item的。
设置整个grid在其父容器中，水平方向上的对齐方式：
可以取的值为：
同理，利用 align-content 属性可以设置整个grid在其父容器中，竖直方向上的对齐方式。
原理均与 justify-content 属性相似，不再赘述。
利用 justify-self 、 align-self 属性，可以分别设置grid的每个格子中，具体某个item在水平、竖直方向上的对齐方式。
