css頁面布局面試題-tft每日頭條

本篇文章主要是總結幾個前端面試常見的CSS面試題，希望對大家的面試有所啟示。

css頁面布局面試題（CSS面試常見問題）1

一、CSS實現水平居中和垂直居中的方法有哪幾種？

1、水平居中

行内元素可設置:text-align:center

.son { display:inline-block; text-align:center; }

margin:0 auto;這種方式的寬度需要固定已知

// 父布局的css 需要設置 overflow:hidden .father{ width:100%; height:200px; overflow:hidden;//不可缺少否則margin-top不生效 } .son{ width: 100px; height: 100px; margin:50px auto ; }

table-cell

display:table-cell; /*IE8以上及Chrome、Firefox*/ vertical-align:middle; /*IE8以上及Chrome、Firefox*/

彈性布局flex

.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、垂直居中

line-height與height等高

.son { height:60px; line-height:60px; // line-height需要和height保持一緻 display:inline-height; }

flex 【同上】
table-cell 【同上】
脫離文檔流，操作對象寬度确定【同上】

二、absolute與fixed共同點與不同點

absoluate和fixed都是position屬性的值類型。position規定元素的定位類型，取值類型如下：

absolute：相對父級的絕對定位，它的定位坐标是針對相對于static定位以外的第一個父元素進行定位。
fixed：相對整個文檔的絕對定位，相對于浏覽器窗口進行定位，用法基本與absolute一緻。　　
relative：相對定位
static：默認值，無定位類型，元素定位表現為在跨越特定阈值前為相對定位，之後為固定定位。
sticky：粘性定位
inherit：繼承父類定位類型。

fixed和absoluate相同點：

脫離文檔流
覆蓋非定位元素，上層顯示

fixed和absoluate不同點：

相對定位的父級不同，fixed相對根節點，absoluate選擇對于static定位以外的第一個父元素進行定位。
浏覽器的滾動條不會影響fixed的定位位置，absoluate會被影響【由于第一個原因導緻的】

三、清除浮動的方法

CSS中經常會出現使用了float浮動元素而導緻頁面中某些元素不能正确地顯示。那麼如何清除float的浮動帶來的副作用呢？

1、在父元素中添加子元素，并為添加的子元素中添加clear，清除浮動

clear的取值如下：

none：不清除
left：清除左浮動
right：清除右浮動
both：清除父布局内所有元素的浮動

<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類型：

浮動元素（float不為none）
根元素（HTML）
絕對定位元素（ position 為 absolute 或 fixed）
内聯塊 (元素具有 display: inline-block)
表格單元格 (元素具有 display: table-cell，HTML表格單元格默認屬性)
表格标題 (元素具有 display: table-caption, HTML表格标題默認屬性)
flex布局
overflow指定非visible的值

五、CSS和sass、LESS有什麼區别？

CSS（層疊樣式表）是一門非程序式語言，SASS是使用Ruby 編寫，是一種對css的一種擴展提升，增加了規則、變量、混入、選擇器、繼承等等特性。可以理解為用js的方式去書寫，然後編譯成css。LESS受Sass的影響較大，但又使用CSS的語法，讓大部分開發者和設計師更容易上手。簡單點說就是less、sass是屬于編譯型CSS，需要通過編譯最終生成CSS。區别如下：

sass和less是編譯型css,需要編譯生成CSS
sass、less有更為靈活的變量、函數方式實現配置化樣式
sass、less可以嵌套編寫，隔離同名樣式影響，減少代碼量

六、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>