CSS面試常見問題

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

一、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一致?！　?/li>
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的一種擴展提升，增加了規則、變量、混入、選擇器、繼承等等特性?？梢岳斫鉃橛胘s的方式去書寫，然后編譯成css。LESS受Sass的影響較大，但又使用CSS的語法，讓大部分開發者和設計師更容易上手。簡單點說就是less、sass是屬于編譯型CSS，需要通過編譯最終生成CSS。區別如下：

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

六、rem 和 em 的區別?

em是一種相對長度單位，相對于自身元素的字號大小，如果沒有設置就參照父容器的字號大小或瀏覽器默認字號大小。rem是CSS3的新標準也是一種相對長度單位，其相對于HTML根標簽的字號大小。

頁布局對網站的外觀特別重要，布得好，留得住用戶，增收流量；布不好，用戶逃之夭夭，還順道罵兩句。大多數Web系統會借用雜志或報紙那樣排版，至于為什么這樣，我不說，你也懂的，就是產品經理吵架吵不過程序員時，常說的：用戶教育成本低。

在HTML中，如果是數據集(像excel那種)的布局，常用<table>標簽，如果是內容塊(網站板塊)的布局，則常用<div>標簽。

5.1 表格布局

表格由<table>標簽來定義。每個表格均有若干行<tr>標簽和列<td>標簽組成。<td>數據單元格的內容可以包含文本、圖片、水平線、表格等內容。表格頭由<th>標簽生成。<table>標簽常用的屬性是border，用來指定邊框寬度。<th>和<td>的屬性rowspan，可指定跨行數。

如果真的不理解表格的意義，那你打開excel，好好操作一翻，橫向合并一下單元格就知道什么是跨行了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>第5個HTML-表格</title>
</head>
<body>
<table border="1">
    <tr>
        <th>序號</th>
        <th>產品名稱</th>
        <th>編號</th>
        <th>規格</th>
    </tr>
    <tr>
        <td>1</td>
        <td>平板電腦</td>
        <td>P1010</td>
        <td>9.7英尺</td>
    </tr>
    <tr>
        <td>2</td>
        <td>筆記本電腦</td>
        <td>C2111</td>
        <td>15英尺</td>
    </tr>
</table>
</body>
</html>

輸出結果

5.2 塊布局

網站分塊布局，常用<div>標簽進行定義。常見網站布局為上中下，上放導航欄，中間放內容，底部放版權和友情鏈接，而它們的分割便是由<div>標簽負責的。當然，用<div>布局，需要CSS的支持才行。同表格<td>標簽一樣，<div>標簽中，也是可以嵌入<p>、<hr>等標簽的。

<div style="color:blue">
    <h3>老陳說編程</h3>
    <p>一個當了10年技術總監的老家伙，分享多年的編程經驗。<br/>
        想學編程的朋友，可關注：老陳說編程。<br/>
        分享Python，前端(小程序)、App和嵌入式方面的干貨。關注我，沒錯的。</p>
</div>

輸出結果

好了，有關HTML布局的內容，老陳先講這么多，如果覺得對你有所幫助，希望老鐵能轉發點贊，讓更多的人看到這篇文章。你的轉發和點贊，就是對老陳繼續創作和分享最大的鼓勵。

一個當了10年技術總監的老家伙，分享多年的編程經驗。想學編程的朋友，可關注：老陳說編程。分享Python，前端(小程序)、App和嵌入式方面的干貨。關注我，沒錯的。

#前端##Web##程序員##CSS##HTML5#

able表格一種早期十分流行的網頁布局方式,現在基本都是div+css的布局方式,表格一般由tr(行)td(列)標簽組成

表格的常用屬性:1)border:表示表格邊框線2)cellpadding:單元格內容和內邊框之間的距離3)cellspacing:表示單元格之間的間距4)bgcolor:背景顏色5)width:寬度6)height:高度等等

表格

沒有設置表格width與height屬性,表格寬高暫時由單元格的內容的寬高決定,其他暫不考慮

想要消除單元格間距與內容與單元格內邊框的間距設置屬性cellspacing,cellpadding為"0"

<!DOCTYPE html>
<html>
<head>
    <title>表格</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
    <table border="1px" cellspacing="0" cellpadding="10">
        <tr>
            <td>一</td>
            <td>二</td>
            <td>三</td>
        </tr>
        <tr>
            <td>C#</td>
            <td>Asp.net</td>
            <td>MVC</td>
        </tr>
        <tr>
            <td>HTML</td>
            <td>JavaScript</td>
            <td>JQuery</td>
        </tr>
    </table>
</body>
</html>

tr常用屬性

align:單元格內容的水平對齊方式,屬性值:1)left2左側)right右側3)center中間

valign:單元格內容的垂直對齊方式,屬性值1)top上邊2)bottom下邊3)middle中間

rowspan與colspan:將單元格進行行與行或者列與列的合并

這些屬性以后都會寫在css樣式表中;制作顯示一個對齊方式與行或列的合并的表格

<!DOCTYPE html>
<html>
<head>
    <title>表格</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
    <table border="1" cellspacing="0" cellpadding="0" width="500" height="300">
        <tr>
            <td colspan="3" align="center">課程表</td><!--合并三行-->
        </tr>
        <tr align="center"><!--單元格內容居中顯示-->
            <td>星期一</td>
            <td>星期二</td>
            <td>星期三</td>
        </tr>
        <tr align="center">
            <td>HTML</td>
            <td rowspan="2">.NET</td><!--合并兩列-->
            <td>JavaScript</td>
        </tr>
        <tr align="center">
            <td>CSS</td>
            <td>JQuery</td>
        </tr>
    </table>
</body>
</html>

顯示效果

表格中設置的屬性雖然會繼承,但是子標簽單獨設置了屬性,就會覆蓋父標簽的屬性;比如tr

設置align="center",此tr中的子標簽td單獨設置了align="left",最終效果是此td內容居左顯示

在線咨詢

上一篇：Vue 初級入門代碼示例
下一篇：14年33款蘋果iPhone產品最全盤點

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS面試常見問題

5.1 表格布局

5.2 塊布局

您的項目需求