CSS
1.盒模型（box-sizing）margin+border+padding+content
- 标准盒模型 box-sizing: content-box;(默认) 盒子宽度=content
- IE盒模型 box-sizing: border-box; 盒子宽度=content+padding+border
2.css特性：继承性，层叠性，优先级
css优先级：!important>行内样式>id>类/伪类/属性>标签>全局选择器
3.隐藏元素的方法：
- display：none；不占据空间位置
- opacity：0；元素不可见，占据空间
- visibility：hidden；占据空间
- position：absolute；移除可见区
- clip-path剪切掉
4.单位
- px：像素 绝对单位长度
- em：相对于元素的字体大小 （font-size）,pixels/16=em
- rem：相对于根元素的字体大小（相对于浏览器的基准字体大小）1rem=10px
- vw：相对于视口宽度的1%
- vh：相对于视口高度的1%
5. 重绘：是在一个元素的外观被改变所触发的浏览器行为，浏览器会重新把元素外观绘制出来的过程，叫做重绘。
重排：当DOM树的某一部分更新并且节点的尺寸或位置发生了变化，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。
会引起重排的情况：
- 添加或删除可见的DOM元素
- 元素的位置发生变化
- 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
- 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代
- 页面初始化渲染的时候
- 浏览器的窗口尺寸变化
避免重排的方法：
- 不使用table布局
- 更改样式时最好更改类名，而不是直接修改样式
- 可以把需要更改的元素先脱离文档流，再进行操作（absolute，fixed）
- 避免在大量元素上使用:hover
- 给动画的HTML元件使用fixed或absolute的position，那么修改他们的css是不会重排
- 可以使用display:none或者visibility:hidden进行控制，减少重排和重绘的次数
6.水平垂直居中
水平居中
- 行内元素：text-align:center
- 块级元素：margin:0 auto
水平垂直居中
1.定位+margin
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
margin:auto;2.定位+transform
position:absolute;
top:50%;
bottom:50%;
right:50%;
left:50%;
transform:translate(-50%,-50%)3.flex布局
display:flex;
justify-content:center
align-items:center4.grid布局
.container {
display: grid;
align-items: center;
justify-items: center;
}5. table布局
6.行内垂直居中：height和line-height一致。
7.预处理器
预处理语言增加了变量，函数，混入等强大的功能SASS,LESS
- 嵌套：允许在样式规则中嵌套其他样式规则，反映层级与约束关系。
- 变量和计算：引入变量，可用于存储颜色、尺寸等信息，同时支持数学运算，减少代码重复。
- Extend和Mixin：代码片段的复用，Extend用于共享样式规则，Mixin用于在样式表中进行样式复用并可进行传参操作。
- 循环：支持在样式表中使用循环结构，适用于生成复杂但有规律的样式。
- Import：模块化，允许在样式表中导入其他样式文件，有助于提高可维护性和代码复用。
8.清除浮动
- 在浮动元素后面增加一个元素，设置clear:both
- 父元素设置伪元素clear:both
- 父元素设置overflow:hidden 原理：会让父元素形成一个BFC（块级上下文）
9.设置0.5px的线
- transform:scaleY(0.5)
- height:0.5px
- 线性渐变：background:linear-gradient(0deg,#fff,#000)
- box-shadow
10. float和position区别
- 层级不同：float低于position
- 场景不同：float用于图片周围浮动文字，信息流；position固定位置，如导航条
11.画三角形
width:0
height:0
border:10px solid
border-color:white white red whiteHTML5
1.语义化的理解：在写HTML页面结构时所用的标签有意义，例如head，main，footer。
怎么判断页面是否语义化了？把css去掉，如果能够清晰的看出页面结构，显示内容较为正常。
语义化的意义：
- 让HTML结构更加清晰明了。
- 方便团队协作，利于开发。
- 有利于爬虫和SEO
- 能够让浏览器更好的去解析代码。
- 更用户带来更好的体验。
2.H5增加了哪些新特性？
- 语义化标签
- 音频视频
- 画布canvas
- 数据存储localstorage，sessionstorage
- 表单控件 email url search
- 拖拽释放API
CSS3
1.css3新增哪些新特性？
- 新增选择器，包括属性选择器，后代、兄弟选择器，伪类选择器等。
- 新增了媒体查询
- 文字阴影text-shadow
- 边框属性 border-radius border-img outline
- 盒子模型 box-sizing
- 渐变属性
- 过渡 transition
- 自定义动画
- 背景的属性background-origin，background-size，background-clip
- 2D和3D转换
2.rem是如何做到适配的
rem是相对于根元素（html）的font-size属性来计算大小，利用媒体查询设置不同尺寸下的根元素的字体大小，从而达到适配。
3.解决过哪些移动端兼容问题
- 当设置样式为overflow:scroll/auto时，IOS的滑动会有卡顿，此时可以设置 -webkit-overflow-scrolling:touch
- 在安卓环境下placeholder文字设置行号时会偏上，解决方法为input有placeholder属性的时候不要设置行高
- 移动端字体小于12px时异常显示：应该先把整体放大1倍，再用transform进行缩小。
- IOS下input按钮设置了disabled属性为true时显示异常，input[type=button]{opacity:1}
- 安卓手机下取消语音输入按钮 input::-webkit-input-speech-button{display:none}
