近階段前端面試問題彙總（css篇）

時間 2019-12-07

標籤階段前端面試問題彙總 css 欄目快樂工作简体版

原文原文鏈接

經歷了各類選擇與被選擇以後（其實就是被坑了），最終又離開了平靜乃至頹廢的划水崗位，從新跳入前端求職的大鍋，繼續翻騰。
在此記錄一下被提問的問題吧(論水平也就是初級前端，因此不少問題也是挺簡單的）。css

css篇：
（一）如何實現未知寬高塊級元素在父元素中上下左右居中：（普通問題就記錄一下了）
1.絕對定位：html

div{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;}

2.table佈局:
父級元素：前端

.parent{ display:table;}

子級元素:面試

.child{ display:table-cell;vertical-align:middle }

3.flex佈局：
父級元素：瀏覽器

.parent{display:flex;flex-direction:row;justify-content:center;align-items:center;}

子級元素：佈局

.child{flex:1}

（二）用css畫一塊三角形(這個問題有點刁鑽，可是挺有趣，也算是對盒子模型和對border有了更深刻的理解)：
問題到手的時候我是懵逼的，三角形？
回家後而後就度了一下獲得了最簡單的答案（此答案處處都有，我也是本身又寫了一個就不貼出處了）flex

首先貼上代碼
html:spa

<body>
    <div class="sjx"></div>
</body>

css:調試

.sjx{
            width: 0;
            height: 0;
            border-width:0 30px 30px;
            border-style:solid;
            border-color:transparent transparent green;
        }

效果code

!!!∑(ﾟДﾟノ)ノ這是個啥？？？拿到了答案依舊是沒有思路，好吧，那咱們先來看看些代碼都作了什麼。

如今咱們來看

width:0;
height:0;

由此能夠看出其實三角形部分不是由content部分組成的，主要是由border部分組成。可是爲何要把content的寬高設置爲0，咱們先放一放。

來看border這幾個屬性：

border-width:0 30px 30px;/*設置了上邊框爲0，左右下邊框爲30px*/
border-style:solid;/*邊框的風格是solid實線*/
border-color:transparent transparent green;/*上左右邊框的顏色設爲透明，下邊框設置爲綠色*/

看到這裏依舊是有點摸不着頭腦，先這樣而後這樣而後那樣就能夠這樣了？

那就從頭開始一點點分析吧，先看三個屬性的官方解釋：
border-width 簡寫屬性爲元素的全部邊框設置寬度，或者單獨地爲各邊邊框設置寬度。
border-color 屬性是一個簡寫屬性，可設置一個元素的全部邊框中可見部分的顏色，或者爲 4 個邊分別設置不一樣的顏色。
border-style 屬性用於設置元素全部邊框的樣式，或者單獨地爲各邊設置邊框樣式。

能夠看出這三個屬性其實都是分別設置其屬性的簡寫，能夠分別設置每一個邊框的屬性。
爲了直觀和調試的方便，咱們把屬性這麼寫：

.sjx{
            width: 0;
            height: 0;
            border-top-width: 0;
            border-right-width: 30px;
            border-bottom-width: 30px;
            border-left-width: 30px;
            border-top-style: solid;
            border-right-style: solid;
            border-bottom-style: solid;
            border-left-style: solid;
            border-top-color: transparent;
            border-right-color: transparent;
            border-bottom-color: green;
            border-left-color: transparent;
        }

其實對於做三角形這一目的，邊框的風格並不重要，因此在這裏很少作研究。
主要來看邊框寬度border-width和邊框顏色border-color;
這裏咱們分別嘗試把border-right-width和border-left-width設置成0看一下效果：

這裏在瀏覽器中調試過程當中直觀的能夠看出不管是border-right-width仍是border-left-width都彷佛撐開了這個邊框。那咱們調高border-top-width會使三角形變高或者三角形變梯形嗎？咱們再調整border-top-width：

在這裏咱們就能夠看出只是三角形頂部的空白被撐起來了，三角形自己並沒什麼變化。
好像發現了什麼，因爲咱們這裏把width和height設爲了0，因此這就混淆了咱們，咱們把width和height還給這個div，同時給他一個背景色：

width: 20px;
height: 20px;
background-color: lightcoral;

這裏的三角形變成了一個梯形，可是因爲其餘邊框仍是透明或者寬度爲0，這個效果圖仍是會使人迷惑，咱們就一步到位把其餘邊框的顏色和寬度還給他們：

.sjx {
            width: 20px;
            height: 20px;
            background-color: lightcoral;
            border-top-width: 30px;
            border-right-width: 30px;
            border-bottom-width: 30px;
            border-left-width: 30px;
            border-top-style: solid;
            border-right-style: solid;
            border-bottom-style: solid;
            border-left-style: solid;
            border-top-color: yellow;
            border-right-color: cornflowerblue;
            border-bottom-color: green;
            border-left-color: sandybrown;  
        }

效果：

這下就一目瞭然了，其實當border有寬度時是一個梯形，而梯形何時會變成三角形呢，就是有一個平行邊變成0的時候。其實這個題目考的仍是對於盒子模型和border屬性的理解。
這裏還有大佬對於這種三角形更深刻的探究：https://www.cnblogs.com/blosa...

目前須要記錄的就是這兩個css的問題，感受面試過程當中對於css的問題仍是比較少，可是其實css中其實還有許多值得深究的地方，等研究到時再來作些筆記吧。