【web前端面試題整理03】來看一點CSS相關的吧


前言

昨天我們整理了14到js的題,今天我們再來整理14到CSS相關的題目,昨天整理時候時間有點晚了我便有點心浮氣躁,里面的一些題需要再次解答,好了看看今天有些什么吧。

PS:我這里挑一點來做就好了,各位也可以作答

題目一覽

1、<img>標簽上title屬性與alt屬性的區別是什么?
2、分別寫出以下幾個HTML標簽:文字加粗、下標、居中、字體
3、寫出一個文本輸入框,屬性為只讀,最大輸入字符為20個
4、CSS左邊固定,右邊可變的布局實現方法;要求在源碼順序中左邊必須在前。
5、圖片和文字一起如何通過css實現居中
6、請簡述一下CSS中的樣式繼承和CSS的選擇器
7、請簡述一個各個選擇器之間的優先級
8、在同等優先級的情況下如何選擇樣式
9、盒子模型,請簡述一下盒子模型
10、如何使一個DIV的背景圖像距這個DIV的頂部10像素,左邊15像素,且不重復
11、如何增加某一個鏈接的可點擊面積,而下划線仍然與鏈接一樣長?
12、一個元素的上邊框為紅色,其他邊框黑色,里面文字的顏色是藍色
13、打開(隱藏)、關閉(顯示)一個對象。Style的display以及visibility的參數是什么?
14、用css和div實現3列或2列的頁面布局,並說明與table布局相比有哪些優缺點
15、定寬網頁兩列內容布局,試寫出你所知道的幾種布局代碼

第一題,img title與alt

title是用於鼠標划上時候顯示的提示信息,而我們的圖片總匯有原因不能現在,這個時候alt便會替代文字顯示,而且alt對於seo十分友好,所以我們所有的圖片必須加上alt,這樣瀏覽器就知道他是干什么的了。

第二題,加粗,居中,下划線標簽

<strong></strong>

center></center>

<u></u>

這道題感覺意義不大,以為以上幾個標簽除了strong,其它我沒有用過,他可能會到語義化相關然后問CSS怎么用吧?

第三題,文本框屬性

<input type="text" maxlength="20" readonly="readonly" />

我突然迷糊了,這些題雖然我不大答得上,但是不帶這么問的,因為分分鍾可以找到答案的問題。。。雖說我們不應該依賴網絡,但是......

第四題,布局的問題

沒有理解到想要問什么,按我的理解這個題考察以下知識:

① 內容優先

② 布局知識

第五題,圖片與文字一起居中

好了,這道題是這么久出現的最好的一道題,我們先來看一個有趣的實驗:

1 <div style=" width: 500px; height: 300px; border: 1px solid black; display: table-cell; vertical-align: middle; text-align: center; ">
2     <img src="1.png" style=" vertical-align: middle;" alt="葉小釵頭像" />
3     <span style=" vertical-align: middle; border: 1px dotted black ">刀狂劍痴葉小釵刀狂劍痴葉小釵刀狂劍痴葉小釵刀狂劍痴
葉小釵刀狂劍痴葉小釵刀狂劍痴葉小釵刀狂劍痴葉小釵刀狂劍痴葉小釵刀狂劍痴葉小釵刀狂劍痴葉小釵刀狂劍痴葉小釵</span> 4 </div>

事實上我們以上的做能保證我們的圖片與文字居中了,雖然在IE下需要做特殊處理(文字大小控制),但是我們似乎感覺這不是我們想要的東西么(主要是文字換行的比較詭異)?

這里又涉及到了我們前面介紹的line-height的知識了哦,我們先不管這些,只是看看垂直居中這個:

我這里介紹一個國內淘寶干的事情:

1 div { display: table-cell; width: 200px; height: 200px; font-size: 118px; 
border
: 1px solid black; text-align: center; vertical-align: middle; } 2 img { vertical-align: middle; }

這個能很好的實現圖片居中的功能,現在我們來看看其中文字那塊問題吧:

經過我們前面的學習,我們知道一行的高度來源於line boxes,而line boxes高度來源於inline boxes,而第一行的高度由圖片決定,所以第一個行高就比較高了,不信?我們來做過例子:

1 <div style=" width: 500px; height: 300px; border: 1px solid black; 
display: table-cell; vertical-align: middle; text-align: center; "
> 2 <img src="1.png" style=" vertical-align: middle;" alt="葉小釵頭像" /> 3 <span style=" vertical-align: middle; border: 1px dotted black ">
刀狂劍痴葉小釵刀狂劍痴葉小釵刀狂劍痴葉小釵刀狂劍痴葉小釵刀狂劍痴葉小釵
<em style=" line-height: 40px; color: Red; ">不信?</em>
刀狂劍痴葉小釵刀狂劍痴葉小釵刀狂劍痴葉小釵刀狂劍痴葉小釵刀狂劍痴葉小釵刀狂劍痴葉小釵</span> 4 </div>

請看此處我們不信所看的事情,其實和img標簽差不多了。具體垂直居中的事情各位還要自己私下研究才行。

第十題,背景相關

10、如何使一個DIV的背景圖像距這個DIV的頂部10像素,左邊15像素,且不重復

PS:我怎么覺得這些題有點坑爹的嫌疑。。。雖說沒有編輯器我可能打不好,我也不推薦這么干:

background:url("yexiaochai.gif") no-repeat 15px 10px ;

結語

感覺今天這套題一般,各位看着玩吧。 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM