一、设置元素垂直水平都居中的方法有哪些？
针对行内元素，利用text-align和line-height：
{ text-align : center; line-height: "父元素height"}
针对块级元素：
（1）利用flex布局：
{display : flex; justify-content: center; align-items: center;}
（2）利用absolute定位；
（3）设置四周的margin或padding。
二、什么是BFC容器？其有何特性？如何生成BFC容器？
BFC即块级格式化上下文(BlockFormattingContext)，可看做页面上一个相对独立的布局容器。
其特性有：
（1）布局环境独立。内部元素不受外部元素影响，也不会影响外部元素布局；
（2）内部的块盒与行盒都会沿着其父元素的边框垂直排列布局；
（3）内部元素间垂直距离由其margin决定，两个内部元素垂直方向上相邻的margin会发生重叠；
（4）计算BFC的高度时，内部的浮动元素也需算在内；
（5）BFC区域不会与浮动元素重叠（可利用此特性来清除浮动）。
生成方式有：
（1） 根标签<html>本身为BFC容器；
（2）float属性不为none的元素；
（3）position属性为absolute或fixed；
（4）display属性为inline-block、flex、inline-flex的元素；
（5）overflow不为visible的块元素。
三、CSS选择器的权重值怎么排列？
整体权重顺序为：!important > 内联样式 > 内部样式 > 外部样式 > 浏览器样式
比较方法有：1. 权重值比较法；2. 四零对比法。
四、标准盒模型和怪异盒模型有何区别?
浏览器默认使用标准盒模型，标准盒子会被设置的padding撑开，而怪异盒子的大小不会。
标准盒模型 box-sizing:content-box：
"盒子总宽度"= margin-left + margin-right + border-right + border-left
+ padding-right + padding-left + width("内容区宽度")
//高度同理
怪异盒模型 box-sizing:border-box：
"盒子总宽度"= margin-left + margin-right + width("内容区宽度")
= margin-left + margin-right+ border-right + border-left + padding-right + padding-left
//高度同理
五、什么是标准文档流、破坏文档流和脱离文档流？
标准文档流：各元素在文档中按照块盒行盒，从上到下、从左到右正常排序的文档流。
破坏文档流：先让元素强制按照指定的方向进行移动，到达指定的位置，但元素仍占有其在标准文档流中原位置。可以通过设置负值margin的方法来实现。
脱离文档流：使元素从标准文档流中脱离出来，按照自己的规范进行排列与移动。脱离文档流的元素不再占有标准文档流中的位置。可以通过设置浮动、设置绝对定位或固定定位的方法来实现。
六、如何解决浮动带来的高度塌陷问题？
高度塌陷问题会导致浮动元素的父元素高度无法被子元素撑开，可以通过如下方法来解决：
（1）在父元素上设置伪元素来清除浮动：
::after {
content: "";
display: block;
clear: both;
}
（2） 为父元素设置overflow: hidden属性；
（3） 为父元素设置display: inline-block属性；
（4） 在浮动元素后添加带有clear属性的<br />：
<br clear="all">
<!--兄弟块元素无法与浮动元素并排显示-->
（5） 为兄弟元素添加clear属性：
"兄弟元素" {
clear: both;
}
七、src属性和href属性有何差别？
href表示的是超文本的引用，一般用在<link>、<a>中，其是在建立当前元素与资源之间的联系。浏览器在处理href资源时，会同时继续处理DOM中的其他内容（可视为异步加载）。
src表示的是外部资源的引用，一般用在<img>、<script>和<iframe>中，其是在用引用到的资源替换当前元素。浏览器在处理src资源时，会等待src资源处理完毕后再处理其他DOM内容（可视为同步加载）。
八、如何解决margin重叠问题？
margin重叠指属于同一个BFC容器中的两个父子元素或兄弟元素的垂直方向相邻的margin会发生重叠的现象。
解决方案有：
（1）尽量用padding代替margin；
（2）将双方元素的margin值相加后单独加给其中一个元素；
（3）对于父子元素的重叠现象，可以为父元素设置透明border；
（4）对于兄弟元素的重叠现象，可以为下面的一个元素设置float。
九、通过rgba()设置透明度与opacity设置有何区别？
rgba()只用于设置元素颜色上的透明度，其设置的透明不会被子元素继承。
opacity用于设置元素整体的不透明度，其设置的透明会被子元素继承。
两者在IE8及以下浏览器中均存在兼容问题。
前端面试指南系列传送门：
