成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

鄒強(qiáng) / 1124人閱讀

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

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

css篇：
（一）如何實現(xiàn)未知寬高塊級元素在父元素中上下左右居中：（普通問題就記錄一下了）
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;
        }

效果

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

現(xiàn)在我們來看

width:0;
height:0;

由此可以看出其實三角形部分不是由content部分組成的，主要是由border部分組成。但是為什么要把content的寬高設(shè)置為0，我們先放一放。

來看border這幾個屬性：

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

看到這里依舊是有點摸不著頭腦，先這樣然后這樣然后那樣就可以這樣了？

那就從頭開始一點點分析吧，先看三個屬性的官方解釋：
border-width 簡寫屬性為元素的所有邊框設(shè)置寬度，或者多帶帶地為各邊邊框設(shè)置寬度。
border-color 屬性是一個簡寫屬性，可設(shè)置一個元素的所有邊框中可見部分的顏色，或者為 4 個邊分別設(shè)置不同的顏色。
border-style 屬性用于設(shè)置元素所有邊框的樣式，或者多帶帶地為各邊設(shè)置邊框樣式。

可以看出這三個屬性其實都是分別設(shè)置其屬性的簡寫，可以分別設(shè)置每個邊框的屬性。
為了直觀和調(diào)試的方便，我們把屬性這么寫：

.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;
        }

其實對于作三角形這一目的，邊框的風(fēng)格并不重要，所以在這里不多做研究。
主要來看邊框?qū)挾萣order-width和邊框顏色border-color;
這里我們分別嘗試把border-right-width和border-left-width設(shè)置成0看一下效果：


這里在瀏覽器中調(diào)試過程中直觀的可以看出無論是border-right-width還是border-left-width都似乎撐開了這個邊框。那我們調(diào)高border-top-width會使三角形變高或者三角形變梯形嗎？我們再調(diào)整border-top-width：


在這里我們就可以看出只是三角形頂部的空白被撐起來了，三角形本身并沒什么變化。
好像發(fā)現(xiàn)了什么，由于我們這里把width和height設(shè)為了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;  
        }

效果：

這下就一目了然了，其實當(dāng)border有寬度時是一個梯形，而梯形什么時候會變成三角形呢，就是有一個平行邊變成0的時候。其實這個題目考的還是對于盒子模型和border屬性的理解。
這里還有大佬對于這種三角形更深入的探究：https://www.cnblogs.com/blosa...

目前需要記錄的就是這兩個css的問題，感覺面試過程中對于css的問題還是比較少，但是其實css中其實還有許多值得深究的地方，等研究到時再來做些筆記吧。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114827.html

相關(guān)文章

  • 前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

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

    princekin 評論0 收藏0

  • 前端最強(qiáng)面經(jīng)匯總

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

    wangjuntytl 評論0 收藏0

  • Web前端開發(fā)學(xué)習(xí)推薦--菜鳥必看

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

    JerryWangSAP 評論0 收藏0

  • Web前端開發(fā)學(xué)習(xí)推薦--菜鳥必看

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

    shadajin 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<