CSS基础
选择器
半透明,可叠加，第一张的padding，第二张的font-size，第三张的background
<style>body{padding :10px;font-size 14px;background-color: red;}body.body{font-size 14px;background-color: red;}#body{background-color: blue;}</style>
三种样式，权重body<body.body<#body，body、class、id选择器
背景蓝色id选择器生效，对red背景覆盖。
层叠作用
基本规则：先写一个选择器
{
属性：值；//分号是分隔符
}
用于匹配不同的HTML元素
有不同的匹配规则
多个选择器可以叠加
例子中的body.body是body、class选择器叠加
作用
用于匹配不同的HTML元素分类和权重解析方式和性能值得关注的选择器
分类
元素选择器a{}：指定元素的名字伪元素选择器：：before 不会出现在html，dom中，可显示内容和样式类选择器.link，常见的class属性选择器[type = redio]{}选中单选框伪类选择器：hover{}，鼠标状态下的样式ID选择器#id{}，选择特定元素或区域，不会选择一堆组合选择器[type=checkbox]+lable{}属性选择器选中复选框+否定选择器：not(.link){}反向选择器通用选择器*{}元素都匹配
分类原因：涉及权重问题，谁的权重大，以谁为准，但叠加权重不进位
ID选择器#id{} +100类 属性 伪类 +10元素 伪元素 +1其他选择器 +0
权重
！important权重最高，不被覆盖元素属性 优先级高相同的权重 后写的生效
非布局样式（字体）
字体查询
// 先查询苹果平方字体，没有在查询微软雅黑，没有的话就用衬线字体渲染.abc {font-family:"PingFang SC", "Microsoft Yahei", monospace// font-family:"Microsoft Yahei", serif;}
注意：
字体族不能加引号,比如具体的字体(PingFang-SC)用引号包裹，但字体族(serif)不能用引号包裹
— serif 衬线字体，如宋体；sans-serif 非衬线字体，起收圆滑；monospace等宽字体 ；
cursive方正字体，很少用于网络； fantasy花体，用于英文
多字体fallback，找不到指定字体，继续找其他字体进行渲染顺序，苹果用户优先判断是否有平方字体，而安卓用户判断没有平方字体就会使用雅黑，顺序颠倒是不行的。先把少数平台的字体现在前面，考虑 fallback 机制。
网络字体、自定义字体, 使用远程字体需要考虑跨域，需要服务器允许跨域
iconfont 阿里巴巴图标库
非布局样式
字体、字重、颜色、大小、行高
背景、边框
滚动、换行
粗体、斜体、下划线
其他
行高
行高的构成,由inline box决定
行高决定上下的高度不同,line-height 会撑起来,inline box的高度虽然不同,但是渲染高度是一样的,文字排版,顶线和底线,字母x对应的线,base-line,默认文本都是按照base-line去对齐的;行高会把外面盒子撑起来,第三个元素最高正好是30px,决定了整行,是由line-hight 撑起来的,但不会影响本身布局的高度;这些内联元素加一起组成一行,
行高相关的现象或方案
例子分四段,第一段div,span没有定高,默认inline;背景blue渲染根据字体,和行高无关;line-height是60个像素,边框撑起来,inline元素在div是垂直居中的,垂直居中可以通过line-height来做,不用给div指定高度;
字体大小不一样,怎么对齐?按照基线对齐;想要居中对齐,设置vertical-align为middle;line box由最高的元素撑起来的;都设为top,是按顶部对齐,顶线对齐;bottom是底线对齐;vertical-align是基于base-line作调整的,最好不要用数字去做,适应性很差
第三个DOM里的图片和最下边有空白,image默认inline的元素,遵守行高,按baseline基线对齐,导致基线和底线之间有一段空隙,偏差大小视字体而定,比如12px图片,3px偏差。它会遵守垂直对齐这样一个方式，默认是base-line，那就改为bottom，按底线对齐；第二种改法，不按inline排列，display：block，独占一行，间隙也没有了。block排列布局
行高的调整
背景
背景颜色
用具体格式#0ff00等，对RGB不敏感；hsl（0，100%饱和度，50%亮度），方便调整；hsla（0，100%饱和度，50%亮度，3透明度）；rgb（255，0，0）/rgba（255，0，0，0）；背景图可以设置
渐变色背景
background：-webkit-linear-gradient(left,red,green);//比较早的webkit，表示从左开始是red，结束是绿色background：linear-gradient(toright,red,green);//标准写法，但也比较早background：linear-gradient(45deg,red,green);//左下角到右下角，deg表示方向，0deg从下到上
上下/左右渐变
中心到四周辐射渐变，做各种背景，网格状、波浪形
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TJBP512e-1595419724708)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-102938790.png)]
多个背景叠加
一个容器指定不同背景
背景图片和属性（雪碧图）
减少http请求
优化页面
background-position：-34px，-17px；background-size：30px，30px；
base64和性能优化
base64是一段文本，写成图片形式，在打包的时候转成base64
多分辨率适配
一个像素去覆盖更多的像素，高清屏。
