非布局样式

字体

　　1、字体族

　　　　- serif sans-serif momospace

　　　　   cursive fantasy

        2、多字体 fallback

　　 3、网络图字体、自定义字体　　

　　　　@font-face {

　　　　　　font-family:"IF",

　　　　　　src:url(",,/indie.ttf");

　　　　}

　　　　网络字体：可能存在跨域问题，

　　 4、iconfont

　　　　原理就是自定义字体。

　　　　阿里巴巴提供的矢量图标库

行高

　　1、行高的构成

　　　　存在行高不一样，但是渲染的高度却是一样的。

　　　　line-height会影响外部的高度。内联元素一行的高度

　    2、行高的相关现象和方案

　　　　底线和顶线对齐，使用三个 inline-block元素

　　　　img元素，下面会有一部分空隙，baseline

　　　　图片3px缝隙问题，如何解决： vergin-aling:bottom.

　　　　　　　　　　　　　　　　　　将图片变成block元素 

背景

　　背景颜色

　　　　background:hsl(0,100%,50%)

　　渐变色背景

　　　　linear-gradient(45deg,red,gree)  默认 0 从下到上

　　　　background-size:30px 30px;

　　　　可以实现网格形状

　　多背景叠加

　   背景图片和属性（雪碧图）

　　　　原理与方法，可以用来优化界面

　　　　background-position  值一般是负值

　　　　background-repeat  

　　　　background-size  使用的场景是什么？

　　　　　　在移动端需要，看起来更加清晰。两倍图，两倍屏

　　　　　　多分辨率适配

　　　　　　base64 和 性能优化

　　　　　　　　转的时候，体积会比原来的 大三分之一

　　　　　　　　传输性能会有优势，但是体积变大，解码开销增大　

　　　　　　　　一般用于小图标

　　　　　　　　如何转： 在打包的时候进行构建