字体
字体是一类字体族，在每类字体族下又分为几个小类。
在西方国家的字母体系，分成两大字族：serif（衬线字体）及sans serif（无衬线字体）。serif的意思是，在字的笔画开始及结束的地方有额外的装饰，而且笔画的粗细会因直横的不同而有不同。相反的，sans serif就没有这些额外装饰，而且笔画粗细大致上是差不多。
在书写是，字体族是不能打引号的，具体的某一个字体需要打引号。在使用中，我们会多写几种字体，浏览器从前往后找。
在mac电脑默认是用PingFang显示，在window电脑默认用微软雅黑。下面把PingFang写在前面就优先使用PingFang，如果没有就从后面找。
body {
font-family: "PingFang SC", "Microsoft YaHei"
}
网络字体
首先下载网络字体，然后声明一种字体，用@font-face声明，如图：
@font-face {
font-family: 'LF',
src: url("./identiry.tff")
}
body {
font-family: LF
}
行高line-height
行高就是一行的高度，这一行是由内联元素组成的，所以行高是由行内的内联元素的line-height的高度决定。下面代码中这一行的高度由里面是span元素的最大的line-height决定，所以这一行的高度是30px。
.c1{ line-height: 20px; } .c2{ line-height: 8px; } .c3{ line-height: 30px; }
<div>
<span class="c1">inline box xfg中文</span>
<span class="c2">inline box</span>
<span class="c3">inline box</span>
</div>
line-height为什么能让字体居中？
<div style="border: solid 1px red">
<span
style="
background: blue;
color: #fff;
font-size: 20px;
line-height: 60px;
"
>
居中xfg
</span>
</div>
span元素的line-height就是这一行的高度，所以div的高度是60。但是span本身的高度就是字体大小本身的高度，那么多余的高度就平均分配到上下两侧，就形成了居中对齐的现象。
注意：在span上加背景只会加到自身上面，不会把这个高度都会有背景。
行内元素的对齐方式
默认是基线对齐，通过vertical-align来设置对齐方式。还可以是数字，数字就是以基线来为基准的，vertical-align：5px 往基线上部移动5px的距离。
图片底部3px的问题
这个3px也不是绝对的，这是由span里面文字的大小决定的。为什么有这个问题呢？因为img也是行内元素，和文字也是基线对齐，基线和底线有一段距离，所以就会产生这个问题。解决方式就是把图片的对齐方式改为vertical-align : bottom
<div style="background:red">
<span>文字</span>
<img src="test.png"/>
</div>
background背景
background-size
指定背景图像的大小
background-size: length|percentage|cover|contain;
- length: 设置背景图片具体的高度和宽度
- cover: 图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被裁掉
- contain: 图片自身的宽高比不变，缩放至整个图片自身能完全显示出来，所以容器会有留白区域、
contain即为包含，我图片虽然缩放了，但是整个图是被包含在里面了，完整显示，不能裁剪。cover即为铺满，按宽高比进行铺满，可能会出现裁剪掉一部分图像的效果。
background-position
设置背景图像的起始位置，其值可以是left top等，也可以是具体的数值
background-clip
指定背景绘制区域
background-clip: border-box|padding-box|content-box;
以后如果设不想padding也有背景，直接置background-clip就可以了。
折行
- white-space: 规定段落中的文本不进行换行
- word-break: 对单词或者中文句子打断进行换行
- text-overflow: clip|ellipsis: 指定当文本溢出包含它的元素，应该发生什么 省略号
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
box-shadow
box-shadow: offset-x offset-y blur spread color position
offset-x/y
.left { box-shadow: 20px 0px 10px 0px rgba(0,0,0,0.5) }
.right { box-shadow: -20px 0px 10px 0px rgba(0,0,0,0.5) }
blur
第三个长度值代表了阴影的模糊半径，值为 0 意味着该阴影是固态而锋利的，完全没有模糊效果。blur 值越大，阴影则更不锋利而更朦胧 / 模糊。
.right { box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.5) }
spread
第四个长度代表了阴影扩展半径，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小。
position
此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值"inset",就是将外阴影变成内阴影。
利用box-shadow实现特殊的效果
box-shadow可以复制一个图像，然后用spread可以改变这个复制图像的大小，正数就变大，负数就变小，下面的图形就是通过box-shadow实现的。
网上有很多一个div实现很复制的图形，一般都是用box-shadow实现的。
.container{
background:red;
width:10px;
height:10px;
margin: 10px;
border-radius: 5px;
box-shadow: 200px 200px 0 5px green,
230px 200px 0 5px green,
215px 215px 0 -3px red;
}
<div class="container"></div>
clip-path
对容器进行裁剪，但是不会改变容器的大小。circle就是裁剪为一个圆形，当hover上去以后改变clip-path的区域，就可以形成一个动画。
clip-path: circle(50px at 100px 100px);
circle(50px at 100px 100px): 50px区域大小，100px 100px表示定位到图片的那个地方（x,y）
.container{
width: 400px;
height: 300px;
border: 1px solid red;
background:url(./panda.jpg);
background-size: cover;
background-repeat: no-repeat;
clip-path: circle(50px at 100px 100px);
transition: clip-path 0.4s;
}
.container:hover{ clip-path: circle(80px at 100px 100px); }
- 首先对容器裁剪成一个圆形
- 当hover上去的时候把裁剪的圆变大，这样就形成了一个比较好玩的效果
除了clip-path带有的裁剪路径，我们还可以自定义：
clip-path: url(#clipPath);
<div class="container">你好，我是熊猫</div>
<svg>
<defs>
<clipPath id="clipPath">
<!-- <circle cx="60" cy="60" r="50" fill="#34538b" /> -->
<polygon
stroke="#979797"
points="0.4921875 81.2070313 92.640625 81.2070313
121.601562 0.21875 153.648437 81.2070313 247.390625
80.7734375 173.394531 140.496094 200.308594
227.09375 121.601562 172.71875 53.4960937
227.09375 80.859375 140.496094"
></polygon>
</clipPath>
</defs>
</svg>
filter
blur
给图像设置高斯模糊， 所以值越大越模糊
grayscale
将图像转换为灰度图像，取值0 - 1
opacity
该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。如果叠加其他元素，那么其他元素就会透过这个元素显示出来。
filter还有其他一些效果，这里就不展开了
