好程序員web前端面試題分享用線性漸變實現斜線

好程序員web前端面試題分享用線性漸變實現斜線

一、用線性漸變實現以下圖的斜線？

答案：<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>

1. 用CSS實現單行居中顯示文字，多行居左顯示效果，如圖：

答案:<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>

1. 介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不一樣的？

答案：標準的盒模型是基於 doctype 正確書寫的狀況下，而且是高於 IE6 的瀏覽器纔會有的。

標準盒子模型：寬度=內容的寬度（content）+ border + padding + margin

低版本IE盒子模型：寬度=內容寬度（content+border+padding）+ margin

四、什麼是外邊距重疊？重疊的結果是什麼？

答案：在CSS當中，相鄰的兩個盒子（多是兄弟關係也多是祖先關係）的外邊距能夠結合成一個單獨的外邊距。這種合併外邊距的方式被稱爲摺疊，而且於是所結合成的外邊距稱爲摺疊外邊距。

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

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

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

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

五、請解釋一下CSS3的Flexbox（彈性盒佈局模型）,以及適用場景？

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

較爲複雜的佈局還能夠經過嵌套一個伸縮容器（flex container）來實現。採用Flex佈局的元素，稱爲Flex容器（flex container），簡稱"容器"。它的全部子元素自動成爲容器成員，稱爲Flex項目（flex item），簡稱"項目"。常規佈局是基於塊和內聯流方向，而Flex佈局是基於flex-flow流能夠很方便的用來作局中，能對不一樣屏幕大小自適應。在佈局上有了比之前更加靈活的空間。