前端面试宝典五（css篇）

1、盒模型

标准模型由四部分组成：

内容区域: 可以放置元素的区域如文本,图像等，一般设置宽高指的是这个内容的宽高
内边距的区域：内容与边框之间的距离
边框区域: 边框
外边框区域：由外边框限制，用空白区域扩展边框区域，开分开相邻的元素
模型区分：
标准表型指的是设置box-sizing为content-box的盒子模型，一般width,height指的是content的宽高。IE盒模型指的是box-sizing为border-box的盒子。宽高的计算是content+padding+border

2、css选择符

id选择器(#myid)
类选择器(.myclassName)
标签选择器(div,h1,p)
子代选择器(ul>li)
后代选择器(li a)
通配符选择器(*)
属性选择器(a[rel="external"])
伪类选择器(a:hover,li:nth-child)

3、css优先级如何计算

优先级就近原则，同权重情况下样式定义最近这位准
载入样式以最后载入的定位为准
优先级为：

同权重： 内联样式(标签内部)> 嵌入样式表(当前文件中)>外部样式(外部文件中)
!important >id >class >tag
!important 比内联优先级高

4、display有哪些值及作用

block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示
none 元素不显示，并从文档流中移除
inline 行内元素，默认宽度为内容宽度，不可设置宽高，同行显示
inline-block 默认宽度为内容宽度，可以设置宽高，同行显示
list-item 像块类型元素一样，可以设置宽高，同行显示
table 此元素会作为会计表格来显示
inherit 规定应该从父元素继承display属性的值

5、为什么要清除浮动，清除浮动的方式

清浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使页面后面的布局不能正常显示

父级div定义height
在浮动元素后面添加class为clear的空div元素，给这个div设置样式.clear{clear:both}
给父容器添加overflow:hidden或者auto样式
给父容器添加clearfix的class，用伪类clearfix:after；来这个样式。清除浮动

6、伪类，伪元素

伪类的受体是文档树中已有的元素，而伪元素则创建了一个DOM外的元素
伪类用于添加元素的特殊效果，而伪元素则是添加元素的内容
伪类使用的一个冒号，为元素使用两个冒号
伪类更常用一些简单的动画或者交互的样式，例如滑入滑出，而为伪元素更常用语字体图标，清除浮动等

7、实现水平居中

margin法
需要满足三个条件
元素定宽
元素为块级元素或行内元素设置display:block
元素的margin:left或者margin-right都必须设置auto
三个条件缺一不可
.md-main{
margin: 0 auto
}
定位法
元素定宽
元素绝对定位，并设置left:50%;
+元素负做边距margin-left为宽度的一半
.md-wrap{
position:relative;
}
.md-main{
position:absolute;
left:50%;
margin-left:-50px
}
有些时候元素宽度不是固定的，依然可以使用定位法实现水平居中用到css3中的transform属性中的translate

.md-warp{
position: relative;
}
// 注意此时md-main不设置width为100px
.md-main{
position: absolute;
left: 50%;
-webkit-transform: translate(-50%,0);
-ms-transform: translate(-50%,0);
-o-transform: translate(-50%,0);
transform: translate(-50%,0);
}
文字水平居中
直接使用text-align:center即可

垂直居中

定位法
和水平居中类似，只是把left:50%换成top:50%,副边距和transform属性进行对应更改即可

优点：能在各个浏览器下工作，结构简单明了，不需要增加额外的标签

.md-warp{
position: relative;
}
.md-main{
position: absolute;
/* 核心 */
top: 50%;
margin-top: -50px;
}
不确定高度的时候

.md-warp{
position: relative;
}
.md-main{
position: absolute;
top: 50%;
// 注意此时md-main不设置height为100px
-webkit-transform: translate(0,-50%);
-ms-transform: translate(0,-50%);
-o-transform: translate(0,-50%);
transform: translate(0,-50%);
}
单行文本垂直居中
需要满足两个条件：

元素内容是单行，并且其高度是固定不变的
将其line-height设置成height的值一样
div{
width: 400px;
height: 300px;
border: 1px solid #000;
}
span{
line-height: 300px;
}
视窗单位的解决办法

让元素在视窗中居中，使用vh实现

.md-warp{
position: relative;
}
.md-main{
position: absolute;
margin: 50vh auto 0;
transform: translateY(-50%);
}
Flexbox的解决方案

完成这项工作只需要两个样式，在需要水平垂直居中的父元素中设置display:flex和在水平存执居中的元素设置margin:auto

.md-wrap{
display:flex
}
.md-main{
display:auto
}
Flexbox的实现文本的水平垂直居中同样很简单

.md-warp{
display:flex;
}
.md-main{
display: flex;
align-items: center;
justify-content: center;
margin: auto;
}
绝对垂直居中

.md-wrap{
position: relative;
}
.md-main{
position:absolute;
top:0'
right:0
bottom:0;
left:0;
margin:auto;
}
最好不要使用绝对定位，因为他对整体的布局影响相当的大

8、css的预处理器

CSS 层叠样式表是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等，换句话说就是不具备任何语法支持，它主要缺陷如下：

语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；
没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护；
这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题，前端开发人员会使用一种称之为 【CSS 预处理器】 的工具，提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大提高了前端在样式上的开发效率。

什么是 CSS 预处理器
CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行 CSS 的编码工作。转化成通俗易懂的话来说就是“用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用”。

常用的 CSS 预处理器有哪些
SASS：基于 Ruby，通过服务端处理，功能强大。解析效率高。需要学习 Ruby 语言，上手难度高于 LESS。
LESS：基于 NodeJS，通过客户端处理，使用简单。功能比 SASS 简单，解析效率也低于 SASS

9、flex（弹性盒布局模型）以及使用场景

 一个用于页面布局的全新css3功能，flexbox可以把列表放在同一个方向(从上到下排列，从左到右)，并且列表能延伸到占用可用的空间，较为复杂的布局还可以嵌套一个伸缩容器(flex container)来实现。采用flex布局的元素，成为flex容器。常规布局是基于块和内联流方向，而flex布局是基于flex布局flex-flow流可以很方便的用来做居中，能对不同屏幕大小自适应，在布局上有了比以前更加灵活的空间