前端面试题--CSS系列（一）

1.CSS预处理器有哪些类型，有什么区别

CSS是一门标记性语言，不利于复用，很难写出易于阅读且易于维护的代码。
于是就出现了CSS预处理器，增加了变量，函数，混入等功能，让CSS更易于维护。
类型：

• sass：最早且最成熟的CSS预处理器，后缀名为.sass,scss.严格按照缩进形式省去大括号和分号。
• less：基于sass,书写格式更像css,易上手，易兼容，但编程功能不够。
• stylus：基于node.js社区，主要用于node项目进行预处理，stylus是新型语言，后缀名为.styl。

区别：

• 变量，less使用@开头，中间使用：隔开，sass使用$开头，中间使用：隔开，stylus开头前两种都可，但中间必须使用“=”隔开。

//less
@red: #c00;strong {color: @red;
}//sass
$red: #c00
strong{color: $red
}//stylus
red = #c00
strongcolor: red

• 作用域：sass在全局作用域，最好不要重名，less和stylus会先找局部作用域，没有的话会一层一层网上找。
• 嵌套：三者都一致，引用父级选择器使用&，但sass和stylus不使用大括号
• 混入：将一部分样式抽出，作为一个单独定义模块，可以供多个选择器复用sass申明需要@mixin，stylus可以不要符号，但默认要“=”。
• 模块化：将代码分成一个个模块。

2.盒模型是什么，有哪两种类型

盒模型：在对一个文档进行布局时，浏览器引擎会根据css的基础盒模型标准，将每一个元素变为一个矩形盒子，盒子由四部分组成：content，padding，border，margin。

• 标准盒模型：width+ height代表的是content
• IE盒模型： width + height代表的是content + padding + border

可以通过box-sizing来改变盒模型，content-box为标准盒模型，border-box为IE盒模型

3.css选择器有哪些，优先级是怎样的，哪些属性可以继承

CSS选择器：

• id选择器 （#myid)
• 类选择器 (.class)
• 标签选择器(div,p)
• 后代选择器(h1 p)
• 子选择器(ul > li)
• 兄弟选择器(li~a)
• 相邻兄弟选择器(li+a)
• 属性选择器(a[rel = “external”])
• 伪类选择器(a:hover)
• 伪元素选择器(::before, ::after)
• 通配符选择器(*)

优先级：

内联 > ID选择器 > 类选择器 > 标签选择器
（1）内联样式选择器x,0,0,0（行内样式）
（2）ID选择器0,x,0,0
（3）class选择器/属性选择器/伪类选择器 0,0,x,0
（4）元素和伪元素选择器0,0,0,x

继承属性：
在css中，继承是指的是给父元素设置一些属性，后代元素会自动拥有这些属性

关于继承属性，可以分成：

字体系列属性

font:组合字体
font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
font-variant:偏大或偏小的字体 文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：增加或减少单词间的空白
letter-spacing：增加或减少字符间的空白
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色

元素可见性

visibility

表格布局属性

caption-side：定位表格标题位置
border-collapse：合并表格边框
border-spacing：设置相邻单元格的边框间的距离
empty-cells：单元格的边框的出现与消失
table-layout：表格的宽度由什么决定

列表属性

list-style-type：文字前面的小点点样式
list-style-position：小点点位置
list-style：以上的属性可通过这属性集合

引用

quotes：设置嵌套引用的引号类型

光标属性

cursor：箭头可以变成需要的形状

继承中比较特殊的几点：

a 标签的字体颜色不能被继承

h1-h6标签字体的大下也是不能被继承的

无继承的属性
display

文本属性：vertical-align、text-decoration

盒子模型的属性：宽度、高度、内外边距、边框等

背景属性：背景图片、颜色、位置等

定位属性：浮动、清除浮动、定位position等

生成内容属性：content、counter-reset、counter-increment

轮廓样式属性：outline-style、outline-width、outline-color、outline

页面样式属性：size、page-break-before、page-break-after

4. 说说em/px/rem/vh/vw的区别

• px:像素，即显示在页面上的一个小点，每个像素都是大小相同的, px大小与其他元素无关。绝对长度单位，页面按照精确像素进行展示。
• em:相对长度单位。相当于当前对象的文本字体尺寸，默认字体尺寸1em = 16px,em值不固定，em会继承父节点的字体大小，使用级联方式计算尺寸。
• rem:相对长度单位，相对的是html根元素font-size的值。rem集相对大小与绝对大小优点于一身。
• vh,vw:vh表示窗口高度，vw表示窗口宽度，主要用于页面视图布局

5.元素实现水平垂直居中的方法有哪些，如果元素不定宽高呢？

• 使用绝对定位（absolute）：让left、right、top、bottom都为0，然后让margin：auto即可实现水平垂直居中。
• 子绝父相：水平居中left:50%,margin-left:(盒子宽度一半），垂直居中：top:50%,margin-top:(盒子高度一半）‘
• flex布局：给父盒子一个弹性布局，并在父容器中写入justify-content:center,盒align-items:center表示水平居中盒垂直居中，即可。

6.说说flex,以及适用的场景

flexible为弹性布局，容器默认有两条轴，主轴与交叉轴，通过flex-direction来决定主轴方向。每根轴都有起点和终点。
使用场景：用于实现水平方向上的元素水平垂直居中，可使用于二栏、三栏自适应布局中。