您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關(guān)重要的七道CSS面試題,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個參考,希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。
CSS3中的盒模型有以下兩種:標準盒模型、IE盒模型
標準盒模型和IE盒模型的區(qū)別就是:標準盒模型的寬高指的是內(nèi)容的寬高,而IE盒模型的寬高指的是內(nèi)容,內(nèi)邊距,邊框的總和。
在CSS3中,可以使用box-sizeing:border-box
將普通盒模型轉(zhuǎn)化為IE盒模型。有時候我們已經(jīng)設(shè)置了一個盒子的寬高,但是,如果想要改變border
,這樣盒子的大小就會發(fā)生改變,我們就可以將其轉(zhuǎn)化為IE盒模型,就不用每次計算盒子內(nèi)容大小了。
在盒子模型中
box-sizeing:content-box
表示標準盒模型(默認值)box-sizeing:border-box
表示IE盒模型(也就是怪異盒模型)除此之外,還有:Flex彈性伸縮盒模型
這兩個屬性都是讓元素隱藏不可見
區(qū)別:
(1)在渲染樹中
display:none
會讓元素完全中渲染樹中消失,渲染的時候不會占據(jù)任何空間;visibility:hidden
不會讓元素從渲染樹中消失,渲染的元素還會占據(jù)相應(yīng)的空間,只是內(nèi)容不可見(2)繼承
display:none
是非繼承屬性,他的子孫節(jié)點會隨著父節(jié)點從渲染樹消失,通過修改子孫節(jié)點的屬性也無法顯示。visibility:hidden
是繼承屬性,子孫節(jié)點消失是由于繼承了hidden
,通過設(shè)置visibility:visible
可以讓子孫節(jié)點顯示。(3)修改常規(guī)文檔流中的元素的display
通常會造成文檔的重排,但是修改visibility
屬性只會造成本元素的重繪
(4)如果使用讀屏器,設(shè)置為display:none
的內(nèi)容不會被讀取,設(shè)置為visibility:hidden
的內(nèi)容會被讀取。visibility:hidden
概念:
精靈圖就是將多個小圖片拼接在一個圖片中,使用的時候通過background-position
元素尺寸調(diào)節(jié)需要顯示的背景圖案。
優(yōu)點:
缺點:
屬性值 | 概述 |
---|---|
absolute | 生成絕對定位的元素,相對于static定位以外的一個父元素進行定位 |
relative | 生成相對定位的元素,相對于其原來的位置進行定位 |
fixed | 生成絕對定位的元素,相對于瀏覽器窗口進行定位 |
static | 默認值,沒有定位,元素出現(xiàn)在正常的文檔流中 |
inherit | 規(guī)定從父元素繼承position屬性的值 |
(1)GIF
適用于:色彩簡單的logo,icon,線框圖,簡單的動畫
(2)JPG
適用于:色彩豐富的圖片、漸變圖像
(3)PNG
(4)WEBP
適用于:支持webp的APP或網(wǎng)頁
格式 | 優(yōu)點 | 缺點 | 適用場景 |
---|---|---|---|
gif | 文件小,支持動畫、透明,無兼容性問題 | 只支持256種顏色 | 色彩簡單的logo、icon、動圖 |
jpg | 色彩豐富,文件小 | 有損壓縮,反復(fù)保存圖片質(zhì)量下降明顯 | 色彩豐富的圖片/漸變圖像 |
png | 無損壓縮,支持透明,簡單圖片尺寸小 | 不支持動畫,色彩豐富的圖片尺寸大 | logo/icon/透明圖 |
webp | 文件小,支持有損和無損壓縮,支持動畫、透明 | 瀏覽器兼容性不好 | 支持webp格式的app和webview |
選擇器 | 格式 |
---|---|
標簽選擇器 | p |
類選擇器 | #myclassname |
id選擇器 | #myid |
相鄰兄弟選擇器 | h2+p |
子選擇器 | ul>li |
后代選擇器 | li a |
通配符選擇器 | * |
屬性選擇器 | a[ref=“eee”] |
偽類選擇器 | li:last-child |
如果需要選擇緊接在另一個元素后的元素,而且二者有相同的父元素,可以使用相鄰兄弟選擇器.例如,如果要增加緊接在 h2 元素后出現(xiàn)的段落的上邊距,可以這樣寫:
h2 + p {margin-top:50px;}
對于選擇器的優(yōu)先級:
需要注意的是:
屬性繼承性:
元素設(shè)置為浮動之后,display會自動變成block。
浮動造成的問題如下:
清除浮動的方式如下:
height
屬性clear:both
樣式overflow:hidden
或者overflow:auto
undefined
CSS3中的盒模型有以下兩種:標準盒模型、IE盒模型
標準盒模型和IE盒模型的區(qū)別就是:標準盒模型的寬高指的是內(nèi)容的寬高,而IE盒模型的寬高指的是內(nèi)容,內(nèi)邊距,邊框的總和。
在CSS3中,可以使用box-sizeing:border-box
將普通盒模型轉(zhuǎn)化為IE盒模型。有時候我們已經(jīng)設(shè)置了一個盒子的寬高,但是,如果想要改變border
,這樣盒子的大小就會發(fā)生改變,我們就可以將其轉(zhuǎn)化為IE盒模型,就不用每次計算盒子內(nèi)容大小了。
在盒子模型中
box-sizeing:content-box
表示標準盒模型(默認值)box-sizeing:border-box
表示IE盒模型(也就是怪異盒模型)除此之外,還有:Flex彈性伸縮盒模型
這兩個屬性都是讓元素隱藏不可見
區(qū)別:
(1)在渲染樹中
display:none
會讓元素完全中渲染樹中消失,渲染的時候不會占據(jù)任何空間;visibility:hidden
不會讓元素從渲染樹中消失,渲染的元素還會占據(jù)相應(yīng)的空間,只是內(nèi)容不可見(2)繼承
display:none
是非繼承屬性,他的子孫節(jié)點會隨著父節(jié)點從渲染樹消失,通過修改子孫節(jié)點的屬性也無法顯示。visibility:hidden
是繼承屬性,子孫節(jié)點消失是由于繼承了hidden
,通過設(shè)置visibility:visible
可以讓子孫節(jié)點顯示。(3)修改常規(guī)文檔流中的元素的display
通常會造成文檔的重排,但是修改visibility
屬性只會造成本元素的重繪
(4)如果使用讀屏器,設(shè)置為display:none
的內(nèi)容不會被讀取,設(shè)置為visibility:hidden
的內(nèi)容會被讀取。visibility:hidden
概念:
精靈圖就是將多個小圖片拼接在一個圖片中,使用的時候通過background-position
元素尺寸調(diào)節(jié)需要顯示的背景圖案。
優(yōu)點:
缺點:
屬性值 | 概述 |
---|---|
absolute | 生成絕對定位的元素,相對于static定位以外的一個父元素進行定位 |
relative | 生成相對定位的元素,相對于其原來的位置進行定位 |
fixed | 生成絕對定位的元素,相對于瀏覽器窗口進行定位 |
static | 默認值,沒有定位,元素出現(xiàn)在正常的文檔流中 |
inherit | 規(guī)定從父元素繼承position屬性的值 |
(1)GIF
適用于:色彩簡單的logo,icon,線框圖,簡單的動畫
(2)JPG
適用于:色彩豐富的圖片、漸變圖像
(3)PNG
(4)WEBP
適用于:支持webp的APP或網(wǎng)頁
格式 | 優(yōu)點 | 缺點 | 適用場景 |
---|---|---|---|
gif | 文件小,支持動畫、透明,無兼容性問題 | 只支持256種顏色 | 色彩簡單的logo、icon、動圖 |
jpg | 色彩豐富,文件小 | 有損壓縮,反復(fù)保存圖片質(zhì)量下降明顯 | 色彩豐富的圖片/漸變圖像 |
png | 無損壓縮,支持透明,簡單圖片尺寸小 | 不支持動畫,色彩豐富的圖片尺寸大 | logo/icon/透明圖 |
webp | 文件小,支持有損和無損壓縮,支持動畫、透明 | 瀏覽器兼容性不好 | 支持webp格式的app和webview |
選擇器 | 格式 |
---|---|
標簽選擇器 | p |
類選擇器 | #myclassname |
id選擇器 | #myid |
相鄰兄弟選擇器 | h2+p |
子選擇器 | ul>li |
后代選擇器 | li a |
通配符選擇器 | * |
屬性選擇器 | a[ref=“eee”] |
偽類選擇器 | li:last-child |
如果需要選擇緊接在另一個元素后的元素,而且二者有相同的父元素,可以使用相鄰兄弟選擇器.例如,如果要增加緊接在 h2 元素后出現(xiàn)的段落的上邊距,可以這樣寫:
h2 + p {margin-top:50px;}
對于選擇器的優(yōu)先級:
需要注意的是:
屬性繼承性:
元素設(shè)置為浮動之后,display會自動變成block。
浮動造成的問題如下:
清除浮動的方式如下:
height
屬性clear:both
樣式overflow:hidden
或者overflow:auto
關(guān)于重要的七道CSS面試題就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。