全网前端面试题汇总（1）CSS
1. css3新特性
（1）border-radius（圆角），box-shadow（阴影），text-shadow（文字阴影特效）
（2）background:linear-gradient（线性渐变），radial-gradient（径向渐变），background多背景、size、orgin等
（3）[transform](#go)
（4）rgba，opacity
（5）@media
（6）更多选择器，如nth-child等子元素选择器，:enabled、:disabled（表单控件的禁用状态），:checked（选择框被选中）
（7）@keyframes animation动画
（8）过渡效果transition: property duration timing-function delay;
（9）盒模型、弹性布局；
（10）伪元素选择器由 : 改为 ::
2. calc、support、media
@support用于判断浏览器是否支持某个属性，（支持and、or、not运算）
@support(display:flex){
div{
display:flex;
}
}
@media针对不同媒体定义不同样式，（支持and、or、not运算）
@media screen and (max-width: 300px) {
body {
background-color:#F5F5F5;
}
}
calc用于计算宽高，（支持+-*/）
.box{
width:calc(100% - 20px);
}
3. css水平、垂直居中的写法
水平居中：
行内元素：text-align:center;
块级元素：display:flex;justify-content:center;
margin:0 auto;
position:absolute;left:50%;transform:translateX(-50%);
在屏幕中居中margin-left:50vh;transform:translateX(-50%);
垂直居中：
diaplay:table;vertical-align:middle;
ling-height
display:flex;align-item:center;
position:absoult;top:50%;transform:translateY(-50%);
在屏幕中居中margin-top:50vh;transform:translateY(-50%);
4. px,rpx,em,rem,vw,vh,vmin,vmax
px：相对长度单位，相对于屏幕分辨率而言的；
rpx：解决自适应屏幕尺寸的长度单位，100%宽度为750rpx,若屏幕宽度375px,则1px = 2rpx;
em: 相对长度单位，相对当前节点文本的尺寸而言的，当前文本为font-size:18px;则1em = 18px;
rem: 根em，相对于根节点的文本尺寸而言，html{font-size:30px};则1rem = 30px;
vw: 1vw为1%屏幕宽度（window.innerWidth）；
vh: 1vh为1%屏幕高度（window.innerHeight）；
vmin: 选取vw和vh中最小的那个；
vmax: 选取vw和vh中最大的那个；
translate移动；translate(x,y) translateX() translateY();
scale缩放； scale(x,y) scaleX() scaleY();
rotate旋转； rotate(x,y) rotateX() rotateY();
skew倾斜；skew(x-angle,y-angle) skewX() skewY();
6. 盒模型
content、padding、border、margin
WSC盒子：box-sizing:content-box; width表示到content这一层的宽度；
IE盒子：box-sizing:border-box; width表示到border这一层的宽度；
7. 画三角形
.box{
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #F5222D;
}
8. 清除浮动
(1) clear:both;
(2) 父元素 overflow:hidden/auto/scroll;
overflow:hidden;在一定条件下会形成BFC：
BFC：格式化上下文，形成一个独立的渲染区域；
条件：浮动元素，定位元素（position:absolute/fixed），display:inline-block/table-cell/table-caption;
特性：不存在margin穿透，浮动元素参与高度计算，内部元素不影响外部元素；
9. CSS可继承属性
font字体系列
text文本系列
元素可见性：visibility
光标属性：cursor
生成内容属性：quotes
表格布局属性：table-layout等属性
列表布局属性：list-style等属性
页面样式属性：page、windows等属性
声音样式属性：speak、volume、pitch等属性
10. CSS选择器优先级顺序
（1）!important
（2）行内样式（内联样式）
（3）id选择器
（4）class选择器 > 属性选择器 > 伪类选择器
（5）标签选择器 > 关系选择器 > 伪元素选择器
（6）通配符选择器（*）
11. animation最小周期
animation: name duration timing-function delay iteration-count direction;
duration动画周期，以秒或毫秒为单位，多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms;
12. display有哪些值
（1）none 不显示
（2）block 块级元素，带换行符
（3）inline 内联元素，不带换行符
（4）inline-block 行内块元素，具有两者特性
（5）list-item 列表元素
（6）run-in 根据上下文决定作为内联元素还是块级元素
（7）table 块级表格
（8）inline-table 内联表格
（9）table-XXX 表格相关值
（10）inherit 不定义，从父元素继承
13. 隐藏元素的方式、区别
（1）直接隐藏
display:none; 不占空间，无法点击
visibility:hidden; 占空间，无法点击
（2）透明度隐藏
opactiy:0; 占空间，可以点击
filter:opactiy(0); 占空间，可以点击
background:transparent; 占空间，可以点击
（3）移出屏幕
绝对定位移出 不占空间，无法点击
相对定位移出 占空间，无法点击
margin移出 占空间，无法点击
trandform trandlate移出 占空间，无法点击 scale缩放 不占空间，无法点击
14. SASS、SCSS和LESS
CSS预处理器
用专门的编程语言进行web样式设计，再通过编译器转化为正常的CSS文件；
相对于CSS增加了混入（已存在的样式混入到别的样式中）、嵌套、变量、运算、JS赋值等特性；
SASS、LESS区别
（1）环境：SASS安装需要Ruby环境，LESS是基于JS，需要引入Less.js来处理代码输出css；（LESS环境比较简单）
（2）语法：LESS没有裁剪CSS原有的特性，语法相对简单；
（3）功能：SASS功能相对强大，变量具有作用域，具有进程控制（@if、@else、@importent、@extend、@for、@each、@while），有函数和数据结构的概念；
（4）处理机制：LESS客户端处理，SASS服务端处理；
SCSS
SCSS是SASS的升级版本，完全兼容SASS；
最大区别是语法上，SASS要求严格的缩进，没有{}和分号，嵌套靠缩进表示；
SCSS不要求缩进，有{}和；，嵌套靠{}表示，是CSS3语法的拓展级，即每一个语法正确的CSS3文件也是合法的SCSS文件；
浙公网安备 33010602011771号