前端面試—CSS面試題匯總

前端面試—CSS面試題匯總

博客說明

文章所涉及的資料來自互聯網整理和個人總結，意在于個人學習和經驗匯總，如有什么地方侵權，請聯系本人洗掉，謝謝！

1、flex常見面試題

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

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

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

左中右三等分

給父元素添加display:flex

左右布局，一側定寬，一側自適應撐滿

<div style="display:flex; height:100%; width:100%;">
    <div style="width:300px; background:red;">
        sss
    </div>
    <div style="width:100%; background:green;">
        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 >
    <div >未知高度上下左右居中</div>
</div>

2、盒模型面試題

什么是盒模型

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

標準盒模型和IE的盒模型的區別

不同之處就是標準盒模型的內容大小就是content的大小，而IE的則是content + padding +border 總的大小

怎么設定標準盒模型和IE的盒模型

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

BFC面試題

BFC的基本概念

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

BFC原理

• BFC內部的盒子，會在垂直方向，一個接一個地放置，垂直方向上也會發生邊距重疊，
• BFC就是頁面上的一個獨立容器，容器里面的子元素不會影響到外面的元素，外邊的也不會影響里邊的，
• BFC的區域不會與float box重疊，
• 計算BFC的高度時，浮動元素也被計算在內，

BFC如何產生

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

在屬性值為這些的情況下，都會讓所屬的box產生BFC，

CSS布局面試題

有哪些布局

1. float布局的兼容性比較好，解決辦法：給橙色塊添加overflow: hidden（生成了一個BFC），浮動元素父元素還存在高度塌陷問題，解決方法： 父元素生成一個BFC，
2. absolute布局的有點是簡單直接，兼容性好，缺點，脫離了檔案流，
3. flex布局的優點，布局簡單、靈活，移動端友好；缺點是ie8以下不兼容，
4. table布局的優點是兼容性好，有時候布局相對簡單，缺點是它是對TABLE標簽的不正規使用，一直以來被大家所詬病，當需要內容高度不一致時并不適應，
5. grid布局優點，是第一個基于二維方向的布局模塊，它是第一個基于網格的原生布局系統，缺點是對低版本瀏覽器兼容性不好，

CSS前處理器

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

CSS前處理器功能

1.嵌套 反映層級和約束
2.變數和計算 減少重復代碼
3.Extend和Mixin 代碼片段復用
4.回圈 適用于復雜有規律的樣式
5.import CSS檔案模塊化

CSS新特性

css3的新選擇器

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

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

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

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

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

E:target 選擇當前活動的E元素

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

屬性選擇器

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

2、文本

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

text-overflow:規定當文本溢位包含元素時發生的事情 text-overflow:ellipsis(省略)

text-wrap:規定文本換行的規則

word-break 規定非中日韓文本的換行規則

word-wrap 對長的不可分割的單詞進行分割并換行到下一行

white-space: 規定如何處理元素中的空白 white-space:nowrap 規定段落中的文本不進行換行

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平鋪) 平鋪效果不作用于四角，只適應與四邊

}

4、背景

rgba

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

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; //過渡持續的時間

transition-timing-function:ease;

transition-delay:5s //過渡延遲5s進行

8、影片、旋轉

animation

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

translate

scale

rotate

skew（傾斜）

9、flex布局

10、@media媒體查詢

display的幾種常用取值

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

2、inline 行內元素 元素會在一行內顯示，超出螢屏寬度自動換行，不能設定寬度和高度，元素的寬度和高度只能是靠元素內的內容撐開，

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

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

示例元素：div,h1-h6,ul,ol,dl,p

4、inline-block 行內塊元素 與行內元素一樣可以再一行內顯示，而且可以設定寬高，可以設定margin和padding，

示例元素：input,button,img

5、list-item 串列元素

示例元素：li

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

7、inline-table 會作為行內表格來顯示(類似于

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

相鄰的兩個inline-block節點為什么會出現間隔，該如何解決

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

解決：

1、font-size

2、改變書寫方式

3、使用margin負值

4、使用word-spacing或letter-spacing

Viewport面試題

手機瀏覽器會把頁面放入到一個虛擬的“視口”（viewpoint）中，但viewport又不局限于瀏覽器可視區域的大小，它可能比瀏覽器的可視區域大，也可能比瀏覽器的可視區域小，通常這個虛擬的“視口”（viewport）比螢屏寬，會把網頁擠到一個很小的視窗，
如果不顯示地設定viewport，那么瀏覽器就會把width默認設定為980，但后果是瀏覽器出現橫向滾動條，因為瀏覽器可視區域的寬度比默認的viewport的寬度小，
然后瀏覽器引進了 viewport 這個 meta tag，讓網頁開發者來控制 viewport 的大小和縮放，

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

CSS實作寬度自適應100%，寬高16:9的比例的矩形

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

第二步利用之前所說設定padding-bottom方法實作矩形

html
<div >
  <div >
    <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布局的優缺點

優點：能讓我們在手機各個機型的適配方面；大大減少我們代碼的重復性，是我們的代碼更兼容，

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

資料量大：所有的圖片，盒子都需要我們去給一個準確的值；才能保證不同機型的適配；

實作一個簡單的三角形

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

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

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

1. 媒體查詢利用設備像素比縮放，設定小數像素

IOS8下已經支持帶小數的px值, media query對應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 }
}

【缺點】對設備有要求，小數像素目前兼容性較差，

2. viewport + rem 方案

該方案是對上述方案的優化，整體思路就是利用viewport + rem + js 動態的修改頁面的縮放比例，實作小于1像素的顯示，在頁面初始化時，在頭部引入原始默認狀態如下：

<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"> 

接下來的任務就是js的動態修改縮放比 以及 實作rem根元素字體大小的設定，

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. 設定 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 指定邊框的寬度，可以設定四個值，分別為上右下左border-width: top right bottom left，
border-image 該例意為：距離圖片上方2px（屬性值上沒有單位）裁剪邊框圖片作為上邊框，下方2px裁剪作為下邊框，距離左右0像素裁剪圖片即沒有邊框，以拉伸方式展示

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

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

【缺點】需要制作圖片，圓角可能出現模糊

4. background-image 漸變實作

除了使用圖片外，當然也能使用純css來實作，百度糯米團就是采用的這種方案，

.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個物理像素的邊框大小利用線性漸變分割成幾個部分（百分比控制），實作小于1像素效果
【解釋】linear-gradient指定線性漸變，接受大于等于3個引數，第一個為漸變旋轉角度，第二個開始為漸變的顏色和到哪個位置（百分比）全部變為該顏色，該例子中，第一句就是，漸變方向旋轉180度，即從上往下（默認為0度從下往上），從紅色開始漸變，到50%的位置還是紅色，再漸變為繼承父元素顏色，
【缺點】因為每個邊框都是線性漸變顏色實作，因此無法實作圓角

5. box-shadow 方案

利用陰影也可以實作，優點是沒有圓角問題，缺點是顏色不好控制

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];

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

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

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

1. 設定height: 1px，根據媒體查詢結合transform縮放為相應尺寸，

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

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

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

3.用::after設定border：1px solid #000; width:200%; height:200%,然后再縮放scaleY(0.5); 優點可以實作圓角，京東就是這么實作的，缺點是按鈕添加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的優化

/* 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);
    }
}

感謝

萬能的網路

以及勤勞的自己，個人博客，GitHub

標籤：Java

上一篇：閉嘴，給你一個數！1分鐘，學完C語言指標，不扎手只扎心的針！

下一篇：Java方法