非布局样式

非布局样式

包含五点，分别是
1、字体，字重，颜色，大小，行高
2、背景，边框
3、滚动，换行
4、粗体，斜体，下划线
5、其他

下边捡要点说

1、字体

常用字体族：

项目	Value
serif	衬线字体
sans-serif	非衬线字体
monospace	等宽字体
cursive	手写体
fantasy	花体

包括网络字体、自定义字体、多字体fallback（字体后备军）、iconfont（iconfont也属于自定义字体）

2、行高

详细内容：https://www.cnblogs.com/zhaowy/p/8400264.html
这里减重点说：
1、撑开高度的是line-height而不是内容
2、行高有一个特性：垂直居中性。

3、背景

是容器底层的铺垫，不会影响内容排布

1、背景颜色

颜色格式：
rgb（255，255，255）
rgba（255，255，255，透明度）
hsl（色相，饱和度，亮度，透明度）

2、背景渐变

1、基本渐变写法

background: linear-gradient(to right,red,green);

2、带角度的渐变

background: linear-gradient(45deg,red,green);

3、多颜色带角度渐变

background: linear-gradient(45deg,red 0, yellow 10% ,green 50%);

4、用透明属性画线

height: 50px;
width: 100px;
border: 1px solid black;
background: linear-gradient(45deg,red 0, transparent 0,transparent 45%,green 45%,green 50%,transparent 50%,transparent 100%);

加上背景尺寸，该背景平铺于盒子内，可做网格：

height: 90px;
			border: 1px solid black;
			background: linear-gradient(45deg,red 0, transparent 0,transparent 45%,green 45%,green 50%,transparent 50%,transparent 100%);
			background-size: 30px 30px;

height: 90px;
			background: linear-gradient(45deg,red 0, transparent 0,transparent 45%,green 45%,green 50%,transparent 50%,transparent 100%),
			 linear-gradient(135deg,red 0, transparent 0,transparent 45%,red 45%,red 50%,transparent 50%,transparent 100%);
			background-size: 30px 30px;

3、多背景叠加

这里用到上一步的背景渐变，可以用背景渐变来做各种有意思的效果。

4、base64和性能优化

将图片转化为base64引用，虽然体积会变为原来的三分之四（转存在css文件中，也会使css文件变大，也会增大解析开销），但会节省链接数，在传输上有性能优势。
用在小图标，少量的情况下。