css相关
实现居中对齐
1.在知道父级高度的情况下：
a. 上下居中，在知道自身高度的情况下根据计算使用padding和margin实现
b. 也可以使用line-height来实现
c.在父元素跟子元素行高一致时，可以设置子元素vertical-align: middle，且子元素为行内元素
注意：关于vertical-align: middle，看这里
2.在不知道父级高度的情况下：
a. 知道自身高度的情况下，使用absolute，配合margin来实现
b. 在不知道自身高度情况下，使用absolute，配合transform来实现
c.使用flex模式,直接align-items: center;上下居中，justify-content：center
清除浮动
1.浮动初衷：实现文字环绕
2.浮动负面效果：父级高度塌陷
3.浮动属于半脱离文档流，他与其他为浮动元素相比会出现相似absolute的效果，但相同的float又不会互相重叠，且float会占据位置
4.清除浮动的方法
a. 在css中本身就有移除浮动的样式clear：both，表示该元素左右不允许浮动，这个时候父元素可以捕捉到它，实现撑开高度
b. 直接设置好高度（不建议）
c.设置overflow：hidden；或者display：inline-block
box-sizing
1.一般默认值为content-box，（直译：内容盒子），宽高只包含content的内容，不包含padding和boder
2.border-box（直译:边框盒子），宽高包含padding和border
css权重
!important > 内联样式 > id选择 > （class选择 = 伪类选择） > (标签选择 = 伪元素选择)
什么是重绘和回流
1.重绘是指元素更新属性，只会影响颜色风格，不会影响布局的属性，比如color，background-color，这些称为重绘
2.回流是指更改布局，例如元素尺寸，显隐，位置等等更改结构的变动
3.重绘不一定回流，回流一定重绘
为什么建议使用transform
transform不会引起整个页面回流重绘，节省性能消耗，但是占用内存会相对大些
margin top之类的会出现回流
position
static：默认值，无视top/left/right/bottom
relative:相对定位，处于文档流，top/left/right/bottom会发生相应改变
absolute:绝对定义位，脱离文档流，top/left/right/bottom会根据定位变动位置，（定位由第一个已经定位过的属性或者根目录决定）
fixed：固定定位，脱离文档流，定位规则为相对窗口，top/left/right/bottom会根据定位变动位置
stick：粘性定位，依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。实现粘性布局(兼容性差)
margin重叠现象
在垂直方向上相邻的两个元素如果有相向的margin的设置时，margin回重叠，并且以较大的为最终显示结果
解决办法：
1，不要margin相向，可以用padding替代
2，设置float
3，设置display： inline-block
disable：none与visibility：hidden的区别
disable：none会使元素消失，不会占用空间
vsibility：hidden 元素还占据空间 但是不可见 会影响布局
理解BFC
纯css实现一个高宽比为1：3的盒子 列举几种方式
1，使用vh 单位
2，利用padding可以根据width设置百分比长度来设置，但这样具体内容得通过绝对定位来设置
对meta有什么理解
1，meta处于html的头部head内部，其内容不会呈现给客户，主要是给搜索引擎看
2，<meta charset="UTF-8"> 使用的编码格式，大部分是utf-8
3，meta根据用法分为两大类，
a，关键属性是name和content，这个用法是用来描述网站，用于seo
b，关键属性是http-equlv 用来告诉浏览器本次响应机制
为什么要初始化css样式？
因为浏览器的兼容问题，不同浏览器对有些标签的默认值不同，如果不初始化css，会导致不同浏览器页面间的显示差异。
移动端适配1px问题
移动端部分机型的border的粗细显示有问题，1px的大小实际显示效果不符
解决办法：利用伪类，做出1px的线条，在通过定位替代border
css实现一个旋转的圆
transform：rotate(7deg)
animation:spin 5s infinite;
@keyframes spin{
from {transform:rotate(0)}
to {transform:rotate(360deg)}
}
css3新增特性
1，新增选择器 p:nth-shild(n){ } 其中n代表第几个
2，flex布局
3，媒体查询
4，颜色透明度
5，圆角
6，渐变
7，阴影
8，背景效果
9，旋转挪移缩放
10，过渡
11动画
display:inline-block 什么时候不会显示间隙？
原理：元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），被当成一个空字符
解决：
1，出现原因是因为有回车之类的空字符，那么只要不要回车，不要空格即可解决
2，优雅一点，既然是空字符那么直接修改父级的font-size的大小为0，那么即空隙就没了
3，使用浮动，出现这种情况是行内元素的排版问题，那么使用浮动脱离行内元素
在网页中的应该使用奇数还是偶数的字体？为什么呢？
伪类和伪元素的区别
1，伪类是指某个元素的特殊状态，比如hover active等等
2，伪元素则是指在目标内部的前面或者后面添加一个元素
如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。
base64的原理及优缺点
优点：加密，减少http请求
缺点：需要消耗cpu解码
postcss的作用
css的预处理，比如兼容处理
css有哪些内置函数？举两个具体用法？
calc()//计算
rgb()//颜色
rgba()//颜色+透明度
var()//变量
linear-gradient()颜色渐变
