CSS基础

CSS选择器

解析方式：从右往左解析，加快匹配速度

选择器分类

• 元素选择器 a{}
• 伪元素选择器 ::before{}
• 类选择器 .link{}
• 属性选择器 [type=radion]{}
• 伪类选择器 :hover{}
• ID选择器 #id{}
• 组合选择器 [type=checkbox] + label{}
• 否定选择器 :not(.link){}
• 通用选择器 *{}

权重选择器

• ID选择器 #id{} +100
• 类 属性 伪类 +10
• 元素 伪元素 +1
• 其他选择器 +0
• 属性后加 !important 优先级最高
• 元素属性 优先级最高
• 相同权重 后写的生效

非布局样式

字体

• 字体族
  serif sans-serif monospace cursive fantasy 设置的时候不需要双引号
• 多字体机制 fallback
  设定几个字体，从头到尾，有哪个字体用那一个
• 网络字体、自定义字体

@font-face {
	font-family: "IF";
	src: url("./IndieFlower.ttf");
}

行高

• 行高的构成
  由line-box决定的，line-box是由inline-box组成的
设置上下居中可以用line-height来设置
• 行高相关的现象和方案
  图片三像素
• 行高的调整

背景

• 背景颜色
  英文单词；hsla（角度，饱和度%，亮度%，透明度0.2）；rgb
• 渐变色背景
• 多背景叠加
• 背景图片和属性（雪碧图）
  • background-repeat: 平铺
  • background-position:位置
  • background-size:
  • 雪碧图实现方式：负参数
• base64和性能优化（小图片）
  • 图片转成文字，减少HTTP连接数，缺点：体积增大
• 多分辨率适配

边框

• 边框的属性
• 边框的背景图
• 边框衔接（三角形）

滚动

• 滚动行为和滚动条
  • overflow：auto（滚动的时候才有滚动条）；scroll（滚动条一直在）；hidden；visible

文字折行

• overflow-wrap（word-wrap）通用换行控制
  换行的时候是否要把单词保留住
• word-break 针对多字节文字
  可以设置中文句子为一个单位，或者一个字为一个单位
• white-space
  空白处是否断行

装饰性属性及其他

• 字重 font-weight: normal;bold;bolder;lighter;100
• 斜体 font-style:itatic
• 下划线 text-decoration
• 指针 cursor

面试

• css样式（选择器）的优先级
• 雪碧图的作用
• 自定义字体使用原理，场景
• base64的使用
• 伪元素（真元素）和伪类（状态）