CSS面試題有哪些

本篇內(nèi)容主要講解“CSS面試題有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“CSS面試題有哪些”吧!

1、flex常見面試題

Flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。

1 flex-direction:屬性決定主軸的方向；
　　　　　　　　　　 row 水平方向，起點在左端
　　　　　　　　　　 row-reverse  水平方向，起點右端
　　　　　　　　　　 column 縱向方向，起點在上
　　　　　　　　　　 column 縱向方向，起點在下
2 flex-wrap:決定是否換行，默認(rèn)都是排在一行
　　　　　　　no-wrap;(默認(rèn))不換行
　　　　　　　wrap; //換行，第一行在上方
　　　　　　　wrap-reverse;//換行；第二行在上方
3 flex-flow:flex-direction和flex-wrap的縮寫，默認(rèn)為row nowrap
　flex-flow:<flex-direction> ||<flex-wrap>

4 justify-content:定義在item在主軸上的對齊方式
　　　　　　　　　　　flex-start 從左到右
　　　　　　　　　　　flex-end   從右到左
　　　　　　　　　　　center     居中
　　　　　　　　　　  space-between 兩端對齊
　　　　　　　　　　　space-around   每個item兩側(cè)中間相等
5 justify-content:定義在item在主軸上的對齊方式

左中右三等分

給父元素添加display:flex

左右布局，一側(cè)定寬，一側(cè)自適應(yīng)撐滿

<div >
    <div >
        sss
    </div>
    <div >
        ssssss
    </div>
</div>

未知高寬上下左右居中

//css
html,
body {
    height: 100%
}

.main {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center
}

.box {
    width: 300px;
    border: 1px solid red;
}

//html
 <div class="main">
    <div class="box">未知高度上下左右居中</div>
</div>

2、盒模型面試題

什么是盒模型

頁面就是由一個個盒模型堆砌起來的，每個HTML元素都可以叫做盒模型，盒模型由外而內(nèi)包括：邊距（margin）、邊框（border）、填充（padding）、內(nèi)容（content）。它在頁面中所占的實際寬度是margin + border + paddint + content 的寬度相加。

標(biāo)準(zhǔn)盒模型和IE的盒模型的區(qū)別

不同之處就是標(biāo)準(zhǔn)盒模型的內(nèi)容大小就是content的大小，而IE的則是content + padding +border 總的大小

怎么設(shè)置標(biāo)準(zhǔn)盒模型和IE的盒模型

通過設(shè)置 box-sizing:content-box(W3C)/border-box(IE)就可以達(dá)到自由切換的效果

BFC面試題

BFC的基本概念

BFC就是“塊級格式化上下文”的意思，也有譯作“塊級格式化范圍”。它是 W3C CSS 2.1 規(guī)范中的一個概念，它決定了元素如何對其內(nèi)容進(jìn)行定位，以及與其他元素的關(guān)系和相互作用。通俗的講，就是一個特殊的塊，內(nèi)部有自己的布局方式，不受外邊元素的影響。

BFC原理

• BFC內(nèi)部的盒子，會在垂直方向，一個接一個地放置。垂直方向上也會發(fā)生邊距重疊。

• BFC就是頁面上的一個獨立容器，容器里面的子元素不會影響到外面的元素，外邊的也不會影響里邊的。

• BFC的區(qū)域不會與float box重疊。

• 計算BFC的高度時，浮動元素也被計算在內(nèi)。

BFC如何產(chǎn)生

overflow: auto/ hidden;
position: absolute/ fixed;
float: left/ right;
display: inline-block/ table-cell/ table-caption/ flex/ inline-flex

在屬性值為這些的情況下，都會讓所屬的box產(chǎn)生BFC。

CSS布局面試題

有哪些布局

1. float布局的兼容性比較好。解決辦法：給橙色塊添加overflow: hidden（生成了一個BFC）。浮動元素父元素還存在高度塌陷問題，解決方法： 父元素生成一個BFC。

2. absolute布局的有點是簡單直接，兼容性好。缺點，脫離了文檔流。

3. flex布局的優(yōu)點，布局簡單、靈活，移動端友好；缺點是ie8以下不兼容。

4. table布局的優(yōu)點是兼容性好，有時候布局相對簡單。缺點是它是對TABLE標(biāo)簽的不正規(guī)使用，一直以來被大家所詬病。當(dāng)需要內(nèi)容高度不一致時并不適應(yīng)。

5. grid布局優(yōu)點，是第一個基于二維方向的布局模塊。它是第一個基于網(wǎng)格的原生布局系統(tǒng)。缺點是對低版本瀏覽器兼容性不好。

CSS預(yù)處理器

Less（基于Node寫的）、Sass（基于Ruby寫的）

CSS預(yù)處理器功能

1.嵌套 反映層級和約束 2.變量和計算 減少重復(fù)代碼 3.Extend和Mixin 代碼片段復(fù)用 4.循環(huán) 適用于復(fù)雜有規(guī)律的樣式 5.import CSS文件模塊化

CSS新特性

css3的新選擇器

E:nth-child(n) 選擇器匹配其父元素的第n個子元素，不論元素類型，n可以使數(shù)字，關(guān)鍵字，或公式

E:nth-of-type(n) 選擇與之其匹配的父元素的第N個子元素

E:frist-child 相對于父級做參考，“所有”子元素的第一個子元素，并且“位置”要對應(yīng)

E：frist-of-type 相對于父級做參考，“特定類型”（E）的第一個子元素

E：empty 選擇沒有子元素的每個E元素

E:target 選擇當(dāng)前活動的E元素

::selection 選擇被用戶選取的元素部分

屬性選擇器

E[abc*="def"] 選擇adc屬性值中包含子串"def"的所有元素

2、文本

text-shadow:2px 2px 8px #000;參數(shù)1為向右的偏移量，參數(shù)2為向左的偏移量，參數(shù)3為漸變的像素，參數(shù)4為漸變的顏色

text-overflow:規(guī)定當(dāng)文本溢出包含元素時發(fā)生的事情 text-overflow:ellipsis(省略)

text-wrap:規(guī)定文本換行的規(guī)則

word-break 規(guī)定非中日韓文本的換行規(guī)則

word-wrap 對長的不可分割的單詞進(jìn)行分割并換行到下一行

white-space: 規(guī)定如何處理元素中的空白 white-space:nowrap 規(guī)定段落中的文本不進(jìn)行換行

3、邊框

border-raduis:50%邊框的圓角

border-image 邊框圖片

.border-image {

border-image-source:url(images/border.png);

boder-image-slice:27;

border-image-width:10px;

border-iamge-repeat:round; (round平鋪) 平鋪效果不作用于四角，只適應(yīng)與四邊

}

4、背景

rgba

backgrounnd-size:cover/contain，其中background-size：cover，會使“最大”邊進(jìn)行縮放，另一邊同比縮放，鋪滿容器，超出部分會溢出。background-size:contain，會使“最小”邊進(jìn)行縮放，另一邊同比縮放，不一定鋪滿容器，會完整顯示圖片

5、漸變

linear-gradient

background-image:linear-gradient(90deg,yellow 20%,green 80%)

radial-gradient

background-iamge:radial-gradient(120px at center center,yellow,green)

6、多列布局

column-count

column-width

column-gap

column-rule

7、過渡

transition

transition-property:width //property為定義過渡的css屬性列表，列表以逗號分隔

transition-duration:2s; //過渡持續(xù)的時間

transition-timing-function:ease;

transition-delay:5s //過渡延遲5s進(jìn)行

8、動畫、旋轉(zhuǎn)

animation

transform ：translate（x,y) rotate(deg) scale(x,y)

translate

scale

rotate

skew（傾斜）

9、flex布局

10、@media媒體查詢

display的幾種常用取值

1、none 此元素不會被顯示，并且不占據(jù)頁面空間，這也是與visibility:hidden不同的地方，設(shè)置visibility:hidden的元素，不會被顯示，但是還是會占據(jù)原來的頁面空間。

2、inline 行內(nèi)元素 元素會在一行內(nèi)顯示，超出屏幕寬度自動換行，不能設(shè)置寬度和高度，元素的寬度和高度只能是靠元素內(nèi)的內(nèi)容撐開。

示例元素：span,b,i,a,u,sub,sup,strong,em

3、block 塊級元素 會獨占一行，如果不設(shè)置寬度，其寬度會自動填滿父元素的寬度，可以設(shè)置寬高，即使設(shè)置了寬度，小于父元素的寬度，塊級元素也會獨占一行。

示例元素：div,h2-h7,ul,ol,dl,p

4、inline-block 行內(nèi)塊元素 與行內(nèi)元素一樣可以再一行內(nèi)顯示，而且可以設(shè)置寬高，可以設(shè)置margin和padding。

示例元素：input,button,img

5、list-item 列表元素

示例元素：li

6、table 會作為塊級表格來顯示(類似于<table>)，表格前后帶有換行符。

7、inline-table 會作為內(nèi)聯(lián)表格來顯示(類似于<table>)，表格前后沒有換行符。

8、flex 多欄多列布局，火狐可以直接使用，谷歌和歐朋需要在屬性值前面加-webkit-前綴，比較適合移動端開發(fā)使用。

相鄰的兩個inline-block節(jié)點為什么會出現(xiàn)間隔，該如何解決

元素被當(dāng)成行內(nèi)元素排版的時候，原來HTML代碼中的回車換行被轉(zhuǎn)成一個空白符，在字體不為0的情況下，空白符占據(jù)一定寬度，所以inline-block的元素之間就出現(xiàn)了空隙。這些元素之間的間距會隨著字體的大小而變化，當(dāng)行內(nèi)元素font-size:16px時，間距為8px。

解決：

1、font-size

2、改變書寫方式

3、使用margin負(fù)值

4、使用word-spacing或letter-spacing

Viewport面試題

手機(jī)瀏覽器會把頁面放入到一個虛擬的“視口”（viewpoint）中，但viewport又不局限于瀏覽器可視區(qū)域的大小，它可能比瀏覽器的可視區(qū)域大，也可能比瀏覽器的可視區(qū)域小。通常這個虛擬的“視口”（viewport）比屏幕寬，會把網(wǎng)頁擠到一個很小的窗口。 如果不顯示地設(shè)置viewport，那么瀏覽器就會把width默認(rèn)設(shè)置為980。但后果是瀏覽器出現(xiàn)橫向滾動條，因為瀏覽器可視區(qū)域的寬度比默認(rèn)的viewport的寬度小。 然后瀏覽器引進(jìn)了 viewport 這個 meta tag，讓網(wǎng)頁開發(fā)者來控制 viewport 的大小和縮放。

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

CSS實現(xiàn)寬度自適應(yīng)100%，寬高16:9的比例的矩形

第一步先計算高度，假設(shè)寬100%，那么高為h=9/16=56.25%

第二步利用之前所說設(shè)置padding-bottom方法實現(xiàn)矩形

html
<div class="box">
  <div class="scale">
    <p>這是一個16：9的矩形</p>
  </div>
</div>

css
.box {
  width: 80%;
}

.scale {
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  position: relative;
}

.item {
  width: 100%;
  height: 100%;
  background-color: aquamarine;
  position: absolute;
}

rem布局的優(yōu)缺點

優(yōu)點：能讓我們在手機(jī)各個機(jī)型的適配方面；大大減少我們代碼的重復(fù)性，是我們的代碼更兼容。

缺點：目前ie不支持 對pc頁面來講使用次數(shù)不多；

數(shù)據(jù)量大：所有的圖片，盒子都需要我們?nèi)ソo一個準(zhǔn)確的值；才能保證不同機(jī)型的適配；

實現(xiàn)一個簡單的三角形

元素的border是由三角形組合而成

div {
    width: 0;
    height: 0;
    border: 40px solid;
    border-color: transparent transparent red;
}

如何解決1px問題（1像素邊框問題）

1. 媒體查詢利用設(shè)備像素比縮放，設(shè)置小數(shù)像素

IOS8下已經(jīng)支持帶小數(shù)的px值, media query對應(yīng)devicePixelRatio有個查詢值-webkit-min-device-pixel-ratio, css可以寫成這樣

.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border { border: 0.333333px solid #999 }
}

【缺點】對設(shè)備有要求，小數(shù)像素目前兼容性較差。

2. viewport + rem 方案

該方案是對上述方案的優(yōu)化，整體思路就是利用viewport + rem + js 動態(tài)的修改頁面的縮放比例，實現(xiàn)小于1像素的顯示。在頁面初始化時，在頭部引入原始默認(rèn)狀態(tài)如下：

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  
<meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

接下來的任務(wù)就是js的動態(tài)修改縮放比 以及 實現(xiàn)rem根元素字體大小的設(shè)置。

var viewport = document.querySelector("meta[name=viewport]")
if (window.devicePixelRatio == 1) {
    viewport.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no')
} 
if (window.devicePixelRatio == 2) {
    viewport.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no')
} 
if (window.devicePixelRatio == 3) {
    viewport.setAttribute('content', 'width=device-width, initial-scale=0.333333333, maximum-scale=0.333333333, minimum-scale=0.333333333, user-scalable=no')
} 

var docEl = document.documentElement;
var fontsize = 10 * (docEl.clientWidth / 320) + 'px';
docEl.style.fontSize = fontsize;

【缺點】以為縮放涉及全局的rem單位，比較適合新項目，對于老項目可能要涉及到比較多的改動。

3. 設(shè)置 border-image 方案

.border-image-1px {
    border-width: 1px 0px;
    -webkit-border-image: url("border.png") 2 0 stretch;
    border-image: url("border.png") 2 0 stretch;
}

【解釋】border-width 指定邊框的寬度，可以設(shè)定四個值，分別為上右下左border-width: top right bottom left。 border-image 該例意為：距離圖片上方2px（屬性值上沒有單位）裁剪邊框圖片作為上邊框，下方2px裁剪作為下邊框。距離左右0像素裁剪圖片即沒有邊框，以拉伸方式展示

結(jié)合起來就是：在邊框圖片中，裁剪圖片上下方的2個像素寬度作為上下邊框，并展示在寬度為1個像素的邊框空間里。左右沒有邊框。 注意這里的1個像素是特殊的，專指物理像素，而平時設(shè)定的長寬1px則表示邏輯像素，當(dāng)然，這種方式引入了圖片，我們還能將圖片裝換成base64形式表現(xiàn)

.border-image-1px {
    border-width: 1px 0px;
    -webkit-border-image: url("data:image/png;base64,xxx") 2 0 stretch;
    border-image: url('如上');
}

【缺點】需要制作圖片，圓角可能出現(xiàn)模糊

4. background-image 漸變實現(xiàn)

? 除了使用圖片外，當(dāng)然也能使用純css來實現(xiàn)，百度糯米團(tuán)就是采用的這種方案。

.border {
      background-image:linear-gradient(180deg, red, red 50%, transparent 50%),
      linear-gradient(270deg, red, red 50%, transparent 50%),
      linear-gradient(0deg, red, red 50%, transparent 50%),
      linear-gradient(90deg, red, red 50%, transparent 50%);
      background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
      background-repeat: no-repeat;
      background-position: top, right top,  bottom, left top;
      padding: 10px;
  }

【思路】將原本1個物理像素的邊框大小利用線性漸變分割成幾個部分（百分比控制），實現(xiàn)小于1像素效果 【解釋】linear-gradient指定線性漸變，接受大于等于3個參數(shù)，第一個為漸變旋轉(zhuǎn)角度，第二個開始為漸變的顏色和到哪個位置（百分比）全部變?yōu)樵擃伾摾又?，第一句就是，漸變方向旋轉(zhuǎn)180度，即從上往下（默認(rèn)為0度從下往上），從紅色開始漸變，到50%的位置還是紅色，再漸變?yōu)槔^承父元素顏色。 【缺點】因為每個邊框都是線性漸變顏色實現(xiàn)，因此無法實現(xiàn)圓角

5. box-shadow 方案

利用陰影也可以實現(xiàn)，優(yōu)點是沒有圓角問題，缺點是顏色不好控制

div {
    -webkit-box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5);
}

【理解】來回顧一下box-shadow屬性的用法。

box-shadow: h-shadow v-shadow [blur] [spread] [color] [inset];

參數(shù)分別表示: 水平陰影位置，垂直陰影位置，模糊距離， 陰影尺寸，陰影顏色，將外部陰影改為內(nèi)部陰影，后四個可選。該例中為何將陰影尺寸設(shè)置為負(fù)數(shù)？設(shè)置成-1px 是為了讓陰影尺寸稍小于div元素尺寸，這樣左右兩邊的陰影就不會暴露出來，實現(xiàn)只有底部一邊有陰影的效果。從而實現(xiàn)分割線效果（單邊邊框）。

6. transform: scale(0.5) 方案 - 推薦: 很靈活

在以上的用法種，無非逃不開一種思想，就是將1px縮小為0.5px來展示，然而。0.5px并不是所有的設(shè)備或瀏覽器都支持，就考慮用媒體查詢或viewport將其縮放比例。其實1像素問題的產(chǎn)生基本發(fā)生在設(shè)置邊框或分割線的時候，場景并不覆蓋全局樣式，因此，直接縮放需要設(shè)置的元素，才是我們真正需要的。tranform就能實現(xiàn)這個需求。

1. 設(shè)置height: 1px，根據(jù)媒體查詢結(jié)合transform縮放為相應(yīng)尺寸。

div {
    height:1px;
    background:#000;
    -webkit-transform: scaleY(0.5);
    -webkit-transform-origin:0 0;
    overflow: hidden;
}

2.用::after和::befor,設(shè)置border-bottom：1px solid #000,然后在縮放-webkit-transform: scaleY(0.5);可以實現(xiàn)兩根邊線的需求

div::after{
    content:'';width:100%;
    border-bottom:1px solid #000;
    transform: scaleY(0.5);
}

3.用::after設(shè)置border：1px solid #000; width:200%; height:200%,然后再縮放scaleY(0.5); 優(yōu)點可以實現(xiàn)圓角，京東就是這么實現(xiàn)的，缺點是按鈕添加active比較麻煩。

.div::after {
    content: '';
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #bfbfbf;
    border-radius: 4px;
    -webkit-transform: scale(0.5,0.5);
    transform: scale(0.5,0.5);
    -webkit-transform-origin: top left;
}

7. 媒體查詢 + transfrom 對方案1的優(yōu)化

/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}

/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.33);
        transform: scaleY(0.33);
    }
}

到此，相信大家對“CSS面試題有哪些”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！