CSS面試常見問題

篇文章主要是總結(jié)幾個(gè)前端面試常見的CSS面試題，希望對(duì)大家的面試有所啟示。

一、CSS實(shí)現(xiàn)水平居中和垂直居中的方法有哪幾種？

1、水平居中

行內(nèi)元素可設(shè)置:text-align:center

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

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

// 父布局的css 需要設(shè)置 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;
}

脫離文檔流，操作對(duì)象寬度確定

.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 【同上】
脫離文檔流，操作對(duì)象寬度確定【同上】

二、absolute與fixed共同點(diǎn)與不同點(diǎn)

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

absolute：相對(duì)父級(jí)的絕對(duì)定位，它的定位坐標(biāo)是針對(duì)相對(duì)于static定位以外的第一個(gè)父元素進(jìn)行定位。
fixed：相對(duì)整個(gè)文檔的絕對(duì)定位，相對(duì)于瀏覽器窗口進(jìn)行定位，用法基本與absolute一致。　　
relative：相對(duì)定位
static：默認(rèn)值，無定位類型，元素定位表現(xiàn)為在跨越特定閾值前為相對(duì)定位，之后為固定定位。
sticky：粘性定位
inherit：繼承父類定位類型。

fixed和absoluate相同點(diǎn)：

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

fixed和absoluate不同點(diǎn)：

相對(duì)定位的父級(jí)不同，fixed相對(duì)根節(jié)點(diǎn)，absoluate選擇對(duì)于static定位以外的第一個(gè)父元素進(jìn)行定位。
瀏覽器的滾動(dòng)條不會(huì)影響fixed的定位位置，absoluate會(huì)被影響【由于第一個(gè)原因?qū)е碌摹?/li>

三、清除浮動(dòng)的方法

CSS中經(jīng)常會(huì)出現(xiàn)使用了float浮動(dòng)元素而導(dǎo)致頁面中某些元素不能正確地顯示。那么如何清除float的浮動(dòng)帶來的副作用呢？

1、在父元素中添加子元素，并為添加的子元素中添加clear，清除浮動(dòng)

clear的取值如下：

none：不清除
left：清除左浮動(dòng)
right：清除右浮動(dòng)
both：清除父布局內(nèi)所有元素的浮動(dòng)

<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

給父級(jí)元素添加了一個(gè):after偽元素，通過清除偽元素的浮動(dòng)，達(dá)到撐起父元素高度的目的。

.clearfix:after{
    content:"";
    display:block;
    visibility:hidden;
    clear:both;
    }

3、使用BFC清除

通過給父元素設(shè)置：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">浮動(dòng)</div>
   <div class="nofloat">清除浮動(dòng)</div>
</div>

四、什么是BFC?

BFC的官方定義是：BFC（Block Formatting Context）塊格式化上下文，是Web頁面的可視CSS渲染的一部分，是塊盒子的布局過程發(fā)生的區(qū)域，也是浮動(dòng)元素與其他元素交互的區(qū)域。簡(jiǎn)單點(diǎn)來說就是幫我們幫BFC內(nèi)的元素和BFC外的元素進(jìn)行隔離，使其不會(huì)影響到外部元素。

BFC類型：

浮動(dòng)元素（float不為none）
根元素（html）
絕對(duì)定位元素（ position 為 absolute 或 fixed）
內(nèi)聯(lián)塊 (元素具有 display: inline-block)
表格單元格 (元素具有 display: table-cell，HTML表格單元格默認(rèn)屬性)
表格標(biāo)題 (元素具有 display: table-caption, HTML表格標(biāo)題默認(rèn)屬性)
flex布局
overflow指定非visible的值

五、CSS和SASS、LESS有什么區(qū)別？

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

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

六、rem 和 em 的區(qū)別?

em是一種相對(duì)長(zhǎng)度單位，相對(duì)于自身元素的字號(hào)大小，如果沒有設(shè)置就參照父容器的字號(hào)大小或?yàn)g覽器默認(rèn)字號(hào)大小。rem是CSS3的新標(biāo)準(zhǔn)也是一種相對(duì)長(zhǎng)度單位，其相對(duì)于HTML根標(biāo)簽的字號(hào)大小。

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

在HTML中，如果是數(shù)據(jù)集(像excel那種)的布局，常用<table>標(biāo)簽，如果是內(nèi)容塊(網(wǎng)站板塊)的布局，則常用<div>標(biāo)簽。

5.1 表格布局

表格由<table>標(biāo)簽來定義。每個(gè)表格均有若干行<tr>標(biāo)簽和列<td>標(biāo)簽組成。<td>數(shù)據(jù)單元格的內(nèi)容可以包含文本、圖片、水平線、表格等內(nèi)容。表格頭由<th>標(biāo)簽生成。<table>標(biāo)簽常用的屬性是border，用來指定邊框?qū)挾取?lt;th>和<td>的屬性rowspan，可指定跨行數(shù)。

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>第5個(gè)HTML-表格</title>
</head>
<body>
<table border="1">
    <tr>
        <th>序號(hào)</th>
        <th>產(chǎn)品名稱</th>
        <th>編號(hào)</th>
        <th>規(guī)格</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>

輸出結(jié)果

5.2 塊布局

網(wǎng)站分塊布局，常用<div>標(biāo)簽進(jìn)行定義。常見網(wǎng)站布局為上中下，上放導(dǎo)航欄，中間放內(nèi)容，底部放版權(quán)和友情鏈接，而它們的分割便是由<div>標(biāo)簽負(fù)責(zé)的。當(dāng)然，用<div>布局，需要CSS的支持才行。同表格<td>標(biāo)簽一樣，<div>標(biāo)簽中，也是可以嵌入<p>、<hr>等標(biāo)簽的。

<div style="color:blue">
    <h3>老陳說編程</h3>
    <p>一個(gè)當(dāng)了10年技術(shù)總監(jiān)的老家伙，分享多年的編程經(jīng)驗(yàn)。<br/>
        想學(xué)編程的朋友，可關(guān)注：老陳說編程。<br/>
        分享Python，前端(小程序)、App和嵌入式方面的干貨。關(guān)注我，沒錯(cuò)的。</p>
</div>

輸出結(jié)果

好了，有關(guān)HTML布局的內(nèi)容，老陳先講這么多，如果覺得對(duì)你有所幫助，希望老鐵能轉(zhuǎn)發(fā)點(diǎn)贊，讓更多的人看到這篇文章。你的轉(zhuǎn)發(fā)和點(diǎn)贊，就是對(duì)老陳繼續(xù)創(chuàng)作和分享最大的鼓勵(lì)。

一個(gè)當(dāng)了10年技術(shù)總監(jiān)的老家伙，分享多年的編程經(jīng)驗(yàn)。想學(xué)編程的朋友，可關(guān)注：老陳說編程。分享Python，前端(小程序)、App和嵌入式方面的干貨。關(guān)注我，沒錯(cuò)的。

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

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

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

表格

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

想要消除單元格間距與內(nèi)容與單元格內(nèi)邊框的間距設(shè)置屬性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:單元格內(nèi)容的水平對(duì)齊方式,屬性值:1)left2左側(cè))right右側(cè)3)center中間

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

rowspan與colspan:將單元格進(jìn)行行與行或者列與列的合并

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

<!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"><!--單元格內(nèi)容居中顯示-->
            <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>

顯示效果

表格中設(shè)置的屬性雖然會(huì)繼承,但是子標(biāo)簽單獨(dú)設(shè)置了屬性,就會(huì)覆蓋父標(biāo)簽的屬性;比如tr

設(shè)置align="center",此tr中的子標(biāo)簽td單獨(dú)設(shè)置了align="left",最終效果是此td內(nèi)容居左顯示

在線咨詢

上一篇：Vue 初級(jí)入門代碼示例
下一篇：14年33款蘋果iPhone產(chǎn)品最全盤點(diǎn)

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

CSS面試常見問題

5.1 表格布局

5.2 塊布局

您的項(xiàng)目需求