生活随笔
收集整理的這篇文章主要介紹了
面试题整理 | 45道CSS面试题
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
Q1、CSS全稱是什么？ CSS英文全稱：Cascading StyleSheets，也就是層疊樣式表。是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語言 Q2、為什么需要CSS？ CSS最早是在1997年開發(fā)的，它是Web開發(fā)人員定義其創(chuàng)建的網(wǎng)頁外觀的一種方式。它旨在允許開發(fā)人員將 網(wǎng)站代碼的內(nèi)容和結(jié)構(gòu)與視覺設(shè)計(jì)分開，這在此之前是不可能實(shí)現(xiàn)的。 結(jié)構(gòu)和樣式的分離使HTML可以執(zhí)行其最初基于的更多功能-內(nèi)容標(biāo)記，而不必?fù)?dān)心頁面本身的設(shè)計(jì)和布局，這通常稱為“外觀”頁面。 Q3、CSS的主要版本有哪些？ 主要有：CSS 1，CSS 2，CSS 2.1，CSS 3，CSS 4幾個(gè)版本 Q4、CSS集成到HTML頁面的方式有哪些？ 使用HTML頁面在header的<style>標(biāo)簽來集成樣式 使用內(nèi)聯(lián)樣式 將CSS編寫在單獨(dú)的css文件中，通過link標(biāo)簽將其引入到html頁面 Q5、什么是層疊？ 簡單的說，層疊就是對一個(gè)元素多次設(shè)置同一個(gè)樣式，這將使用最后一次設(shè)置的屬性值。例如對一個(gè)站點(diǎn)中的多個(gè)頁面使用了同一套CSS樣式表，而某些頁面中的某些元素想使用其他樣式，就可以針對這些樣式單獨(dú)定義一個(gè)樣式表應(yīng)用到頁面中。這些后來定義的樣式將對前面的樣式設(shè)置進(jìn)行重寫，在瀏覽器中看到的將是最后面設(shè)置的樣式效果。 Q6、使用CSS的優(yōu)勢？ 多個(gè)文檔的樣式可以通過使用一個(gè)站點(diǎn)來控制。 多個(gè)HTML元素可以包含許多文檔，可以在其中創(chuàng)建類。 要在復(fù)雜情況下對樣式進(jìn)行分組，請使用選擇器和分組方法。 Q7、使用CSS的缺點(diǎn)？ 無法通過選擇器升序 垂直控制的局限性 沒有表情 沒有列聲明 偽類不受動(dòng)態(tài)行為的控制 規(guī)則，樣式，無法定位特定文本 Q8、列舉一些CSS框架？ Bootstrap ：是美國Twitter公司的設(shè)計(jì)師Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 開發(fā)的簡潔、直觀、強(qiáng)悍的前端開發(fā)框架，使得 Web 開發(fā)更加快捷。Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范，它即是由動(dòng)態(tài)CSS語言Less寫成。Layui ：是一款采用自身模塊規(guī)范編寫的前端 UI 框架，遵循原生HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。其外在極簡，體積輕盈，組件豐盈，非常適合界面的快速開發(fā)。ElementUI ：一套為開發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0的桌面端組件庫。antd ：是基于 Ant Design 設(shè)計(jì)體系的 React UI 組件庫，主要用于研發(fā)企業(yè)級中后臺(tái)產(chǎn)品。開箱即用的高質(zhì)量 React 組件，全鏈路開發(fā)和設(shè)計(jì)工具體系，數(shù)十個(gè)國際化語言支持。Q9、CSS中使用ID和Class的區(qū)別？ ID ：ID屬性的操作類似于CLASS屬性，但有一點(diǎn)重要的不同之處：ID屬性的值在整篇文檔中必須是唯一的。這使得ID屬性可用于設(shè)置單個(gè)元素的樣式規(guī)則。包含ID屬性的選擇器稱為ID選擇器。ID選擇器的標(biāo)志符是散列符號（#）Class ：CLASS屬性允許向一組在CLASS屬性上具有相同值的元素應(yīng)用聲明。BODY內(nèi)的所有元素都有CLASS屬性。類選擇器以標(biāo)志符（句點(diǎn)）開頭。Q10、什么是RGB？ RGB色彩模式是工業(yè)界的一種顏色標(biāo)準(zhǔn)，是通過對紅?、綠(G)、藍(lán)(B)三個(gè)顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的，RGB即是代表紅、綠、藍(lán)三個(gè)通道的顏色。 Q11、在CSS中為元素分配某種顏色的方法有哪些 十六進(jìn)制顏色碼 十六進(jìn)制顏色碼就是在軟件中設(shè)定顏色值的代碼。通過一個(gè)以“#”開頭的6位十六進(jìn)制數(shù)值表示一種顏色。6位數(shù)字分為3組，每組兩位，依次表示紅、綠、藍(lán)三種顏色的強(qiáng)度。 RGB顏色模式 顏色由表明紅色，綠色，和藍(lán)色各成分強(qiáng)度的三個(gè)數(shù)值表示。從極小值0到最大值255，當(dāng)所有顏色,都在最低值被顯示的顏色將是黑色，當(dāng)所有顏色都在他們的最大值被顯示的顏色將是白色。 HSL標(biāo)記 設(shè)計(jì)師和美術(shù)師通常更喜歡使用HSL（色相/飽和度/亮度）顏色方法進(jìn)行工作。在Web上，使用HSL功能符號表示HSL顏色。HSL（）CSS函數(shù)在用法上與RGB（）函數(shù)非常相似。 Q12、CSS盒模型 所有 HTML 元素都可以視為方框。在 CSS 中，在談?wù)撛O(shè)計(jì)和布局時(shí)，會(huì)使用術(shù)語“盒模型”或“框模型”。 CSS 框模型實(shí)質(zhì)上是一個(gè)包圍每個(gè) HTML 元素的框。它包括：外邊距、邊框、內(nèi)邊距以及實(shí)際的內(nèi)容。 對不同部分的說明： 內(nèi)容區(qū)（content）：它呈現(xiàn)了盒子的主要信息內(nèi)容，這些內(nèi)容可以是文本、圖片等多種類型； 內(nèi)邊距（padding）：內(nèi)邊距是內(nèi)容區(qū)和邊框之間的空間； 邊框（border）：邊框是環(huán)繞內(nèi)容區(qū)和填充的邊界； 外邊距（margin）：外邊距位于盒子的最外圍，是添加在邊框外周圍的空間。 Q13、什么是z-index？ z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。 注釋：z-index 僅能在定位元素上奏效！ 可能到值： auto——默認(rèn)。堆疊順序與父元素相等。 number——設(shè)置元素的堆疊順序。 inherit——規(guī)定應(yīng)該從父元素繼承 z-index 屬性的值。 Q14、什么是CSS Sprite（“精靈圖”） CSS Sprites叫 CSS精靈或者雪碧圖，是一種網(wǎng)頁圖片應(yīng)用處理方式。 CSS Sprites其實(shí)就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中。 再利用CSS的"background-image"，“background-repeat”，"background-position"的組合進(jìn)行背景定位，background-position可以用數(shù)字精確的定位出背景圖片的位置。 Q15、使用CSS Sprites的好處 利用CSS Sprites能很好地減少網(wǎng)頁的http請求，從而大大的提高頁面的性能，這也是CSS Sprites最大的優(yōu)點(diǎn)，也是其被廣泛傳播和應(yīng)用的主要原因； CSS Sprites能減少圖片的字節(jié)，曾經(jīng)比較過多次3張圖片合并成1張圖片的字節(jié)總是小于這3張圖片的字節(jié)總和。 解決了網(wǎng)頁設(shè)計(jì)師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個(gè)小元素進(jìn)行命名，從而提高了網(wǎng)頁的制作效率。 Q16、CSS中的偽元素是什么？ CSS偽元素是添加到選擇器的關(guān)鍵字，可用于設(shè)置所選元素的特定部分的樣式。 “first-line” 偽元素用于向文本的首行設(shè)置特殊樣式，只能用于塊級元素！下面的屬性可應(yīng)用于 “first-line” 偽元素：font，color，background，word-space，letter-space，text-decoration，text-transform，line-height，clear。 “first-letter” 偽元素用于向文本的首字母設(shè)置特殊樣式，只能用于塊級元素！下面的屬性可應(yīng)用于 “first-letter” 偽元素：font，color，background，margin，padding，border，text-decoration，line-height，clear，text-transform。 Q17、如何設(shè)置h2和h3標(biāo)簽的相同樣式？
Q18、CSS中的float屬性如何使用？ float 屬性定義元素在哪個(gè)方向浮動(dòng)。以往這個(gè)屬性總應(yīng)用于圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動(dòng)。浮動(dòng)元素會(huì)生成一個(gè)塊級框，而不論它本身是何種元素。 如果浮動(dòng)非替換元素，則要指定一個(gè)明確的寬度；否則，它們會(huì)盡可能地窄。 可能到值： float: none; float: left; float: right; Q19、當(dāng)前版本的CSS中使用了哪些不同的模塊？ CSS中有幾個(gè)模塊，部分如下： 選擇器 盒模型 背景和邊框 文字效果 2D / 3D轉(zhuǎn)換 動(dòng)畫制作 多列布局 用戶界面 Q20、CSS允許使用哪些不同的媒介類型？ @media屬性主要有四種類型（包括screen）： all—適用于所有設(shè)備。 print—打印預(yù)覽模式/打印頁面。 speech——適用于“朗讀”頁面的屏幕閱讀器 screen——計(jì)算機(jī)屏幕（默認(rèn)） Q21. CSS有哪些單位? CSS 有兩種類型的長度單位：相對和絕對。設(shè)置 CSS 長度的屬性有 width, margin, padding, font-size, border-width, 等。 相對單位 單位描述 em 它是描述相對于應(yīng)用在當(dāng)前元素的字體尺寸所以它也是相對長度單位。一般瀏覽器字體大小默認(rèn)為16px，則2em == 32px； rem rem 是根 em（root em）的縮寫，rem作用于非根元素時(shí)，相對于根元素字體大小；rem作用于根元素字體大小時(shí)，相對于其出初始字體大小。 vw viewpoint width，視窗寬度，1vw=視窗寬度的1% vh viewpoint height，視窗高度，1vh=視窗高度的1% vmin vw和vh中較小的那個(gè) vmax vw和vh中較大的那個(gè) % 相對父元素
*提示 ：rem與em有什么區(qū)別呢？區(qū)別在于使用rem為元素設(shè)定字體大小時(shí)，仍然是相對大小，但相對的只是HTML根元素 絕對單位 單位描述 cm 厘米 mm 毫米 in 英寸 (1in = 96px = 2.54cm) px* 像素 (1px = 1/96th of 1in) pt point，大約1/72英寸；(1pt = 1/72in)
*提示 ：像素或許被認(rèn)為是最好的"設(shè)備像素"，而這種像素長度和你在顯示器上看到的文字屏幕像素?zé)o關(guān)。px實(shí)際上是一個(gè)按角度度量的單位。 Q22. 如何控制插入的圖片不重復(fù)?
Q23. 下面這段代碼將對元素做些什么？ 在要應(yīng)用的對象上指定 margin：0 auto 時(shí)候，該對象將位于其父容器的中央。第二個(gè)參數(shù)上會(huì)告訴瀏覽器自動(dòng)確定左右邊距，方法是將它們均等設(shè)置。它保證左右邊距將設(shè)置為相同的大小。第一個(gè)參數(shù)0表示頂部和底部邊距都將設(shè)置0。 Q24. overflow屬性在CSS中被用于什么？ overflow 屬性規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情 這個(gè)屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會(huì)如何處理。如果值為 scroll，不論是否需要，用戶代理都會(huì)提供一種滾動(dòng)機(jī)制。因此，有可能即使元素框中可以放下所有內(nèi)容也會(huì)出現(xiàn)滾動(dòng)條。 可能的值： overflow: auto; 如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。 overflow: hidden; 內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見的。 overflow: scroll; 內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。 overflow: visible; 默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。 Q25. 用于控制圖像滾動(dòng)的屬性是什么？ background-attachment ：該屬性設(shè)置背景圖像是隨頁面其余部分滾動(dòng)還是固定滾動(dòng)。Q26. 什么是響應(yīng)式網(wǎng)頁設(shè)計(jì)？ 響應(yīng)式網(wǎng)站設(shè)計(jì)是一種網(wǎng)絡(luò)頁面設(shè)計(jì)布局，其理念是：集中創(chuàng)建頁面的圖片排版大小，可以智能地根據(jù)用戶行為以及使用的設(shè)備環(huán)境進(jìn)行相對應(yīng)的布局。 Q27. {visibility：hidden} 和 {display：none} 有什么區(qū)別？ display:none 表示標(biāo)簽根本不會(huì)出現(xiàn)在頁面上（盡管您仍然可以通過DOM與之交互）。與其他標(biāo)簽之間將沒有分配空間。 visibility:hidden 表示該標(biāo)簽不可見，但在頁面上為其分配了空間。標(biāo)簽已呈現(xiàn)，只是在頁面上看不到。 Q28.CSS的特異性是什么意思？ 如果有兩條或兩條以上指向同一元素的沖突 CSS 規(guī)則，則瀏覽器將遵循一些原則來確定哪一條是最具體的，并因此勝出。 將特異性（specificity）視為得分/等級，能夠確定最終將哪些樣式聲明應(yīng)用于元素。 每個(gè)選擇器在特異性層次結(jié)構(gòu)中都有其位置。以下四種類別定義了選擇器的特異性級別： 行內(nèi)樣式 - 行內(nèi)（內(nèi)聯(lián)）樣式直接附加到要設(shè)置樣式的元素。 實(shí)例：<h1 style="color: #ffffff;">。 ID - ID 是頁面元素的唯一標(biāo)識(shí)符 類、屬性和偽類 - 此類別包括 .classes、[attributes] 和偽類 元素和偽元素 - 此類別包括元素名稱和偽元素 比如 h1、div、:before 和 :after。 Q29.CSS中字體相關(guān)的屬性有哪些？ Font-style Font-variant Font-weight Font-size/line-height Font-family Caption Icon Q30.如何在CSS中使用box-shadow？ box-shadow 向框添加一個(gè)或多個(gè)陰影。該屬性是由逗號分隔的陰影列表，每個(gè)陰影由 2-4 個(gè)長度值、可選的顏色值以及可選的 inset 關(guān)鍵詞來規(guī)定。省略長度的值是 0。 box-shadow: h-shadow v-shadow blur spread color inset; 值描述 h-shadow 必需。水平陰影的位置。允許負(fù)值。 v-shadow 必需。垂直陰影的位置。允許負(fù)值。 blur 可選。模糊距離。 spread 可選。陰影的尺寸 color 可選。陰影的顏色。請參閱 CSS 顏色值。 inset 可選。將外部陰影 (outset) 改為內(nèi)部陰影。
Q31.什么是派生選擇器（上下文選擇器）？ 派生選擇器允許你根據(jù)文檔的上下文關(guān)系來確定某個(gè)標(biāo)簽的樣式。通過合理地使用派生選擇器，我們可以使 HTML 代碼變得更加整潔。 Q32、什么是彈性布局？ flexbox布局正式稱為CSS flexible box布局模塊，是CSS3中的新布局模塊。它可以改善容器中物品的對齊，方向和順序，即使它們的尺寸是動(dòng)態(tài)的，甚至是未知的。flex容器的主要特征是能夠修改其子項(xiàng)的寬度或高度，以在不同的屏幕尺寸上以最佳方式填充可用空間。 采用Flex布局的元素，稱為Flex容器（flex container），簡稱”容器”。它的所有子元素自動(dòng)成為容器成員，稱為Flex項(xiàng)目（flex item），簡稱”項(xiàng)目”。 Q33、瀏覽器如何確定哪些元素與CSS選擇器匹配？ 瀏覽器從最右邊（key 選擇器）到左邊匹配選擇器。瀏覽器根據(jù)key選擇器篩選出DOM中的元素，并遍歷其父元素以確定匹配項(xiàng)。選擇器鏈的長度越短，瀏覽器就可以更快地確定該元素是否與選擇器匹配。 例如，使用選擇器p span，瀏覽器首先找到所有<span>元素，然后向上遍歷其父元素直到根，以找到<p>元素。對于特定的<span>，只要找到<p>，它就會(huì)知道<span>匹配并且可以停止其匹配。 Q34、解釋為什么選擇有時(shí)候使用translate（）而不是絕對定位？ translate是CSS transform的值。更改變換或不透明度不會(huì)觸發(fā)瀏覽器重排或重新繪制，但會(huì)觸發(fā)合成。而更改絕對定位會(huì)觸發(fā)回流。變換使瀏覽器為該元素創(chuàng)建一個(gè)GPU層，但是更改絕對定位屬性將使用CPU。因此，translate（）效率更高，并且可以縮短繪制時(shí)間，從而使動(dòng)畫更流暢。 Q35、解釋通過移動(dòng)優(yōu)先策略和自適應(yīng)設(shè)計(jì)兩種方法的差異？ 這兩種方法不是唯一的。使網(wǎng)站具有響應(yīng)能力意味著某些元素將通過CSS媒體查詢根據(jù)設(shè)備的屏幕尺寸（通常是視口寬度）來調(diào)整其大小或其他功能，從而做出響應(yīng)。 例如，在較小的設(shè)備上減小字體大小。 移動(dòng)優(yōu)先策略也具有響應(yīng)能力，但是，它同意我們應(yīng)該默認(rèn)并定義移動(dòng)設(shè)備的所有樣式，并且僅在以后向其他設(shè)備添加特定的響應(yīng)規(guī)則。遵循前面的示例： 移動(dòng)優(yōu)先策略具有兩個(gè)主要優(yōu)點(diǎn) ： 由于不必針對任何媒體查詢驗(yàn)證適用于它們的所有規(guī)則，因此在移動(dòng)設(shè)備上的性能更高 它會(huì)強(qiáng)制針對響應(yīng)式CSS規(guī)則編寫更簡潔的代碼。 Q36、CSS如何實(shí)現(xiàn)元素的定位？ position屬性指定用于元素的定位方法的類型。 有五個(gè)不同的位置值： position: fixed; position: static; position: absolute; position: sticky; position: relative; 然后使用top，bottom，left和right屬性定位元素。但是，除非首先設(shè)置position屬性，否則這些屬性將不起作用。根據(jù)位置值，它們的工作方式也不同。 Q37、什么是塊級格式化上下文（BFC），如何工作？ 1.規(guī)范解釋 塊格式化上下文（Block Formatting Context，BFC）是Web頁面的可視化CSS渲染的一部分，是布局過程中生成塊級盒子的區(qū)域，也是浮動(dòng)元素與其他元素的交互限定區(qū)域。 2.通俗解釋： BFC 是一個(gè)獨(dú)立的布局環(huán)境,可以理解為一個(gè)容器,在這個(gè)容器中按照一定規(guī)則進(jìn)行物品擺放,并且不會(huì)影響其它環(huán)境中的物品。 如果一個(gè)元素符合觸發(fā)BFC的條件，則該元素中的布局不受外部影響。 浮動(dòng)元素會(huì)創(chuàng)建BFC，所以浮動(dòng)元素內(nèi)部子元素主要受浮動(dòng)元素影響，兩個(gè)浮動(dòng)元素之間是互不影響的。 3.創(chuàng)建方式： 根元素或包含根元素的元素 浮動(dòng)元素 float ＝ left | right 或 inherit（≠ none） 絕對定位元素 position ＝ absolute 或 fixed display ＝ inline-block | flex | inline-flex | table-cell 或 table-caption overflow ＝ hidden | auto 或 scroll (≠ visible) Q38、這段CSS代碼會(huì)產(chǎn)生什么影響？{box-sizing：border-box;} 默認(rèn)情況下，元素具有box-sizing：應(yīng)用了content-box，并且僅考慮了內(nèi)容大小。 box-sizing：邊框更改了元素的寬度和高度的計(jì)算方式，邊框和填充也包括在計(jì)算中。 元素的高度由內(nèi)容的高度+垂直填充+垂直邊框?qū)挾扔?jì)算得出。 元素的寬度是通過內(nèi)容的寬度+水平填充+水平邊框?qū)挾葋碛?jì)算的。 在我們的盒子模型中，考慮到填充物和邊框，與設(shè)計(jì)人員實(shí)際如何想象網(wǎng)格中的內(nèi)容產(chǎn)生了更好的共鳴。 Q39、什么是CSS預(yù)處理器？何時(shí)建議在項(xiàng)目中使用預(yù)處理器？ CSS預(yù)處理器是用一種專門的編程語言，進(jìn)行Web頁面樣式設(shè)計(jì)，然后再編譯成正常的CSS文件，以供項(xiàng)目使用。 SCSS其語法完全兼容CSS3，并且繼承了SCSS的強(qiáng)大功能。由于SCSS是CSS的擴(kuò)展，因此所有在CSS中正常工作的代碼也能在SCSS中正常工作。比CSS多出好多功能如變量、嵌套、混合(Mixin)、繼承等。 什么時(shí)候用取決于項(xiàng)目的類型，但是預(yù)處理器具有以下優(yōu)點(diǎn)/缺點(diǎn)。 優(yōu)點(diǎn)： CSS變得更易于維護(hù)。 易于編寫嵌套選擇器。 用于一致主題的變量。可以跨不同項(xiàng)目共享主題文件。 Mixins生成重復(fù)的CSS。 諸如循環(huán)，列表和映射之類的Sass功能可以使配置更容易且更省力。 將您的代碼分成多個(gè)文件。CSS文件也可以拆分，但是這樣做需要HTTP請求才能下載每個(gè)CSS文件。 缺點(diǎn)： 需要進(jìn)行預(yù)處理的工具。重新編譯時(shí)間可能很慢。 不編寫當(dāng)前和潛在可用的CSS。例如，通過將諸如 postcss-loader之類的內(nèi)容 與 webpack一起使用，您可以編寫可能與將來兼容的CSS，從而使您可以使用CSS變量（而不是Sass變量）之類的東西 Q40、相對，固定，絕對和靜態(tài)定位的元素有什么區(qū)別？ 定位元素是計(jì)算的位置屬性是relative, fixed, absolute and static。 靜態(tài)static 默認(rèn)位置；默認(rèn)為0。元素將像往常一樣流入頁面。top，right，bottom，left和z-index屬性不適用。 相對relative 元素的位置相對于自身進(jìn)行了調(diào)整，而沒有更改布局（因此，如果沒有放置元素，將為元素留出一定的空隙）。 絕對absolute 元素從頁面流中刪除，并且相對于其最接近的祖先（如果有）或相對于初始包含塊而定位在指定的位置。絕對定位的盒子可以有邊距，并且不會(huì)與其他任何邊距一起折疊。這些元素不會(huì)影響其他元素的位置。 固定 fixed 將元素從頁面流中移除，并將其放置在相對于視口的指定位置，并且在滾動(dòng)時(shí)不會(huì)移動(dòng)。 粘性sticky 粘性定位是相對定位和固定定位的混合。將該元素視為相對位置，直到它超過指定的閾值為止，此時(shí)將其視為固定位置。 Q41、什么是供應(yīng)商前綴？ 瀏覽器供應(yīng)商有時(shí)會(huì)在實(shí)驗(yàn)性或非標(biāo)準(zhǔn)CSS屬性和JavaScript API中添加前綴，因此，從理論上講，開發(fā)人員可以嘗試新的想法，同時(shí)從理論上防止在標(biāo)準(zhǔn)化過程中依賴他們的實(shí)驗(yàn)，然后破壞Web開發(fā)人員的代碼。開發(fā)人員應(yīng)等待包括未添加前綴的屬性，直到瀏覽器行為標(biāo)準(zhǔn)化為止。 主流瀏覽器使用以下前綴： -webkit- （Chrome，Safari，Opera的較新版本，幾乎所有的iOS瀏覽器（包括Firefox for iOS）；基本上是任何基于WebKit的瀏覽器） -moz- （Firefox） -o- （舊的，WebKit之前的Opera版本） -ms- （Internet Explorer和Microsoft Edge） Q42、什么是文件分割，何時(shí)使用？ 良好的CSS架構(gòu)的應(yīng)該有合理的文件組織。整體文件適合單獨(dú)的開發(fā)人員或非常小的項(xiàng)目。對于大型項(xiàng)目（具有多種布局和內(nèi)容類型的站點(diǎn)，或在同一設(shè)計(jì)框架下具有多個(gè)品牌的站點(diǎn)），使用模塊化方法并將CSS拆分為多個(gè)文件更為明智。 跨文件拆分CSS可以更輕松地將任務(wù)打包給團(tuán)隊(duì)。一個(gè)開發(fā)人員可以處理與排版相關(guān)的樣式，而另一個(gè)開發(fā)人員可以專注于開發(fā)網(wǎng)格組件。團(tuán)隊(duì)可以合理地分工并提高整體生產(chǎn)率。 這是一個(gè)虛擬的CSS結(jié)構(gòu)： reset.css：重置和規(guī)范化樣式；顏色，邊框或字體相關(guān)的聲明 typography.css：標(biāo)題和正文文本的字體，粗細(xì)，行高，大小和樣式 layouts.css：管理頁面布局和分段（包括網(wǎng)格）的樣式 forms.css：表單控件和標(biāo)簽的樣式 list.css：特定于列表的樣式 table.css：表格專用樣式 carousel.css：輪播組件所需的樣式 accordion.css：手風(fēng)琴組件的樣式 Q43、什么是function/mixins？ 函數(shù)是返回任何Sass數(shù)據(jù)類型的單個(gè)值的代碼塊。 mixins非常類似的函數(shù)。兩者之間的主要區(qū)別在于，Sass代碼的mixins輸出行將直接編譯為CSS樣式，而函數(shù)返回的值隨后可以成為CSS屬性的值，或者變?yōu)榭梢詡鬟f給另一個(gè)函數(shù)或mixin的值。 Q44、CSS在后臺(tái)如何運(yùn)行 瀏覽器顯示文檔時(shí)，必須將文檔的內(nèi)容與其樣式信息結(jié)合在一起。它分兩個(gè)階段處理文檔： 瀏覽器將HTML和CSS轉(zhuǎn)換為DOM（文檔對象模型）。DOM表示計(jì)算機(jī)內(nèi)存中的文檔。它結(jié)合了文檔的內(nèi)容和樣式。 瀏覽器顯示DOM的內(nèi)容。 Q45、推薦一種優(yōu)化打印頁面的方法？ 創(chuàng)建可打印頁面的秘訣是能夠識(shí)別和控制您網(wǎng)站的“內(nèi)容區(qū)域”。大多數(shù)網(wǎng)站由頁眉，頁腳，側(cè)邊欄/子導(dǎo)航和一個(gè)主要內(nèi)容區(qū)域組成。控制內(nèi)容區(qū)域，您的大部分工作就完成了。以下是在不改變網(wǎng)站完整性的情況下征服印刷媒體的提示。 創(chuàng)建用于打印的樣式表 避免不必要的HTML表格 知道頁面的哪些部分沒有任何打印價(jià)值 使用分頁符 調(diào)整頁面大小以進(jìn)行打印–最大高度等 總結(jié)
以上是生活随笔 為你收集整理的面试题整理 | 45道CSS面试题 的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔 網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔 推薦給好友。
