本篇文章主要是總結幾個前端面試常見的CSS面試題，希望對大家的面試有所啟示。
一、CSS實現水平居中和垂直居中的方法有哪幾種？
1、水平居中
.son {
display:inline-block;
text-align:center;
}
// 父布局的css 需要設置 overflow:hidden
.father{
width:100%;
height:200px;
overflow:hidden;//不可缺少否則margin-top不生效
}
.son{
width: 100px;
height: 100px;
margin:50px auto ;
}
display:table-cell; /*IE8以上及Chrome、Firefox*/
vertical-align:middle; /*IE8以上及Chrome、Firefox*/
.father{
display:flex;
justity-content:center;
align-items:center;
}
.father{
display:flex;
flex-direction:column;//改變主軸為cross axis
justity-content:center;
}
.father{
position:relative;
width:60%;
height:400px;
}
.son{
width:100px;
height:160px;
position:absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-80px;
}
2、垂直居中
.son {
height:60px;
line-height:60px; // line-height需要和height保持一緻
display:inline-height;
}
二、absolute與fixed共同點與不同點
absoluate和fixed都是position屬性的值類型。position規定元素的定位類型，取值類型如下：
fixed和absoluate相同點：
fixed和absoluate不同點：
三、清除浮動的方法
CSS中經常會出現使用了float浮動元素而導緻頁面中某些元素不能正确地顯示。那麼如何清除float的浮動帶來的副作用呢？
1、在父元素中添加子元素，并為添加的子元素中添加clear，清除浮動
clear的取值如下：
<style>
.clearfix {
clear: both;
}
</style>
<div class="box1">
<div class="content1">content1</div>
<div class="clearfix"></div>
</div>
<div class="box2">
<div class="content2">content2</div>
</div>
2、僞元素清除clearfix
給父級元素添加了一個:after僞元素，通過清除僞元素的浮動，達到撐起父元素高度的目的。
.clearfix:after{
content:"";
display:block;
visibility:hidden;
clear:both;
}
3、使用BFC清除
通過給父元素設置：overflow:auto或者overflow:hidden。讓父元素高度被撐起來。
<style>
.wrap{
width:500px;
margin:0 auto;
overflow:hidden;
}
.float{
width:200px;
height:200px;
float:left;
}
.nofloat{
width:300px;
height:150px;
overflow:hidden;
}
</style>
<div class="wrap">
<div class="float">浮動</div>
<div class="nofloat">清除浮動</div>
</div>
四、什麼是BFC?
BFC的官方定義是：BFC（Block Formatting Context）塊格式化上下文， 是Web頁面的可視CSS渲染的一部分，是塊盒子的布局過程發生的區域，也是浮動元素與其他元素交互的區域。簡單點來說就是幫我們幫BFC内的元素和BFC外的元素進行隔離，使其不會影響到外部元素。
BFC類型：
五、CSS和sass、LESS有什麼區别？
CSS（層疊樣式表）是一門非程序式語言，SASS是使用Ruby 編寫，是一種對css的一種擴展提升，增加了規則、變量、混入、選擇器、繼承等等特性。可以理解為用js的方式去書寫，然後編譯成css。LESS受Sass的影響較大，但又使用CSS的語法，讓大部分開發者和設計師更容易上手。簡單點說就是less、sass是屬于編譯型CSS，需要通過編譯最終生成CSS。區别如下：
六、rem 和 em 的區别?
em是一種相對長度單位，相對于自身元素的字号大小，如果沒有設置就參照父容器的字号大小或浏覽器默認字号大小。rem是CSS3的新标準也是一種相對長度單位，其相對于html根标簽的字号大小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html{
font-size: 20px;
}
#box{
width: 10rem;
height: 10rem;
background: red;
font-size:12px;
}
.remFont {
font-size:1rem;
}
.emFont {
font-size:1em;
}
</style>
</head>
<body>
<div id="box">
<div class="remFont">字體大小20px</div>
<div class="emFont">字體大小12px</div>
</div>
</body>
</html>
更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
