!important优先级最高
元素属性优先级高
相同权重后写的生效
举个栗子：
CPP!DOCTYPEhtmlhtmlheadmetacharset="UTF-8"metaname="viewport"content="width=device-width,initial-scale=1.0"titleCSS选择器/titlestyle.test1{color:red;}.test1{color:blue;}.test2{color:red!important;}.test2{color:blue;}#test3{color:red;}/style/headbodyid="body"div蓝色/divdiv红色/divdivid="test3"style="color:blue;"蓝色/div/body/html
运行结果如下图所示：
img
非布局样式字体字体族例如:serif、monospace（不能添加引号）衬线字体
多字体fallback例如：“monaco”、”MicrosoftYahei”、”PingFangSC”
网络字体、自定义字体
iconfont
行高（经典问题）行高的构成（由line-box组成，line-box由inline-box组成）
行高相关的现象和方案（可以通过设置line-height来实现垂直居中效果）
行高的调整
经典问题：图片下面有空隙，原理是什么？怎样去除？
img原理是因为图片按照inline进行排版，排版的时候会涉及到字体对齐，默认按照baseline对齐，baseline和底线之间是有偏差的，偏差大小是根据字体大小而定，如果是12px字体大小，则图片空隙就是3px左右。这就是经典图片3px空隙问题。
解决方式：
由于默认按照baseline对齐，不妨将vertical-align设为bottom，按照底线对齐。
设置
display:block
可以解决该问题，但是会独占一行，如下图所示：
img
背景
背景颜色
渐变色背景
多背景叠加
CODE!DOCTYPEhtmlhtmlheadmetacharset="UTF-8"metaname="viewport"content="width=device-width,initial-scale=1.0"title渐变色背景（线性梯度）/titlestyle.div1{height:90px;}.div2{height:90px;/*background:linear-gradient(toright,red,green);*//*background:linear-gradient(deg,red,green);*//*background:linear-gradient(deg,red0,green15%,yellow50%,blue90%);*//*网格线*/background:linear-gradient(deg,transparent0,transparent49.5%,green49.5%,green50.5%,transparent50.5%,transparent%),linear-gradient(45deg,transparent0,transparent49.5%,red49.5%,red50.5%,transparent50.5%,transparent%);background-size:30px30px;}/style/headbodydiv/divdiv/div/body/html
最后一个例子展示效果：
img
背景图片和属性（雪碧图）
CPPbackground-repeat:no-repeat;background-size:30px30px;//相对于容器偏移background-position:30px30px;
雪碧图就是将很多个图片进行拼接成一个图片，然后通过background-position等属性进行偏移，在网页中得到对应图片，来达到减少