2019web前端全新面試題庫 一

千鋒HTML5學院發表於2019-05-22


1、用線性漸變實現如下圖的斜線? b4f03bdfc6014f78a543be179d0a5b58.png

答案:<div></div>

<style>

div{margin:50px  auto; width:100px;height:100px;border:1px solid #333;  

 background:linear-gradient(45deg,  transparent 49.5%, deeppink 49.5%, deeppink 50.5%, transparent  50.5%);

     }

</style>

2、用CSS實現單行居中顯示文字,多行居左顯示效果,如圖:

5d5c5a8da7c64d3d864b1da009f7854c.png

答案:<div><p>只有一行時居中顯示文字,多行居左顯示多行居左顯示</p></div>

<style>

body,p{ margin:  0; padding: 0;}

div{text-align:  center;width: 400px;height: 400px; background: #ddd; margin: 30px auto;  font-size: 20px;}

p{display:  inline-block;text-align: left;}

</style>

3、介紹一下標準的CSS的盒子模型?與低版本IE的盒子模型有什麼不同的?

答案:標準的盒模型是基於 doctype 正確書寫的情況下,並且是高於 IE6 的瀏覽器才會有的。

標準盒子模型:寬度=內容的寬度(content)+ border + padding + margin

低版本IE盒子模型:寬度=內容寬度(content+border+padding)+ margin

4、什麼是外邊距重疊?重疊的結果是什麼?

答案:在CSS當中,相鄰的兩個盒子(可能是兄弟關係也可能是祖先關係)的外邊距可以結合成一個單獨的外邊距。這種合併外邊距的方式被稱為摺疊,並且因而所結合成的外邊距稱為摺疊外邊距。

摺疊結果遵循下列計算規則:

1)兩個相鄰的外邊距都是正數時,摺疊結果是它們兩者之間較大的值。

2)兩個相鄰的外邊距都是負數時,摺疊結果是兩者絕對值的較大值。

3)兩個外邊距一正一負時,摺疊結果是兩者的相加的和。

5、請解釋一下CSS3的Flexbox(彈性盒佈局模型),以及適用場景?

答案:一個用於頁面佈局的全新CSS3功能,Flexbox可以把列表放在同一個方向(從上到下排列,從左到右),並讓列表能延伸到佔用可用的空間。

較為複雜的佈局還可以透過巢狀一個伸縮容器(flex  container)來實現。採用Flex佈局的元素,稱為Flex容器(flex  container),簡稱"容器"。它的所有子元素自動成為容器成員,稱為Flex專案(flex  item),簡稱"專案"。常規佈局是基於塊和內聯流方向,而Flex佈局是基於flex-flow流可以很方便的用來做局中,能對不同螢幕大小自適應。在佈局上有了比以前更加靈活的空間。


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69917019/viewspace-2645236/,如需轉載,請註明出處,否則將追究法律責任。

相關文章