z-index 是什么？z-index 屬性設(shè)置元素的堆疊順序，擁有更高的堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁(yè) > 營(yíng)銷資訊 > 網(wǎng)站運(yùn)營(yíng) > 面試題：CSS 面試題集錦

面試題：CSS 面試題集錦

時(shí)間：2023-09-10 21:24:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-10 21:24:01 來源：網(wǎng)站運(yùn)營(yíng)

面試題：CSS 面試題集錦：

z-index和疊加上下文是如何形成的？

z-index 層疊上下文的關(guān)系 層疊上下文 z-index

z-index 是什么？

z-index 屬性設(shè)置元素的堆疊順序，擁有更高的堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面

該屬性設(shè)置一個(gè)定位元素沿著 z 軸的位置，z 軸定義為垂直延申到顯示區(qū)的軸，如果為正數(shù)，則離用戶更加近，為負(fù)數(shù)則離用戶更加遠(yuǎn)

層疊上下文和層疊層

使用z-index有什么需要注意的地方？

什么情況下使用z-index？

當(dāng)absolute元素覆蓋另一個(gè)absolute元素，且HTML端不方便調(diào)整DOM的先后順序時(shí)，需要設(shè)置z-index: 1。

非常少見的情況下多個(gè)absolute交錯(cuò)覆蓋，或者需要顯示最高層次的模態(tài)對(duì)話框時(shí)，可以設(shè)置z-index > 1。

CSS Sprite是什么，談?wù)勥@個(gè)技術(shù)的優(yōu)缺點(diǎn)

CSS Sprites是一種網(wǎng)頁(yè)圖片應(yīng)用處理方式，就是把網(wǎng)頁(yè)中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進(jìn)行背景定位

優(yōu)點(diǎn)

缺點(diǎn)

字體圖標(biāo)和svg圖標(biāo)對(duì)比

iconfont 采用字體渲染得方式，效果不是很好，SVG 采用圖形渲染

漸進(jìn)增強(qiáng)，優(yōu)雅降級(jí)是什么？

有哪些的隱藏內(nèi)容的方法？

display:none可以讓網(wǎng)頁(yè)中所有內(nèi)容不顯示，如代碼、文字、鏈接、圖片、div層，是推薦的內(nèi)容隱藏方式。

什么是柵格系統(tǒng)

Bootstrap內(nèi)置了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕設(shè)備或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列。

我在這里是把Bootstrap中的柵格系統(tǒng)叫做布局。它就是通過一系列的行（row）與列（column）的組合創(chuàng)建頁(yè)面布局，然后你的內(nèi)容就可以放入到你創(chuàng)建好的布局當(dāng)中。下面就簡(jiǎn)單介紹一下Bootstrap柵格系統(tǒng)的工作原理：

網(wǎng)格系統(tǒng)的實(shí)現(xiàn)原理非常簡(jiǎn)單，僅僅是通過定義容器大小，平分12份(也有平分成24份或32份，但12份是最常見的)，再調(diào)整內(nèi)外邊距，最后結(jié)合媒體查詢，就制作出了強(qiáng)大的響應(yīng)式網(wǎng)格系統(tǒng)。Bootstrap框架中的網(wǎng)格系統(tǒng)就是將容器平分成12份。

你用過媒體查詢，或針對(duì)移動(dòng)端的布局/CSS 嗎？

通過媒體查詢可以為不同大小和尺寸的媒體定義不同的css，適合相應(yīng)的設(shè)備顯示；即響應(yīng)式布局

@media screen and (min-width: 400px) and (max-width: 700px) { … }@media handheld and (min-width: 20em), screen and (min-width: 20em) { … }

如果設(shè)計(jì)中使用了非標(biāo)準(zhǔn)的字體，你該如何去實(shí)現(xiàn)？

瀏覽器是如何判斷元素是否匹配某個(gè) CSS 選擇器？

有選擇器： div.ready #wrapper > .bg-red 先把所有元素 class 中有 bg-red 的元素拿出來組成一個(gè)集合，

然后上一層，對(duì)每一個(gè)集合中的元素，

如果元素的 parent id 不為 #wrapper 則把元素從集合中刪去。

再向上，從這個(gè)元素的父元素開始向上找，沒有找到一個(gè) tagName 為 div 且 class 中有 ready 的元素，就把原來的元素從集合中刪去。

至此這個(gè)選擇器匹配結(jié)束，所有還在集合中的元素滿足。

大體就是這樣，不過瀏覽器還會(huì)有一些奇怪的優(yōu)化。

注意：

1、為什么從后往前匹配因?yàn)樾屎臀臋n流的解析方向。效率不必說，找元素的父親和之前的兄弟比遍歷所喲兒子快而且方便。

關(guān)于文檔流的解析方向，是因?yàn)楝F(xiàn)在的 CSS，一個(gè)元素只要確定了這個(gè)元素在文檔流之前出現(xiàn)過的所有元素，就能確定他的匹配情況；

應(yīng)用在即使 html 沒有載入完成，瀏覽器也能根據(jù)已經(jīng)載入的這一部分信息完全確定出現(xiàn)過的元素的屬性。

2、為什么是用集合主要也還是效率?；?CSS Rule 數(shù)量遠(yuǎn)遠(yuǎn)小于元素?cái)?shù)量的假設(shè)和索引的運(yùn)用，

遍歷每一條 CSS Rule 通過集合篩選，比遍歷每一個(gè)元素再遍歷每一條 Rule 匹配要快得多。

偽元素 (pseudo-elements) 有什么用？

例子：

列出你所知道的 display 屬性的全部值

  1. display: none 表示不被顯示
.first { display: none; width: 200px;}
  1. display: block 塊級(jí)元素
a { display: block; width: 100%; height: 40px; background: yellow;}
  1. display: inline
此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符，即display:inline的作用即可以將一個(gè)塊級(jí)元素轉(zhuǎn)換成行內(nèi)元素，那么這個(gè)塊級(jí)元素將不能再設(shè)置寬和高以及上下方向的margin和padding。

.second{ display: inline; width: 400px; height: 100px; background: yellow;}
  1. display：inline-block
設(shè)置了inline-block屬性的元素既具有block元素可以設(shè)置width和height屬性的特性，又保持了inline元素不換行的特性

例如ul li a 標(biāo)簽組合float：left做成的橫向?qū)Ш接胐isplay：inline-block屬性就可以完成：

ul,li,a,*{ list-style: none; text-decoration:none; } li{ display: inline-block; border: thin solid red; }
  1. display: inherit
規(guī)定應(yīng)該從父元素繼承 display 屬性的值

<div class="parent"> <div class="son1"></div> <div class="son2"></div></div>.parent{ display: inline-block; font-size: 0; background: #cadafa; width: 400px; height: 300px; } .son1{ display: inherit; background: #eaedac; width: 200px; height: 100px; } .son2{ display: inherit; background: #da5dd8; width: 200px; height: 100px; }
  1. diplay: flex
  2. display: inline-flex;

block, inline 和 inline-block 的區(qū)別

block和inline這兩個(gè)概念是簡(jiǎn)略的說法，完整確切的說應(yīng)該是 block-level elements (塊級(jí)元素) 和 inline elements (內(nèi)聯(lián)元素)。

block元素通常被現(xiàn)實(shí)為獨(dú)立的一塊，會(huì)單獨(dú)換一行；inline元素則前后不會(huì)產(chǎn)生換行，一系列inline元素都在一行內(nèi)顯示，直到該行排滿。

大體來說HTML元素各有其自身的布局級(jí)別（block元素還是inline元素）：

常見的塊級(jí)元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。

常見的內(nèi)聯(lián)元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。

block元素可以包含block元素和inline元素；但inline元素只能包含inline元素。

要注意的是這個(gè)是個(gè)大概的說法，每個(gè)特定的元素能包含的元素也是特定的，所以具體到個(gè)別元素上，這條規(guī)律是不適用的。

比如 P 元素，只能包含inline元素，而不能包含block元素。

一般來說，可以通過display:inline和display:block的設(shè)置，改變?cè)氐牟季旨?jí)別。

display:block

display:inline

display:inline-block

簡(jiǎn)單來說就是將對(duì)象呈現(xiàn)為inline對(duì)象，但是對(duì)象的內(nèi)容作為block對(duì)象呈現(xiàn)。之后的內(nèi)聯(lián)對(duì)象會(huì)被排列在同一行內(nèi)。比如我們可以給一個(gè)link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。

relative、fixed、absolute 和 static 元素的區(qū)別？

static 靜態(tài)定位

靜態(tài)定位（position：static）是HTML中的默認(rèn)定位，符合常規(guī)文檔流，這里沒太多內(nèi)容。

relative 相對(duì)定位

相對(duì)定位（position：relative），對(duì)象相對(duì)于本身位置而言，進(jìn)行上下左右的偏移，但注意，它不脫離文檔流！

absolute 絕對(duì)定位

絕對(duì)定位（position：absolute），相對(duì)于父級(jí)而言進(jìn)行位置偏移，如果沒有父級(jí)或者父級(jí)沒有進(jìn)行定位，則繼續(xù)往上一級(jí)尋找參照物，直至最終的瀏覽器窗口。請(qǐng)注意，區(qū)別于相對(duì)定位的還有一點(diǎn)，絕對(duì)定位脫離常規(guī)文檔流！

fixed 固定定位

固定定位（position：fixed），可理解為絕對(duì)定位中的一種特殊情況，即absolute包含fixed。它的特殊之處在于它不用像absolute瘋狂“找爸爸”，它天生參照于瀏覽器窗口！當(dāng)為對(duì)象設(shè)置固定定位后，該對(duì)象即處于瀏覽器窗口畫面中的固定位置，無視文檔長(zhǎng)短、窗口大小和滾條滾動(dòng)。這常見于有時(shí)打開一些網(wǎng)頁(yè)總會(huì)有廣告在側(cè)邊，太煩人了！

響應(yīng)式設(shè)計(jì) (responsive design) 和自適應(yīng)設(shè)計(jì) (adaptive design) 不同？

1.允許網(wǎng)頁(yè)寬度自動(dòng)調(diào)整

<meta name="viewport" content="width=device-width,initial-scale=''1" />所有主流瀏覽器都支持這個(gè)設(shè)置。對(duì)于老式瀏覽器（主要針對(duì)IE6,7,8），需要使用css3-mediaqueries.js。

<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>2.盡量少使用絕對(duì)寬度 3.相對(duì)大小的字體,字體也不能使用絕對(duì)大?。╬x），只能使用相對(duì)大?。╡m）或者高清方案（rem），rem不局限字體大小，而前面的width也可以使用，代替百分百。 4.流動(dòng)布局

流動(dòng)布局是各個(gè)區(qū)塊的位置都是浮動(dòng)的，不是固定不變的。

float的好處是，如果寬度太小，放不下兩個(gè)元素，后面的元素會(huì)自動(dòng)滾到前面元素的下方，不會(huì)再水平方向溢出，避免了水平滾動(dòng)條的實(shí)現(xiàn)。

5.選擇加載css

為什么提倡使用 translate() 而非 不是 absolute？

translate()是transform的一個(gè)值。

改變transform或opacity不會(huì)觸發(fā)瀏覽器重新布局（reflow）或重繪（repaint），

只會(huì)觸發(fā)復(fù)合（compositions）(復(fù)合是什么，我也不懂，沒聽說過，有知道的朋友可以在留言區(qū)告訴我)。

transform使瀏覽器為元素創(chuàng)建一個(gè) GPU 圖層

translate改變位置時(shí)，元素依然會(huì)占據(jù)其原始空間

而改變絕對(duì)定位會(huì)觸發(fā)重新布局，進(jìn)而觸發(fā)重繪和復(fù)合。

改變絕對(duì)定位會(huì)使用到 CPU。

因此translate()更高效，可以縮短平滑動(dòng)畫的繪制時(shí)間。

如果實(shí)現(xiàn)一個(gè)高性能的CSS動(dòng)畫效果？

高性能CSS3動(dòng)畫

關(guān)鍵詞：試題,集錦

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉