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

鄒強發布于2019-08-30 11:11 / 1112人閱讀

摘要：在此記錄一下被提問的問題吧論水平也就是初級前端，所以很多問題也是挺簡單的。為了直觀和調試的方便，我們把屬性這么寫其實對于作三角形這一目的，邊框的風格并不重要，所以在這里不多做研究。

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

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

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有了更深入的理解)：
問題到手的時候我是懵逼的，三角形？
回家后然后就度了一下得到了最簡單的答案（此答案到處都有，我也是自己又寫了一個就不貼出處了）

首先貼上代碼
html:

css:

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

效果

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

現在我們來看

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中其實還有許多值得深究的地方，等研究到時再來做些筆記吧。

云服務器 GPU云服務器嵌入式c語言面試匯總問題匯總號碼隱私保護常見問題匯總面試問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114827.html

前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0
前端最強面經匯總

摘要：獲取的對象范圍方法獲取的是最終應用在元素上的所有屬性對象即使沒有代碼，也會把默認的祖宗八代都顯示出來而只能獲取元素屬性中的樣式。因此對于一個光禿禿的元素，方法返回對象中屬性值如果有就是據我測試不同環境結果可能有差異而就是。花了很長時間整理的前端面試資源，喜歡請大家不要吝嗇star~ 別只收藏，點個贊，點個star再走哈~ 持續更新中……，可以關注下github 項目地址 https:...

wangjuntytl 2019-08-26 10:41 評論0 收藏0
Web前端開發學習推薦--菜鳥必看

Web前端開發是創建Web頁面或app等前端界面呈現給用戶的過程。第一階段：前端基礎（HTML / CSS / JavaScript / jQuery）初識HTML+CSS【學習筆記】HTML基礎完結篇html基礎知識——標簽詳解html基礎知識——與用戶交互!（表單標簽）html基礎知識——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個概念純HTM...

JerryWangSAP 2019-08-02 15:21 評論0 收藏0
Web前端開發學習推薦--菜鳥必看

Web前端開發是創建Web頁面或app等前端界面呈現給用戶的過程。第一階段：前端基礎（HTML / CSS / JavaScript / jQuery）初識HTML+CSS【學習筆記】HTML基礎完結篇html基礎知識——標簽詳解html基礎知識——與用戶交互!（表單標簽）html基礎知識——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個概念純HTM...

shadajin 2019-08-19 11:45 評論0 收藏0