【CSS】

圣杯布局和雙飛翼布局的理解和區別，并用代碼實現

一： section{height: 100%; overflow: hidden;clear:both; } .left{ height: 100%;float:left;width:30%;background: #f00; } .right{ height: 100%;float:right;width:30%; background: #0f0; } .center{ height: 100%;background: #00f;}二： section{ height: 100%;display: flex;justify-content: center;align-items: center;} .left{ height: 100%;flex-basis: 30%;background: #f00; } .right{ height: 100%;flex-basis: 30%;background: #0f0; } .center{ height: 100%;background: #00f; }三： section{ height: 100%;position: relative;} .left{ height: 100%;width: 30%;background: #f00;position: absolute;left:0;top:0; } .right{ height: 100%;width: 30%;background: #0f0;position: absolute;right:0;top:0; } .center{ height: 100%;background: #00f;margin:0 30%; }

CSS3有哪些新增的特性？?

邊框圓角border-radius盒子陰影box-shadow文字陰影text-shadow2d、3d變換transformrotate()scale()skew()translate()過度動畫transition自定義動畫animation(只記得這些了)

在頁面上隱藏元素的方法有哪些？?

position配合z-index; 或者 left/top/bottom/right ： -100%；margin-left: -100%;width: 0; height: 0; overflow: hidden;這個算嗎opacity: 0;display:none;transform: scale(0)/translateX(+-100%)/translateY(+-100%)/rotateX(90deg);filter: opacity(0);

CSS選擇器有哪些？哪些屬性可以繼承？

選擇器通配符idclass標簽后代選擇器子選擇器兄弟選擇器屬性選擇器偽類選擇器偽元素選擇器可以繼承的屬性font-sizefont-weightfont-stylefont-familycolor

CSS3新增偽類有哪些并簡要描述?

用css創建一個三角形，并簡述原理?

width: 0;height: 0;margin: 100px auto;border-top: 50px solid transparent;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 50px solid red;

簡述你對BFC規范的理解?

是CSS中的一個渲染機制，BFC就相當于一個盒子，內部的元素與外界的元素互不干擾。它不會影響外部的布局，外部的布局也不會影響到它。形成條件（任意一條）float的值不是noneposition 的值不是static或者relativedisplay的值是inline-block,table-cell,flex,table-caption或者inline-flexoverflow的值不是visible特性內部的盒子會在垂直方向上一個接一個的放置對于同一個BFC的倆個相鄰的盒子的margin會發生重疊，與方向無關。每個元素的左外邊距與包含塊的左邊界相接觸（從左到右），即使浮動元素也是如此BFC的區域不會與float的元素區域重疊計算BFC的高度時，浮動子元素也參與計算BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，反之亦然

清除浮動的方式有哪些及優缺點？?

什么是盒子塌陷？ 外部盒子本應該包裹住內部的浮動盒子，結果卻沒有。問題出現的原因 父元素只包含浮動元素，那么它的高度就會塌縮為零（前提就是你們沒有設置高度（height）屬性，或者設置了為auto，就會出現這種情況，如果父元素不包含任何的可見背景，這個問題會很難被注意到。 因為子元素設置了float屬性，而float屬性會把元素從標準文檔流中抽離，直接結果就是外部盒子丟了兩個孩子，因為內部沒有其它盒子了，所以外部盒子只包裹文本節點內容，卻把兩個內部盒子扔在外面了。解決方案上面分析了問題出現的原因，不難找到第一種解決方案（既然孩子丟了，那就去找唄）——給外部盒子也添加浮動把外部盒子也從標準文檔流中抽離，讓它和孩子們見面。 缺點：可讀性差，不易于維護（別人很難理解為什么要給父元素也添上float），而且可能需要調整整個頁面布局。在外部盒子內最下方添上帶clear屬性的空盒子可以是div也可以是其它塊級元素，把 <div style="clear:both;"></div>放在盒內底部，用最下面的空盒子清除浮動，把盒子重新撐起來。 缺點：引入了冗余元素用overflow:hidden清除浮動給外部盒子添上這個屬性就好了，非常簡單。缺點：有可能造成溢出元素不可見，影響展示效果。用after偽元素清除浮動給外部盒子的after偽元素設置clear屬性，再隱藏它這其實是對空盒子方案的改進，一種純CSS的解決方案，不用引入冗余元素。.clearfix {*zoom: 1;} .clearfix:before,.clearfix:after {display: table;line-height: 0;content: "";} .clearfix:after {clear: both;}這也是bootstrap框架采用的清除浮動的方法。題外話其實還有一種最直接的辦法：給每個盒子規定width和height，要多大給多大即可。但這并不算什么解決方案，因為這樣的布局不是內容自適應的，但如果頁面內容極少發生變動，這也是一個不錯的方案，因為它的兼容性是毋庸置疑的。

簡述下你理解的優雅降級和漸進增強?

優雅降級，先做好一個完善的具備完整體驗的版本，再向下做兼容。 漸進增強，先做好一個可以基本正常使用的版本，再慢慢豐富體驗和內容。

?對比下px、em、rem有什么不同？?

px是css中的邏輯像素，和移動端的物理像素之間會有一個比值dpr em是指相對于父元素的大小 rem中的r就是root，也就是相對于root元素的大小（html標簽）

?css常用的布局方式有哪些？?

1：圣杯布局 2：雙飛翼 3：flex

?::before和:after中單冒號和雙冒號的區別是什么，這兩個偽元素有什么作用？

區別：偽元素在css1中已經存在當時用單冒號，css3時做了修訂用雙冒號 ::before ::after表示偽元素用來區別偽類。作用：在元素前面（::before）和后面（::after）加內容

說說你對css盒子模型的理解?

css盒模型由兩個盒子組成，外在的控制是否換行的盒子，以及內在的控制元素內容的盒子。比如：display: inline-block, 則它的外在的盒子就是inline也就是不占據一行，而block則表示內部的元素具有塊狀特性。所以，display: inline其實就是display: inline-inline的縮寫，display: block就是display: block-block的縮寫。每一個內在的盒子有: width/height, padding, border, margin這幾個控制盒子大小的屬性。其中 width/height控制元素內容大小，padding則控制元素內容到border線內側距離，border則是元素外圍邊框大小，而margin則是控制與其他元素的間距，它的背景透明。對于早期，計算一個元素的占據大小，需要通過width +2* padding + 2*border來計算，css3中提出了box-sizing：border-box，通過這樣設置，就可以使元素最終的寬高就是設定的width/height, 瀏覽器會根據width/height, padding, border的大小來自動調整內部元素的大小。

style標簽寫在body前和body后的區別是什么？

渲染機制的區別，在body前是已經把樣式瀏覽一遍，到了對應標簽直接，渲染樣式。顯示塊。 在body后，是瀏覽器已經把標簽瀏覽了，但基于沒有樣式，顯示的不完全，再把body后的樣式表，掃描后，在成為真正的樣式。會慢，遇到大型網站，效果更差，這都基于瀏覽器從上而小的瀏覽機制導致的。

請描述margin邊界疊加是什么及解決方案

1，使用padding代替，但是父盒子要減去相應的高度 2，使用boder（透明）代替（不推薦，不符合書寫規范，如果父盒子子盒子時有顏色的不好處理） 3，給父盒子設置overflow：hidden(如果有移除元素無法使用) 4，給父盒子設置1px的padding 5，給父盒子設置1px的透明border，高度減1px 6，子盒子使用定位position 7，子盒子浮動, 但是居中比較難以控制 8，給子盒子設置display: inline-block; 9，子盒子上面放一個table標簽

?解釋下 CSS sprites的原理和優缺點分別是什么

我來說下我的觀點 原理： 多張圖合并成一張圖優點&解決的問題hover效果，如果是多個圖片，網絡正常的情況下首次會閃爍一下。如果是斷網情況下，就沒圖片了。sprites 就很好的解決了這個問題（第一次就加載好了）。合并了請求數制作幀動畫方便缺點位置不好控制，有時候容易露底。。比如說3030的按鈕，圖片只有1212保不齊就漏出其他圖片了。合成時候比較費時（有工具代替）位置計算費時（有工具代替）更新一部分的時候，需要重新加載整個圖片，緩存失效。

什么是FOUC？你是如何避免FOUC的？?

FOUC 即 Flash of Unstyled Content，是指頁面一開始以樣式 A（或無樣式）的渲染，突然變成樣式B。 原因是樣式表的晚于 HTML 加載導致頁面重新進行繪制。通過 @import 方式導入樣式表style 標簽在 body 中解決方法：把 link 標簽將樣式放在 head 中

css的屬性content有什么作用呢？有哪些場景可以用到？?

content屬性與 ::before 及 ::after 偽元素配合使用生成文本內容通過attr()將選擇器對象的屬性作為字符串進行顯示，如：a::after{content: attr(href)} <a href="http://www.baidu.com">a標簽的href的值是：</a> 結果：a標簽的href的值是：http://www.baidu.com

要讓Chrome支持小于12px的文字怎么做？

1, 改用圖片 2, 使用 -webkit-text-size-adjust:none; 但是不支持chrome 27.0以上版本 3, 使用 transform: scale( )縮小 暫時不知道更多方法了

說說你對line-height是如何理解的？?

line-height 行高，就是兩行文字之間基線的距離，用來調整文字的行間距。

說說瀏覽器解析CSS選擇器的過程？

按照從上到下，從右到左的順序解析。

說說CSS的優先級是如何計算的？?

選擇器種類嚴格來講，選擇器的種類可以分為三種：標簽名選擇器、類選擇器和ID選擇器。而所謂的后代選擇器和群組選擇器只不過是對前三種選擇器的擴展應用。而 在標簽內寫入 style="" 的方式，應該是CSS的一種引入方式，而不是選擇器，因為根本就沒有用到選擇器。而一般人們將上面這幾種方式結合在一起，所 以就有了5種或6種選擇器了。三種基本的選擇器類型 語法如下： ◆標簽名選擇器，如：p{}，即直接使用HTML標簽作為選擇器。 ◆類選擇器，如.polaris{}。 ◆ID選擇器，如#polaris{}。偽類，屬性選擇器特指度等同于類 偽元素特指度等同于標簽名選擇器擴展選擇器 ◆后代選擇器，如 .polaris span img{}，后代選賊器實際上是使用多個選擇器加上中間的空格來找到具體的要控制標簽。 ◆群組選擇器，如 div,span,img{}，群組選擇器實際上是對CSS的一種簡化寫法，只不過把有相同定義的不同選擇器放在一起，省了很多代碼。 特指度-優先級計算我們需要引入一個概念——特指度（specificity）。特指度表示一個css選擇器表達式的重要程度，可以通過一個公式來計算出一個數值，數越大，越重要。 這個計算叫做“I-C-E”計算公式，I——Id； C——Class； E——Element；即，針對一個css選擇器表達式，遇到一個id就往特指度數值中加100，遇到一個class就往特指度數值中加10，遇到一個element就往特指度數值中加1。下面舉幾個css表達式的特指度計算結果，大家也自己算一算，是不是對的： 這里寫圖片描述還有一個重點要注意：!important 優先級最高，高于上面一切。* 選擇器最低，低于一切。 后代選擇器的定位原則在這里介紹一下對于后代選擇器，瀏覽器是如何查找元素的呢？瀏覽器CSS匹配不是從左到右進行查找，而是從右到左進行查找。比如div#divBox p span.red{color:red;}，瀏覽器的查找順序如下：先查找html中所有 class='red' 的 span 元素，找到后，再查找其父輩元素中是否有 p 元素，再判斷 p 的父元素中是否有 id 為 divBox 的 div 元素，如果都存在則匹配上。 瀏覽器從右到左進行查找的好處是為了盡早過濾掉一些無關的樣式規則和元素。 簡潔、高效的CSS所謂高效的CSS就是讓瀏覽器在查找style匹配的元素的時候盡量進行少的查找，下面列出一些我們常見的寫CSS犯一些低效錯誤：◆不要在ID選擇器前使用標簽名 一般寫法：div#divBox 更好寫法：#divBox 解釋： 因為ID選擇器是唯一的，加上 div 反而增加不必要的匹配。◆不要再class選擇器前使用標簽名 一般寫法：span.red 更好寫法：.red 解釋：同第一條，但如果你定義了多個.red，而且在不同的元素下是樣式不一樣，則不能去掉，比如你css文件中定義如下：p.red{color:red;} span.red{color:#ff00ff} 如果是這樣定義的就不要去掉，去掉后就會混淆，不過建議最好不要這樣寫。◆盡量少使用層級關系 一般寫法：#divBox p .red{color:red;} 更好寫法：.red{..}◆使用class代替層級關系 一般寫法：#divBox ul li a{display:block;} 更好寫法：.block{display:block;}

你有用過CSS預處理器嗎？喜歡用哪個？原理是什么？

它能讓你的CSS具備更加簡潔、適應性更強、可讀性更強、層級關系更加明顯、更易于代碼的維護等諸多好處。 CSS預處理器種類繁多，目前Sass、Less、用的比較多。 使用功能： 1、嵌套：反映層級和約束 2、變量和計算： 減少重復代碼 3、Extend 和 Mixin 代碼片段 (用的少) 4、循環：適用于復雜有規律的樣式 5、import css 文件模塊化 具體使用方法 均可百度

在頁面中的應該使用奇數還是偶數的字體？為什么呢？

? ? 常用偶數號字體,但奇數號字體也沒關系,例如 知乎正文使用15px字體,豆瓣電影使用13px字體UI設計師導出的設計稿一般都是偶數號字體偶數字號容易和頁面其他標簽的其他屬性形成比例關系Windows 自帶的點陣宋體（中易宋體）從 Vista 開始只提供 12、14、16 px 這三個大小的點陣，而 13、15、17 px 時用的是小一號的點陣（即每個字占的空間大了 1 px，但點陣沒變），于是略顯稀疏。(沒試過)

?說說你對z-index的理解

層疊 就是Z軸的方向的位置，值越大離屏幕前的你越近，反之亦然。可以為負數

怎樣修改chrome記住密碼后自動填充表單的黃色背景？

input:-webkit-autofill { -webkit-box-shadow: 0 0 3px 100px #eee inset; //改變填充背景色 }

rgba()和opacity這兩個的透明效果有什么區別呢？?

1.opacity 是屬性，rgba()是函數，計算之后是個屬性值； 2.opacity 作用于元素和元素的內容，內容會繼承元素的透明度，取值0-1； 3.rgba() 一般作為背景色 background-color 或者顏色 color 的屬性值，透明度由其中的 alpha 值生效，取值0-1；擴展： 1.transparent 也是透明，是個屬性值，顏色值，跟#000是一類，不過它是關鍵字來描述。 2.如何隱藏一個元素？

請描述css的權重計算規則?

權重值計算
選擇器 案例 權重值
!important !important Infinity
內聯樣式 style="…" 1000
ID #id 100
class .class 10
屬性 [type=‘text’] 10
偽類 :hover 10
標簽 p 1
偽元素 ::first-line 1
相鄰選擇器、子代選擇器、通配符 * > + 0
比較規則

1000>100。也就是說從左往右逐個等級比較，前一等級相等才往后比。 在權重相同的情況下，后面的樣式會覆蓋掉前面的樣式。 繼承屬性沒有權重值 通配符、子選擇器、相鄰選擇器等的。雖然權值為0，但是也比繼承的樣式優先。 ie6以上才支持important，并且盡量少用它。

描述下你所了解的圖片格式及使用場景?

通常網頁在顯示的圖片（圖形）的時候，有以下幾種格式：GIF、PNG、JPG、SVG，還有個比較新的WebP格式。▍GIF優點：GIF是動態的；支持無損耗壓縮和透明度。缺點：的詳細的圖片和寫實攝影圖像會丟失顏色信息；在大多數情況下，無損耗壓縮效果不如 JPEG 格式或 PNG 格式；GIF 支持有限的透明度，沒有半透明效果或褪色效果。適用場景：主要用于比較小的動態圖標。▍PNG優點：PNG格式圖片是無損壓縮的圖片，能在保證最不失真的情況下盡可能壓縮圖像文件的大小；圖片質量高；色彩表現好；支持透明效果；提供鋒利的線條和邊緣，所以做出的logo等小圖標效果會更好；更好地展示文字、顏色相近的圖片。缺點：占內存大,會導致網頁加載速度慢；對于需要高保真的較復雜的圖像，PNG雖然能無損壓縮，但圖片文件較大，不適合應用在Web頁面上。適用場景：主要用于小圖標或顏色簡單對比強烈的小的背景圖。▍JPG優點：占用內存小，網頁加載速度快。缺點：JPG格式圖片是有損壓縮的圖片，有損壓縮會使原始圖片數據質量下降，即JPG會在壓縮圖片時降低品質。適用場景：由于這種格式圖片對色彩表現比較好，所以適用于色彩豐富的圖片。主要用于攝影作品或者大的背景圖等。不合適文字比較多的圖片。▍SVG優點：SVG是矢量圖形，不受像素影響，在不同平臺上都表現良好；可以通過JS控制實現動畫效果。缺點：DOM比正常的圖形慢，而且如果其結點多而雜，就更慢；不能與HTML內容集成。適用場景：主要用于設計模型的展示等。▍WebP優點：WebP格式，谷歌（google）開發的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3，并能節省大量的服務器寬帶資源和數據空間。缺點：相較編碼JPEG文件，編碼同樣質量的WebP文件需要占用更多的計算資源。適用場景：WebP既支持有損壓縮也支持無損壓縮。將來可能是JPEG的代替品。

讓網頁的字體變得清晰，變細用CSS怎么做？?

全家桶：-webkit-font-smoothing: antialiased -moz-osx-font-smoothing: grayscale text-shadow: 1px 1px 1px 1px rgba(0,0,0,0.005) text-rendering: optimizeLegibility

說下line-height三種賦值方式有何區別？?

line-height 可以有帶單位及不帶單位的寫法（感覺其實是兩種）。div{line-height: 24px;line-height: 1.5;line-height: 1.5em;line-height: 150%; }對于應用在單個元素上，這幾種寫法的效果都是一樣的（除了 px 需要一些計算）。但由于 line-height 是可以被繼承的，因此會影響內部子元素的 line-height。簡單的可以總結為：帶有單位的 line-height 會被計算成 px 后繼承。子元素的 line-height = 父元素的 line-height * font-size （如果是 px 了就直接繼承）而不帶單位的 line-height 被繼承的是倍數，子元素的 line-height = 子元素的 font-size * 繼承的倍數

用CSS繪制一個三角形

.triangle{width: 0;border-bottom: 35px solid lightgreen;border-left: 35px solid transparent;}wrong.triangle{width: 0;border: 35px solid transparent;border-bottom: 35px solid lightgreen; }

瀏覽器是怎樣判斷元素是否和某個CSS選擇器匹配？?

有選擇器： div.ready #wrapper > .bg-red 先把所有元素 class 中有 bg-red 的元素拿出來組成一個集合，然后上一層，對每一個集合中的元素，如果元素的 parent id 不為 #wrapper 則把元素從集合中刪去。 再向上，從這個元素的父元素開始向上找，沒有找到一個 tagName 為 div 且 class 中有 ready 的元素，就把原來的元素從集合中刪去。 至此這個選擇器匹配結束，所有還在集合中的元素滿足。大體就是這樣，不過瀏覽器還會有一些奇怪的優化。 如圖： 11558321348_ pic 注意：1、為什么從后往前匹配因為效率和文檔流的解析方向。效率不必說，找元素的父親和之前的兄弟比遍歷所喲兒子快而且方便。關于文檔流的解析方向，是因為現在的 CSS，一個元素只要確定了這個元素在文檔流之前出現過的所有元素，就能確定他的匹配情況；應用在即使 html 沒有載入完成，瀏覽器也能根據已經載入的這一部分信息完全確定出現過的元素的屬性。2、為什么是用集合主要也還是效率。基于 CSS Rule 數量遠遠小于元素數量的假設和索引的運用，遍歷每一條 CSS Rule 通過集合篩選，比遍歷每一個元素再遍歷每一條 Rule 匹配要快得多。

使用flex實現三欄布局，兩邊固定，中間自適應?

同意里面的一個回答，現在有很多簡單的實現方式，傳統的這個也是一種hack的方式，真的沒必要去追究了，但是核心知識點可以掌握。1.把 center 放在最前面，優先渲染 2.相對定位 relative 也是可以設置 left,right等值的 3.margin 負值的了解和使用 4.float 真的不建議使用現在的flex/grid很輕松就能實現，甚至絕對定位也是很容易實現也更容易理解。

寫出主流瀏覽器內核私有屬性的css前綴?

完善一下： Chrome：Blink內核 -webkit-Safari：WebKit內核 -webkit-Firefox ：Gecko內核 -moz-IE：Trident內核 -ms-Opera：Presto內核 -o-

不使用border畫出1px高的線，在不同瀏覽器的標準和怪異模式下都能保持效果一樣?

<div style="width: 100%;height: 1px;"></div><hr size="1">

實現單行文本居中和多行文本左對齊并超出顯示"…"?

.one {text-align: center }.multi {overflow: hiddentext-overflow: ellipsisdisplay: -webkit-box-webkit-line-clamp: 3-webkit-box-orient: vertical }可惜多行文本省略, 有嚴重的兼容性問題

怎么才能讓圖文不可復制？?

-webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; user-select: none;

怎么讓英文單詞的首字母大寫？?

樓上用的沒問題，學習嘛，那我就來擴展一下。text-transform 屬性控制文本的大小寫，是CSS2.1的屬性，兼容性問題不大。 屬性值是關鍵字，有4+1種，這個1是實驗性屬性值。/* Keyword values */ text-transform: capitalize; text-transform: uppercase; text-transform: lowercase; text-transform: none; text-transform: full-width;capitalize 這個關鍵字強制每個單詞的首字母轉換為大寫。uppercase 這個關鍵字強制所有字符被轉換為大寫。lowercase 這個關鍵字強制所有字符被轉換為小寫。none 這個關鍵字阻止所有字符的大小寫被轉換。full-width （實驗性屬性值） 這個關鍵字強制字符 — 主要是表意字符和拉丁文字 — 書寫進一個方形里，并允許它們按照一般的東亞文字（比如中文或日文）對齊。除了以上，還有一些基本上不會用到的默認值等，就不多說了。/* Global values */ text-transform: inherit; text-transform: initial; text-transform: unset;

重置（初始化）css的作用是什么？?

這是一個，還有就是視覺問題，瀏覽器默認樣式會影響我們的設計還原，而且默認樣式一般不夠美觀，滿足不了定制化的視覺需求，達不到視覺產品的信息傳達目標。

span與span之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？?

可能是設置成了inline-block。 第一種解決方案是，去掉span標簽內的空白。 第二種解決方案是，設置margin負值，但要根據字體調整，不方便大規模使用。

手寫一個滿屏品字布局的方案?

<!DOCTYPE html> <html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta charset="UTF-8"><link rel="stylesheet" href="style.css"></head><body><article class="container"><div class="firstRow"><div class="item"></div></div><div class="secondRow"><div class="item"></div><div class="item"></div></div></article></body> </html>//style.css html, body{height: 100%;margin: 0;padding: 0; }.container {display: flex;flex-direction: column;flex-wrap: wrap;width: 100%;height: 100%; }.firstRow, .secondRow {width: 100%;height: 30%;display: flex;flex-direction: row;justify-content: center;margin: 10px 0; }.item {background-color: red;width: 40%;height: 100%;margin: 0 auto;border-radius: 10%; }

你知道的等高布局有多少種？寫出來?

flex拉伸display: flex; align-items: stretch;padding margin抵消 然后background-clip默認是border-box所以會在被抵消的位置依然顯示背景 造成等高假象.box,.box2{float: left;width: 100px; } .box {background: #cccccc;height: 300px; } .box2 {background: #306eff;padding-bottom: 99999px;margin-bottom: -99999px; }

說說你對媒體查詢的理解?

當年做響應式布局的時候用過媒介查詢，media query。包括現在有的時候為了兼容也會用到一些，查找對應范圍使用不同的樣式

你是怎樣抽離樣式模塊的？?

說的是 webpack + extract-text-webpack-plugin插件吧？ 把樣式文件單獨打包出來。 webpack4 升級了插件為 mini-css-extract-plugin

你知道全屏滾動的原理是什么嗎？它用到了CSS的哪些屬性？?

全屏滾動和輪播圖類似，都是通過改變元素位置或者顯示與隱藏來實現，配合JS的一些交互距離判斷，實現類似原生滾動捕獲的效果。這里全屏的話就需要將寬高都設置為窗口的大小，可以通過百分百實現。 關鍵CSS屬性是父容器 overflow: hidden; 。 實現全屏滾動還可以簡單的通過插件來實現，比如fullpage，很多大公司的頁面都是用這個實現的，比如小米一些產品的官網。

假如設計稿使用了非標準的字體，你該如何去實現它？?

協商解決, 如果是重要信息, 如logo等, 使用圖片, iconfont.

?列舉CSS優化、提高性能的方法

加載性能壓縮CSS通過link方式加載，而不是@import復合屬性其實分開寫，執行效率更高，因為CSS最終也還是要去解析如 margin-left: left;選擇器性能盡量少的使用嵌套，可以采用BEM的方式來解決命名沖突盡量少甚至是不使用標簽選擇器，這個性能實在是差，同樣的還有*選擇器利用繼承，減少代碼量渲染性能慎重使用高性能屬性：浮動、定位；盡量減少頁面重排、重繪；css雪碧圖自定義web字體，盡量少用盡量減少使用昂貴屬性，如box-shadow/border-radius/filter/透明度/:nth-child等使用transform來變換而不是寬高等會造成重繪的屬性暫且先這樣吧，看來想回答好，得好好梳理下了。

如何實現換膚功能？?

css 換膚常見方案 是通過 less/sass/postcss 等css 預處理器，通過它們自身的變量用法，設置不同變量，生成不同的主題樣式，但是這些樣式都是會被打包成常量，我們只能在編譯之前修改變量，打包出對應的css 文件。而如今出現了 css var 。此種變量是可以通過 js 改變變量值的。 demo 一般的插件在編譯 css 時會將變量打包成常量，但是 postcss 有一個插件 postcss-advanced-variables 是支持直接打包為 css 變量的。 這將意味著我們可以僅僅覆蓋 css 變量，或者 js 修改變量值都能改變主題色。 這里介紹一個成熟的打包變量插件，postcss-ui-theme (一波軟廣🤣， 支持 sass 語法， bem 規范命令，resolve 靜態資源等強大功能。是自己非常成熟的沉淀物)打包的代碼如圖

?有用過Flex嗎？簡要說下你對它的了解

給我感觸最深的只有兩點方便/好用子元素超出的bug關于bug, 大家有什么好的解決方案, 除了overflow: hidden

要是position跟display、overflow、float這些特性相互疊加后會怎么樣？?

display:none之后別的樣式設置成什么都不管用了，dom元素不可見了。position:absolute之后float應該就不起作用了

怎么使用自定義字體？有什么注意事項？?

@font-face { font-family: '自定義字體名稱'; src: url('字體文件名.eot'); /* IE9 Compat Modes / src: url('字體文件名.eot?#iefix') format('embedded-opentype'), / IE6-IE8 / url('字體文件名.woff') format('woff'), / Modern Browsers / url('字體文件名.ttf') format('truetype'), / Safari, Android, iOS / url('字體文件名.svg#字體文件名') format('svg'); / Legacy iOS */ font-style: normal; font-weight: normal; }

css3的:nth-child和:nth-of-type的區別是什么？?

:nth-child(n) 選擇器匹配屬于其父元素的第 N 個子元素，不論元素的類型。 :nth-of-type(n) 選擇器匹配屬于父元素的特定類型的第 N 個子元素。 n 可以是數字、關鍵詞或公式。

什么是視差滾動？如何實現視差滾動的效果？?

什么是視差滾動： 就是在同一視角下，鼠標或者頁面滾動時，不同元素以不同的速率跟隨滾動，產生生動的效果。 如何實現視差滾動： 根據頁面滾動高度的變化，JS相應調整不同元素的不同位移，常見的插件有 parallax.js，

margin和padding使用的場景有哪些？?

實現自適應的等比例矩形效果： div { padding: 50%; } div { padding: 25% 50%; } //寬高比為 2:1 的矩形效果實現頭圖高度天然等比例縮小效果 .box { padding: 10% 50%; position: relative; } .box > img { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }padding 屬性和 background-clip 屬性配合，可以在有限的標簽下實現一些 CSS 圖形繪制效果margin 可以實現很多流體布局 margin 外部尺寸實現等高布局 實現垂直居中布局from《css世界》

inline、block、inline-block這三個屬性值有什么區別？?

inline： 行內元素，元素不獨占一行，不可以修改寬高 block： 塊級元素，元素獨占一行，可以修改寬高 inline-block： 行內塊級元素，元素不獨占一行，并且可以修改寬高

box-sizing常用的屬性有哪些？分別有什么作用？?

box-sizing常用的屬性有 content-box 和 border-box。content-box 盒子的寬度不包含 border和padding，border-box盒子的寬度包含border 和padding。

你有用過哪些css框架？說說它們的特點?

bootstrap 不夠全，所以后來基本都是借鑒思路取長補短自己寫的 css 類庫或原子類庫。 animate.css 用起來很爽，主要用于滾動和小動效。過渡動畫當然還是 clip.js 來弄的。 Tent CSS，WeUI，amazeUI 我個人用起來很不舒服，改起來麻煩，除非設計直接選用該風格。至于 elementUI，antDesign，vantUI，mintUI 這些就是組件庫了，需要集成 vue 或 react， 基本采用該庫那多半 UI 風格就已經定下了，而且真正來講更講究組件功能性，布局影響并不很大。首先我觀念中的 UI 庫可以拆為 初始化類庫、原子類庫、常見布局類庫、組件類庫。初始化類庫，好像現在都不怎么講究了， 一方面是 select 都在用 ul 去做了，那基本沒啥樣式差異， 另一方面是做兼容的需求沒以往那么多了，比如 input[type="range"] 樣式就那樣也說得過去。 其次，初始化也有一定的個人色彩，比如 p 要不要加 margin 、img 要 block 等問題。原子類庫，在使用 less 等 css 編譯項目中非常非常爽， 配色呀、單位與間距呀、文本超出呀、禁用呀、滾動呀等等。常見布局類庫，多數情況是多個 dom 元素搭配的結果， 比如 .flex-col 往往會有個 .flex-grow 與其相隨，.modal 總會有個 .modal-wrap 等。組件類庫，和常見布局類庫是十分相似的，但有更棒的拆分規則而已。以上，所以我個人觀念中，撇開組件庫不談， UI 庫是換個項目也能復用的工具，css 庫越小越原子化才是最棒的。

用css畫一個太陽?

// css.sun {margin: 200px;width: 200px;height: 200px;border-radius: 50%;background: red;box-shadow: 0 0 21px #fe9e9e;position: relative;}// ::before & ::after 輔助.sun::before {width: 0;height: 500px;content: '';border-left: 1px solid blue;position: absolute;top: -150px;left: 100px;z-index: 100;transform: rotate(45deg);}.sun::after {width: 500px;height: 0;content: '';border-top: 1px solid blue;position: absolute;top: 100px;left: -150px;z-index: 100;transform: rotate(45deg);}// 光線的寬高據 sun-body 而動.sun-light {width: 100px;height: 6px;background: yellow;position: absolute;left: 0;top: 0;}.sl1 {left: 50px;top: -58px;transform: rotate(90deg);}.sl2 {top: -14px;left: 160px;transform: rotate(-45deg);}.sl3 {top: 97px;left: 205px;}.sl4 {top: 206px;left: 160px;transform: rotate(45deg);}.sl5 {top: 252px;left: 50px;transform: rotate(90deg);}.sl6 {top: 206px;left: -60px;transform: rotate(-45deg);}.sl7 {top: 97px;left: -105px;}.sl8 {top: -14px;left: -60px;transform: rotate(45deg);}<!-- html --><div class="sun"><div class="sun-light sl1"></div><div class="sun-light sl2"></div><div class="sun-light sl3"></div><div class="sun-light sl4"></div><div class="sun-light sl5"></div><div class="sun-light sl6"></div><div class="sun-light sl7"></div><div class="sun-light sl8"></div></div>

怎樣把一個div居中？怎樣把一個浮動元素居中？怎樣把絕對定位的div居中？?

主要用到:text-alin: center;margin: 0 auto;position: relative | absolute; left: 50%;vertical-align: middle;transform: translate(-50%);

手動寫動畫最小時間間隔是多少，為什么？?

一般瀏覽器的刷新頻率為每秒60次，所以最小事件間隔為 1/60*1000 約 16.7ms

說說position的absolute和fixed共同與不同點分別是什么？?

相同點： 1、都是用來給元素定位的屬性，具有定位元素的一切特點（例如脫離文本流、不占據空間等等）； 2、改變元素的呈現方式為display：block； 不同點： 1、fixed的父元素永遠是瀏覽器窗口，不會根據頁面滾動而改變位置；absolute的父元素是可以設置的，他會永遠跟隨父元素的位置的改變而改變。

舉例說明css中顏色的表示方法有幾種?

顏色單詞: blue / lightblue / skyblue / transparent(透明)rgb(0-255, 0-255, 0-255) / rgba(0-255, 0-255, 0-255, 0-1)hsl色相: hsl(色調，飽和度，明度) hsla( 色調，飽和度，亮度，不透明度 ) (兼容性)十六進制: #000000- #FFFFFF ( #000 - #fff ) ( 0-9 a-f | [A-F] )

用CSS繪制一個紅色的愛心?

// 用過 就給貼過來了.heart {position: relative;width: 100px;height: 90px;}.heart:before,.heart:after {position: absolute;content: "";left: 50px;top: 0;width: 50px;height: 80px;background: red;border-radius: 50px 50px 0 0;transform: rotate(-45deg);transform-origin: 0 100%;}.heart:after {left: 0;transform: rotate(45deg);transform-origin: 100% 100%;}

元素豎向的百分比設置是相對容器的高度嗎？?

父級非 auto 的 height 時，子級百分比的 height 才有效。 即使父級有 min-height 或其他子級撐起的高度，子級百分比 height 依舊無效。

如何消除transition閃屏？?

題目越簡單越有含量。 看題意不知道在問什么，說明這個問題自己沒注意或不熟悉，而不是去懷疑題目出的有問題。這個問題自己沒有遇到過，或者說沒有注意過這個問題，網上搜索了下答案，不知道有沒有效果，下次遇到這個問題就可以往這方面排查和思考了：.css { -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; }

說說你對jpg、png、gif的理解，分別在什么場景下使用？有使用過webp嗎？?

jpg, 色彩復雜圖片 png, 色彩簡單圖片 gif, 動圖, 或者色彩極簡的icon等 webp, 判斷能使用webp的瀏覽器就是用webp

請說說*{box-sizing: border-box;}的作用及好處有哪些？?

還是喜歡用默認的content-box 不考慮老版ie 比較通配符的性能較差 第三方的UI庫的盒模型也都是標準盒模型

你有使用過哪些柵格系統？都有什么區別呢？?

bootstrap3 float完成的柵格 bootstrap4 flex完成的柵格

你對響應式設計的理解是什么？知道它基本的原理是嗎？要想兼容低版本的IE怎么做呢？?

理解：在不同系統，不同設備，不同尺寸的界面，有良好的用戶體驗，舒適的閱讀體驗，交互體驗。 原理：根據不同設備尺寸，瀏覽器自動調整或通過樣式調整，來保證用戶體驗。 兼容：Respond.js

怎么改變選中文本的文字顏色和背景色？?

::selection { background-color: #222; color: white; }

在實際編寫css中你有遇到過哪些瀏覽器兼容性的問題？怎么解決的？?

必用的三個工具PostCSSAutoprefixerBrowserslist

說說你對!important的理解，一般在哪些場景使用？?

!important 可以讓樣式的特指度最高，覆蓋任何樣式，而且本身不可被覆蓋。 一般場景就是用來強制覆蓋其他樣式，用的比較少，不建議使用，因為別人沒法覆蓋這個樣式，維護性比較。

請你解釋下什么是浮動和它的工作原理是什么？同時浮動會引起什么問題？

什么是浮動：我們在做布局的時候用到的一種技術，通過浮動可以讓元素左右浮動，然后通過margin調整位置工作原理：使元素脫離文檔流，讓元素可以左右浮動，直到遇到另一個浮動元素的邊緣才停止。帶來的問題：浮動元素會造成父級元素無法自動獲取高度，導致父級塌陷，布局錯亂。

請問display:inline-block在什么時候會顯示間隙？?

解決方法 1、全局font-size設置成0 2、 取消兩個div之間的空格

用CSS畫出一個任意角度的扇形，可以寫多種實現的方法?

先畫一個圓,外加兩個絕對定位的半圓 扇形可以通過兩個半圓作為遮罩旋轉來露出相應的角度實現 這只能切出180°以內的扇形 超過180°的扇形,就把圓作為底色,兩個遮罩作為扇形的組成部分不知道描述的好不好理解,但確實能實現任意角度的扇形了.contain {position: relative;width: 200px;height: 200px;}.main {height: 100%;background: lightgreen;border-radius: 100px;}.common {position: absolute;top: 0;width: 50%;height: 100%;}.mask1 {transform: rotate(83deg);border-radius: 100px 0 0 100px;left: 0;transform-origin: right center;background: red;}.mask2 {transform: rotate(-76deg);transform-origin: left center;left: 100px;border-radius: 0 100px 100px 0;background: blue;}HTML代碼<div class="contain"><div class="main"></div><div class="mask1 common"></div><div class="mask2 common"></div></div>

遇到overflow: scroll不能平滑滾動怎么解決？?

ipone 上解決方法是這樣的， -webkit-overflow-scrolling: touch;

說說你對BEM規范的理解，同時舉例說明常見的CSS規范有哪些？?

BEM是比較好的CSS規范，應該也是得到大家認可最多的CSS規范 OAMC是WeUI根據BEM改造來的 object-area-meta-control還有OOCSS，面向對象的CSS書寫規范。 不管哪種，解決問題，同時團隊大家共同維護遵守的，才是好的規范和執行。

寫例子說明如何強制（自動）中、英文換行與不換行?

word-break:break-all;只對英文起作用，以字母作為換行依據word-wrap:break-word; 只對英文起作用，以單詞作為換行依據white-space:pre-wrap; 只對中文起作用，強制換行white-space:nowrap; 強制不換行，都起作用white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不換行，超出部分隱藏且以省略號形式出現（部分瀏覽器支持）

舉例說明css的基本語句構成是什么呢？?

一個選擇器（例如：BODY，P等）和寫在花括號里的聲明，這些聲明通常是由幾組用分號分隔的屬性和值組成。 body{ color:red; }

寫出你遇到過IE6/7/8/9的BUG及解決方法?

把以前兼容IE6.7學習的東西搬出來了，還以為不見了。兼容性問題 1.IE6margin雙邊距問題 2.IE67 li間隙問題 3.圖片間隙問題——vertical-align：top 4.ie6下高度小于19px處理成19px；font-size:0;或者overflow：hidden 5.ie8以下濾鏡問題，filter:alpha(opacity=50) 6.IE6 position:fixed 不兼容，fixed定位ie6兼容，js處理，通過獲取滾動高度，賦值給需要固定的元素，設置絕對定位，設置top 7.ie6下父級的overflow：hidden是保不住子級的相對定位的（relative）-解決，給父級加定位 8.ie6下，絕對定位的父級，寬高是奇數的話，定位偏移會出現1px的偏差 9.ie6下，內容會撐開設置好的寬度 10.ie6，7 3px問題 11.<p><h3></h3></p>會把p元素分割成兩個，原因，嵌套的規范性，p需要嵌套inline元素 12.在ie6下，1px dotted #000 不兼容。精度問題，可以用背景平鋪 13.ie6下margin傳遞需要觸發haslayout，父級有邊框時，子元素margin值消失，解決辦法，觸發父級haslayout 14.ie6下當一行子元素占有的寬度之和與父級的寬度相差超過3px或者有不滿行狀態的時候，最后一行子元素的下margin就會失效 15.ie6下的文字溢出bug 條件1，子元素的寬度和父級的寬度相差小于3px的時候，2，兩個浮動元素中間有注釋或內聯元素——解決辦法：用div吧注釋或內聯元素包裹起來 16.ie6下，當浮動元素和絕對定位元素是并列關系的時候，絕對定位會消失，解決辦法：給定位元素外面包裹div 17.ie6，7下，輸入類型的表單控件上下各有1px的間隙——解決辦法：給input加浮動 18.ie6，7下，輸入類型的表單控件加border：none無效，還是會出現邊框——解決辦法：1，給border：0；2，重置input的背景 19.ie6，7下，輸入類型的表單控件輸入文字的時候，背景圖片會跟隨移動——解決辦法：把背景加給父級 20.處理ie6 png圖片兼容問題js插件，DD_belatedPNG.js,也可以用CSS濾鏡處理 a.css處理 b.微軟behavior擴展，下載iepngfix.htc c.js插件 21.css hack \9——IE10之前的瀏覽器解析，+，*——IE7包括IE7之前的瀏覽器解析， _ ——IE6包括IE6之前的IE瀏覽器 22.important兼容問題，在IE6下，在important后面加一條同樣的樣式，會破壞important優先級作用，按照默認的優先級順序來走 23.IE6 margin負值不兼容，處理，只要position：relative；這個解決方案在圣杯布局中有出現。圣杯布局，可以用position：absolute；來定位

IE(6/7/8/9/10/11/Edge)下的hack寫法分別有哪些？?

IE9以及<IE9: \9;IE8以及>IE8: \0;3.IE7以及<IE7: *;4.IE6:*或_;5.edge不清楚;

font-style的屬性有Italic和oblique，兩者有什么區別呢?

italic和oblique都是向右傾斜的文字, 但區別在于Italic是指斜體字，而Oblique是傾斜的文字，對于沒有斜體的字體應該使用Oblique屬性值來實現傾斜的文字效果.

怎么讓body高度自適應屏幕？為什么？?

為何只設置body{height：100%}不行？ height：100%是相對于父元素來說的，如果只設置body的高度屬性，由于其父元素是html高度未設置，且并非瀏覽器窗口高度，所以只設置body為100%是不能達到效果的，必須html，body都設置100%。而body{height: 100vh}直接把高度設置成了視口高度，與html大小無關，所以只在body設置vh是可行的。

display有哪些值？分別說明他們的作用是什么？?

display:block/inline-block 給元素轉塊/轉行內塊 display:inline 把元素轉成內聯元素（我很少用到） display:none讓元素消失，不顯示 display:flex彈性布局 我常用的就是這些

寫出幾個初始化CSS的樣式，并解釋說明為什么要這樣寫?

padding:0; margin:0;為了解決各個瀏覽器顯示不一樣的問題

說說你對CSS樣式覆蓋規則的理解?

1.選擇器的權重覆蓋； 2.相同選擇器的順序覆蓋； 3.行內樣式>內聯樣式>外聯樣式

外層有一個自適應高度的div，里面有兩個div，一個高度固定300px，另一個怎么填滿剩余的高度？?

可以設置外層自適應高度的容器為flex布局，利用flex-basis屬性即可實現自動填滿剩余高度；代碼如下：.container{display: flex;flex-flow: column nowrap;height: 500px;border: 2px dashed orange; } .area1 {flex-basis: 300px;background-color: lightblue } .area2 {flex: 1;background-color: darkcyan; }<section class="container"><div class="area1">300px</div><div class="area2">other</div> </section>

CSS的overflow屬性定義溢出元素內容區的內容會如何處理呢?

visible（默認值）：溢出的內容會照常顯示在元素內容區之外；hidden：溢出的內容會被裁剪；scroll：溢出的內容會出現在滾動區，通過滾動條滾動可以看到；auto：當內容溢出時表現同scroll；

CSS的偽類和偽對象有什么不同？

偽類是給當前選中節點添加新樣式， 偽對象是給當前選中節點添加偽元素。 偽類選擇器使用：，偽對象選擇器使用：：，因為兼容舊版，所以偽對象使用：也能解析。

移動端的布局用過媒體查詢嗎？寫出例子看看?

@media [type] and [condition] … not [condition] {… } @media [condition] and/or/not [condition] … {… }其中：type = "all" | "print" | "screen" | "speech" condition = equality | comparison equality = name ":" value comparison = name ("<"|">")? "="? value name = <CSS property name> value = <CSS property value>

寫出div在不固定高度的情況下水平垂直居中的方法？

我知道的有兩種方法<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><style>* {padding: 0;margin: 0;}/* flex居中 */.tith1 {display: flex;justify-content: center;align-items: center;background: red;}/* table居中 */.tith2 {text-align: center;width: 100%;display: table;background: blue;}.tith2 > span {display: table-cell;vertical-align: middle;}</style><body><p class="tith1"><span>123</span></p><p class="tith2"><span>123</span></p></body> </html>

為什么會出現浮動？在什么時候需要清除浮動呢？

因為在 div + css 代替 table 布局之后，利用 float 很容易進行一些自適應的布局，比如雙飛燕和圣杯布局。當然，float 原本的用途就是用來進行文字環繞圖片的，當有此需求時，應該使用 float但是使用 float 之后，由于內部的元素脫離了文檔流導致外層包裹元素高度塌陷。此時就需要清除 float 造成的影響。一般使用 clear:both 或者外層觸發 BFC。

當一個元素被設置為浮動后，它的display值變為什么呢？?

一個元素被設為絕對定位或者浮動后，其display計算值就變為了block，盡管其表現形式和inline-block類似——包裹內部元素且不超出包含塊的特性。按照如下方式在控制臺嘗試可驗證： var span = document.createElement('span'); document.body.appendChild(span); console.log('1.' + window.getComputedStyle(span).display); span.style.float = 'left'; console.log('2.' + window.getComputedStyle(span).display); 輸出： 1.inline 2.block

?如何更改placeholder的字體顏色和大小？

<style>/* Chrome瀏覽器 */input::-webkit-input-placeholder {color: red;}/* 火狐瀏覽器 */input::-moz-placeholder {color: red;}/* IE */input:-ms-input-placeholder {color: red;}</style> <body><input type="text" placeholder="你好"> </body>

移動端微信頁面有哪些兼容性問題及解決方案是什么？

1.rem方案通過reset js進行適配 2.vw 方案 搭配px to viewport進行適配

?你對視網膜(Retina)分辨率有了解嗎？有沒有在實際中使用過？

Retina分辨率指的是屏幕的物理分辨率達到了使得人眼難以看到單個物理像素；具體應用應該就是dpr > 1的屏幕適配，需要根據不同dpr給出合適尺寸的圖片；

說說你對前端二倍圖的理解？移動端使用二倍圖比一倍圖有什么好處？?

二倍圖是指單位面積下設備像素與css像素個數之比為 4 的位圖。移動端使用二倍圖可以在Retina屏幕下保真展示。

?行內css和important哪個優先級高？

!important 將覆蓋行內css css優先級：行內css>id選擇器(#)>偽類(:)>屬性選擇器([])>類選擇器(.) > 類型選擇器(div p a等) > 通用選擇器(*)

如何讓大小不同的圖片等比縮放不變形顯示在固定大小的div里？寫個例子?

圖片等比縮放 img{ object-fit: cover/contain;}div寬高比例固定，跟隨屏幕變化而變化，利用padding垂直方向的屬性來實現

你是如何規劃響應式布局的？?

從項目角度來講， PC 和 Mobile 是一個項目還是兩個項目；從方法流派來講， 有柵欄布局，固定 viewport，使用 rem/pt/vw 單位，使用定位百分比，修改為 rem/vw 單位，五種；從文件結構來講， 是獨立為響應布局專用 css 文件，還是跟隨組件一起；其他細節， 用 flex-grow 的地方，用 % 的地方，用 em 的地方

說說你對低版本IE的盒子模型的理解?

一個CSS盒子由四部分組成，由內到外依次是：content、padding、border、margin。所謂盒子模型定義的是盒子寬高的計算方法，IE盒子模型的寬高為content、padding、border之和。而W3C盒子的寬高僅為content。從頁面布局來說前者實際上更實用一點，這也是后來W3C提供box-sizing屬性用于切換盒子模型的原因。

行內元素和塊級元素有什么區別，如何相互轉換？?

一般通過display屬性來區分塊級元素和行內元素，block代表塊級元素，inline代表行內元素。 塊級元素： 1、內容獨占一行。 2、width和height可以設置。 3、margin和padding也可以設置。 行內元素： 1、內容不獨占一行。 2、width由內容撐開，不可設置。 3、豎直方向marigin和padding不可設置，水平方向可設置。 4、有多個行內元素，則會排列在一行，直到父容器放不下才會換行。 塊級元素和行內元素通過修改display屬性可相互切換。

怎么實現移動端的邊框0.5px？

一種是通過transform中的scaleborder: 1px solid red;transform: scaleY(.5);一種是通過meta viewport中設置init-scale為0.5 <meta name="viewport" content="width=device-width, initial-scale=0.5"> 一種是設置hrborder: 0px;border-bottom: 1px solid red;一種是基于背景漸變實現height: 2px;background-image: linear-gradient(0deg, red 50%, transparent 50%)

CSS中的calc()有什么作用？?

用來計算長寬的屬性,非常好用,百分比,px,vh/vm都可參與計算, 不過正如上面的大兄弟說的,運算符的左右要有空格,要不然不生效

過渡和動畫的區別是什么？?

相同：都會讓你的頁面元素動起來 區別： 過渡 transition1.需要事件觸發，比如hover，focus，checked , js改, @media query 2.一次性的 3.只能定義開始和結束狀態，不能定義中間狀態 舉例： transition: width 2s; 動畫 animation1.不需要事件觸發 2.顯示地隨著時間的流逝，周期性的改變元素的css屬性值。區別于一次性。 3.通過百分比來定義過程中的不同形態，可以很細膩 舉例： 原生css實現閃爍的bling bling的效果@keyframes bling-kf {0% { opacity: 1; }50% { opacity: 0.5; }100% { opacity: 1; } } .bling {animation: bling-kf 2s ease-in infinite; }不停的bling bling，很有趣的，:)

position的relative和absolute定位原點是哪里？?

absolute: 定位原點為第一個position不為static的父級元素的左上角。 可以基于該特性實現height:100%生效 relative：定位原點為元素本身的所在位置。 relative的偏移量設置會導致顯示效果和定位原點不重合。

說說你對設備像素比的理解?

DPR 物理像素與邏輯像素的比

你有用過table布局嗎？說說你的感受?

用來做列表排版還是很不錯的，但是要想用的好，還是要對table有比較多的了解。 比如實現表頭固定，表內容超出滾動的效果等

舉例說明時間、頻率、角度、弧度、百分度的單位分別是哪些？?

時間: s, ms頻率: Hz角度: deg弧度: rad百分度: grad

標簽、class和id選擇器三者的區別是什么？分別在什么時候用？?

標簽選擇器：tag{} 選取對應的標簽例如 a span div class選擇器：.class-name{} 選取對應class-name的元素 id選擇器：#id-name{} 選取對應id的元素 其中id是具有唯一性的。 三者優先級為 id>類>標簽 因此一般可以用標簽選擇器添加該標簽的通用樣式，類選擇器對樣式進一步細化，id選擇器針對某幾個需要特殊處理的元素添加單獨的樣式。

為什么要使用css sprites？?

減少HTTP請求增加圖片顯示速度

Reset CSS和Normalize CSS的區別是什么？

Reset：將所有瀏覽器的默認樣式都統一化，注重的是跨瀏覽器統一樣式，用戶還要自行添加一些默認樣式。 Normalize：會根據各個瀏覽器的不同保留有用的瀏覽器特色樣式，修復瀏覽器的一些BUG，更注重易用性。

怎么自定義鼠標指針的圖案？?

cursor: url() ,auto url是自定義光標圖案的絕對路徑，auto是默認光標，當我們自定義的光標不起作用時，就用默認光標代替。

你知道CSS中的字母"C"代表什么嗎？?

CSS(Cascading Style Sheets)。"C" 即為 Cascading 層疊的意思，我們編寫 CSS 的時候，寫在后面的樣式會覆蓋前面的樣式即層疊。

說說你對GPU的理解，舉例說明哪些元素能觸發GPU硬件加速？?

GPU: 圖形處理器,用于處理圖形有關的任務,用于渲染頁面在css中使用 transform: translateZ(0),可以開啟GPU硬件加速

你有沒有自己寫過一套UI庫？說下遇到哪些難點？?

維護過，碰到的坑主要是 1）同一個UI component在不同地方使用的customization問題。 2）還有如果UI component如果有bug的話會導致所有使用的地方都出現bug 3）改了一個UI component后在A處work，但是在B處因為context不一樣導致render出來的效果不一樣

舉例說明微信端兼容問題有哪些？?

說一個微信小程序的iPhoneX適配吧， 因為iPhoneX底部沒有虛擬按鍵，底部的橫線會出現遮擋這時候就要處理下： 大概思路就是獲取到客戶端設備，然后判斷是iPhoneX就換樣式。 在app.js中添加一個檢測當前設備是否是iPhoneX的變量：globalData: {userInfo: null,isIphoneX: false//判斷是否是iPhoneX},onShow: function() {var that = this;wx.getSystemInfo({success: function(res) {// console.log('手機信息res'+res.model) let modelmes = res.model;if (modelmes.search('iPhone X') != -1) {that.globalData.isIphoneX = true}},})}在需要做兼容的xxx.js中引入：var app= getApp(); Page({ data: {isIphoneX: false }, onLoad: function(){// 判斷是否為iPhoneXvar isIphoneX = app.globalData.isIphoneX;console.log(isIphoneX ? '是iPhoneX' : '不是iPhoneX')this.setData({isIphoneX: isIphoneX})} })

什么是zoom？它有什么作用？?

zoom 最初是 IE 的私有屬性，現在除了 Firefox 之外的瀏覽器基本都支持 zoom。不過，zoom 依舊不是正式的屬性。與之對應的 transform 的 scale 屬性是正式的 CSS 屬性。zoom 主要的作用是用于元素或者頁面的縮放；transform 的 scale 也有同樣的作用，兩者有如下的區別。zoom 的縮放點在元素左上角。在 Chrome 下，文字如果縮小后小于 12px 的情況仍然會顯示 12px。并且 zoom 縮放會影響元素實際的位置，這樣就會造成頁面的重排和重繪，在性能上會有影響。transform 的 scale 縮放點在元素中心。縮放會對文字有影響，可以利用此屬性實現 Chrome 下小于 12px 的字體。但是 transform 縮放后不會改變元素的位置，即如果元素原來是 200px 寬，縮小 50% 后雖然看上去只有 100px 寬了，但是仍然占 200px。

說說你對hasLayout的理解，觸發hasLayout的方式有哪些？?

hasLayout可理解為是IE7以及更舊版本的BFC。 跟BFC一樣，hasLayout不能直接通過屬性進行設置，而是需要一定的觸發條件。具體條件可在進行向下兼容時再查閱相關資料，無需過多記憶。

說說你對min-width和max-width的理解，它們有什么運用場景？?

min-width和max-width可以使得自適應布局保持一個基本的樣式。 用于多列布局時候，可以保證某幾列的布局保持在一定的范圍內。 比較常見的應用應該是網站首頁的三欄布局類型，一般是兩邊的側邊欄會設定一個最大最小寬度，中間為主欄，這樣不管如何縮放都能突出主欄，且側邊欄也不會縮太小影響觀感

設置字體時為什么建議設置替換字體？?

這是由于網站用戶的瀏覽設備不同，可能并不支持或沒有安裝你所設置的字體。 這時候就會自動使用替換字體來對網頁進行一個展示。 設置替換字體可以盡可能保證所有用戶的瀏覽體驗。

請舉例說明偽元素 (pseudo-elements) 有哪些用途？?

可以不用再多寫一個 dom可以用 content 搭配出很多效果例子：固定尺寸 2:1 的容器文本前后增加 icon 或圖片使用 data-* 和 content: attr(data-*) 搭配使用 :hover 和 content 搭配出很多效果作為修飾元素使用 content: counter() 玩有序數字參與 inline-block 垂直居中

舉例說明偽類:nth-child、:first-child與:first-of-type這三者有什么不同？?

<div> <p>大兒子</p> <div>二兒子</div> <p>三兒子</p> </div> <p>二叔</p> <div>三叔<div>div:nth-child（2） 選中父元素里的第二個子元素div；（即二兒子被選中） p:first-child 選中父元素里的第一個p元素；（大兒子被選中，二叔沒有被選中，因為它不是父元素里的第一個元素） p:first-of-type 選中第一個類型為p的子元素（大兒子、二叔被選中，因為大兒子是父元素div的第一個p元素，二叔是body的一個p元素） ：nth-child（n）和：first-child 是強調父元素里的第n個xx子元素，首先是第n個，然后才是xx類型；：first-of-type 主要強調類型，即一個父元素里，無論我們想選中的那個元素前面有多少個同級元素，都不算，只要找到父元素里的第一個xx子元素就行。

使用純CSS代碼實現動畫的暫停與播放?

一個屬性：animation-play-state 取值：paused（暫停）|running（播放） hover取代點擊 .stop:hover~.animation { animation-play-state: paused; }checked偽類 radio標簽的checked偽類，加上實現點擊響應 #stop:checked ~ .animation { animation-play-state: paused; } #play:checked ~ .animation { animation-play-state: running; }

說說visibility屬性的collapse屬性值有什么作用？在不同瀏覽器下有什么區別？?

設置visibility: collapse后對于普通元素來說跟visibility: hidden效果一樣，隱藏元素，且占用空間 但對于一些table元素，比如row、columu、group，效果則跟display: none一樣，隱藏元素，但不占空間 但這些效果會隨著瀏覽器底層實現不同而改變：在Chrome下，visibility: collapse都與visibility: hidden沒有什么區別，即仍會占用空間在火狐瀏覽器、Opera里，使用collapse值的效果就如它的字面意思：table的行會消失，它的下面一行會補充它的位置，不占用空間。在IE即使設置了visibility: collapse，還是會顯示元素。

absolute的containing block（容器塊）計算方式和正常流有什么區別？?

absolute會先向上找到第一個position不為static或者fixed的祖先元素，然后根據該祖先元素的display屬性分類討論。 如果為塊級元素，則為該塊級元素的padding box。 如果為行內元素，則為包含該祖先元素內所有行內元素的padding box如果是正常流，其中元素的containing block是其最近的塊級元素的content box

?有用過scss和sass嗎？說說它們之間的區別是什么？

sass和scss其實是一樣的css預處理語言，其后綴名是分別為 .sass和.scss兩種。SASS版本3.0之前的后綴名為.sass，而版本3.0之后的后綴名.scss。兩者是有不同的，繼sass之后scss的編寫規范基本和css一致，sass時代是有嚴格的縮進規范并且沒有‘{}’和‘；’。而scss則和css的規范是一致的。

舉例說明實現圓角的方式有哪些？?

不使用 border-radius 的情況下只能用切圖代替。此時非常有局限性，因為必須要定高定寬了。最常用的 border-radius 來實現。

有哪些方式可以對一個DOM設置它的CSS樣式？?

1.可以使用行內樣式 2.可以使用style標簽 3.可以使用link引入css文件 4.可以使用js動態修改

如何使用css3實現一個div設置多張背景圖片？?

background-image:url("1.jpg"),url("2.jpg"),url("3.jpg"); background-repeat: no-repeat, no-repeat, no-repeat; background-position: 0 0, 200px 0, 400px 201px;

transition、animation、transform三者有什么區別？?

transition:比較簡單的過度動畫animation: 使用keyframe自定義動畫,比較詳細的動畫過程transform: 2D或者3D的變形屬性

說說你對css的will-change屬性的理解，它有什么作用呢？?

告訴瀏覽器,這個元素的某些屬性可能會頻繁變動觸發回流，要求瀏覽器給予資源進行優化，一般瀏覽器會給這個元素單獨生成一個圖層渲染,gpu加速等提前優化手段 不應過度使用這個屬性,這屬性只是性能出現問題的最后手段

你有了解css計數器（序列數字字符自動遞增）嗎？如何通過css的content屬性實現呢？?

counter-reset:設置計數器 counter-reset: count 0 /* 計數器從1開始 */ counter-increment: 遞增數值 counter-increment: count 2 /* 用于count 每次遞增2 */ eg.<ul><li>Item</li><li>Item</li><ul><li>Item</li><li>Item</li></ul> </ul>ul {counter-reset: count; } li::before {counter-increment: count;content: counters(count, '-')'.'; }1.Item 2.Item2-1.Item2-2.Item

z-index有時不起作用的原因是什么？怎么解決？?

根元素 (HTML),z-index 值不為 "auto"的 絕對/相對定位，一個 z-index 值不為 "auto"的 flex 項目 (flex item)，即：父元素 display: flex|inline-flex，opacity 屬性值小于 1 的元素（參考 the specification for opacity），transform 屬性值不為 "none"的元素，mix-blend-mode 屬性值不為 "normal"的元素，filter值不為“none”的元素，perspective值不為“none”的元素，isolation 屬性被設置為 "isolate"的元素，10, position: fixed11, 在 will-change 中指定了任意 CSS 屬性，即便你沒有直接指定這些屬性的值（參考 這篇文章）-webkit-overflow-scrolling 屬性被設置 "touch"的元素

說下background-color:transparent和opacity:0的區別是什么？

background-color:transparent: 只是把背景色設置為透明，并不會影響元素中的內容。可以利用 transparent 進行三角、扇形的設置。opacity: 0: 會影響整個元素，元素的內容也會被隱去。

CSS3中的transition是否可以過渡opacity和display？?

transition過渡display是有一個前提條件: 瀏覽器渲染是在每一幀的最后，每一幀都會執行以下操作:js執行2.style加持3.layout4.paint5.composite在js執行過程中， 遇到DOM操作，并不會立即渲染，而是推入到隊列中，等待UI Render的執行一次性渲染，這是瀏覽器的優化手段 接下來是重點： 在獲取DOM的布局信息時，會強制清空隊列進行渲染，此時transition是可以過渡display的

說說你對字母"X"在CSS中有什么作用？?

可以用作關閉按鈕叉叉X的底部與文本對齊的基線位置相同

word-wrap、word-break和white-space有什么區別？?

word-wrap標明是否允許瀏覽器再單詞內進行斷句normal 只允許在斷字點換行 默認值break-word 在長單詞或這url地址內部進行換行word-break標明怎么樣進行單詞內的斷句normal 默認值break-all 允許在單詞內換行keep-all 只能在半角空格或字符串處換行3.white-space 屬性設置如何處理元素內的空白 normal 默認值 pre 空包會被瀏覽器保存 nowrap 文本不會換行，在同一行顯示，知道遇到br標簽為止 pre-wrap 保留空白序列，會正常的換行 pre-line 合并空白序列，會保留換行符 inherit 應該從父元素繼承white-space屬性的值

css怎樣使每個字符寬度一樣？?

控制字符間距：letter-spacing:1em;[em,px,rem]

如何自定義radio按鈕的樣式?

選擇器 input[type=“radio”]現在幾乎不用原生的radio，一是原生樣式改成設計稿的樣子太浪費時間，二是不同瀏覽器對于原生radio的展示還不一樣。基于狀態驅動的思想，用自定義按鈕或其他元素來替代radio，很容易實現，也能保證瀏覽器兼容性。

說下你對background-size的理解，它有什么運用場景？?

設置背景圖的大小，一般用來設置背景圖的大小。

移動頁面底部工具條有3個圖標，如何平分？在設置邊框后最后一個圖標掉下去了怎么辦？?

flex-wrap nowrap, 一般flex默認就是nowrap white-space:nowrap是針對行內元素設置的,默認為normal

請問background-attachmentn屬性有什么用途？?

background-attachment: fixed / scroll / local： 設置背景圖像是否固定或者隨著頁面的其余部分滾動。fixed: 背景圖片不會隨著頁面的滾動而滾動。scroll: 背景圖片隨著頁面的滾動而滾動，這是默認的。local: 背景圖片會隨著元素內容的滾動而滾動。inherit: 指定 background-attachment 的設置應該從父元素繼承。

什么是脫離文檔流？有什么辦法可以讓元素脫離標準的文檔流？?

文檔流就是指元素在 HTML 文檔中位置順序決定排布的過程。HTML 元素有塊級元素和行內元素，塊級元素一個占一行，行內元素在一行內依次排布。整體元素從上到下的排布順序如同瀑布一樣。脫離文檔流即脫離了排布的規則。可以使用 float、absolute/fixed 來脫離文檔流。脫離文檔流的元素不受文檔流內元素的影響。

說說響應式設計(responsive design)和自適應設計(adaptive design)的區別？?

響應式是通過視口分辨率識別不同客戶端展現不同的布局和內容，一套代碼。自適應是通過識別時候分辨率針對不同設備返回不同的頁面，多套代碼。

請說說在什么時候用transition？什么時候使用animation？?

transition 相當于是個過度動畫，需要又過度效果才會觸發。一般用來做元素的放大縮小、平移旋轉等簡單的操作。transition 只執行一次，當需要執行多次時，一般會利用 :hover 等時機或者使用 javaScript 改變類名進行控制。animation 需要自己設定關鍵幀，可以做相對復雜的操作，比如延遲、循環播放等。一般在需要比較復雜的情況才會使用 animation。

請說說CSS3實現文本效果的屬性有哪些？?

text-shadow:文字陰影效果 word-wrap:換行設置

如何使用CSS的多列布局？?

div {-webkit-column-count: 3; /* Chrome, Safari, Opera */-moz-column-count: 3; /* Firefox */column-count: 3; }或者使用flex布局來實現多列布局

舉例說明在css3中怎么實現背景裁剪？?

background-clip: border-box(默認,背景延伸至邊框外沿,但是在邊框的下層) padding-box(背景延伸至padding的外沿) content-box(背景延伸至內容的外沿) text(背景剪裁成文字的樣式)

如何做圖片預覽，如何放大一個圖片？?

圖片不跨域的話用 canvas 來 drawImage 放大裁剪也可以。

如何寫高效的CSS？?

唔，自動補全、預編譯這些輔助手段確實能提升一定的效率， 但我覺得真正能提升效率的是，不看預覽就敢上手的理論知識。 見過太多加幾行就要預覽下效果的開發了，哪怕給他雙屏其實也還是會拖慢節奏。比如這個橫排該怎么寫，子級是否留隙/等寬/限寬，后期有其他元素加入怎么辦，等等...... 雖然有了 flex 后我們要考慮的少了很多，但依舊還是有布局規律可循。 這個過程很吃經驗，類似于將樣式/布局進行抽象理解， 等到能寫出非常完善的抽象類也熟悉其優劣長短后，那不看預覽也可以快速編寫了。另一方面，直接使用調試面板進行調試編寫，也比改下保存下再看眼要快一些。

css中的border:none和border:0px有什么區別？?

none是沒有邊框. 0px是邊框的寬度為0px.

外邊距重疊是什么？重疊的結果是什么？怎么防止外邊距重疊？?

外邊距重疊是什么？外邊距重疊指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。 重疊后的外邊距的高度等于兩個發生重疊的外邊距的高度中的較大者。發生的條件：屬于同一個BFC的兩個相鄰元素上下margin會重疊。重疊的結果是什么？舉例1：當一個元素出現在另一個元素上面時，重疊后的外邊距的高度等于兩個發生重疊的外邊距的高度中的較大者。舉例2： 當一個元素包含在另一個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生重疊。如果這個外邊距遇到另一個元素的外邊距，它還會發生重疊。怎么防止外邊距重疊？浮動元素、inline-block 元素、絕對定位元素的 margin 不會和垂直方向上其他元素的 margin 折疊（注意這里指的是上下相鄰的元素）外層元素padding代替內層元素透明邊框 border:1px solid transparent;用同一方向的margin，都設置為top或者bottom。

用css怎么實現兩端對齊？?

文本的兩端對齊<style>.form .text {display: inline-block;width: 65px;text-align-last: justify;}</style><div class="form"><div><span class="text">用戶名</span><input type="text"></div><div><span class="text">密碼</span><input type="text"></div></div>元素的兩端對齊<style>.wrap {width: 100px;height: 100px;border: 1px solid;display: flex;justify-content: space-between;}.wrap > div {width: 20px;height: 20px;}.a {background: red;}.b {background: blue;}</style><div class="wrap"><div class="a"></div><div class="b"></div></div>

判斷第一行和第二行的顏色分別是什么？并解釋為什么？?

<style> .red {color:red;} .green {color:green;} </style><div class="red green">第一行：顏色是什么？</div> <div class="green red">第二行：顏色是什么？</div> 實踐出真知，我試了，結果兩行都是綠色的 如果要改成紅色的 那就把<style>里面的兩行位置調換一下，因為 后聲明的樣式優先級高

舉例說明你知道的css技巧有哪些？?

/* 等比例容器 */ .ratio { position: relative; display: block; } .ratio:before { content: ''; padding-top: 100%; float: left; } .ratio::after { content: ''; display: block; clear: both; }/* 非表單元素也適用的 disabled */ .disabled {pointer-events: none;user-select: none;&.gray { filter: grayscale(1); } }/* 點擊 label 觸發隱藏的 file 表單 */ label.form-file {position: relative;overflow: hidden;cursor: pointer;vertical-align: middle;& > input[type="file"] { position: absolute; left: -999em; } }/* 子元素之間輕松 10px 空隙 */ .gap-right-10 > :not(:last-child) {margin-right: 10px; }

移動端的布局用過媒體查詢嗎？寫一個試試?

使用過Demo<style>.demo {width: 100px;height: 100px;background: #000000;}@media only screen and (min-width: 680px ) {.demo {background: red;}} </style> <div class="demo"></div>

position跟margin collapse這些特性相互疊加后會怎么樣？?

怎樣防止外邊距重疊？底部元素脫離文檔流(float: left/right || position: absolute/fixed)

你是怎么選擇resetting和normalizing的？為什么？?

一般選擇normalizeReset: 比較粗暴的處理方式，不管有用沒有統統處理成一種方式，如果是臨時頁面會采用。* {margin: 0;padding: 0;box-sizing: border-box; } *::after, *::before {box-sizing: border-box; }Normalize: Normalize注重通用的方案，重置掉該重置的樣式，保留有用的 user agent 樣式，同時進行一些 bug 的修復，這點是 reset 所缺乏的。

你有用過clip-path嗎？說說你對它的理解和它都有哪些運用場景？?

clip-path屬性可以創建一個只有元素的部分區域可以顯示的剪切區域它的值可以為以下幾種: 用 表示剪切元素的路徑: 一種形狀，其大小和位置由<幾何盒>值定義。如果沒有指定幾何框，則邊框將用作參考框: 如果同 一起聲明，它將為基本形狀提供相應的參考框盒。通過自定義，它將利用確定的盒子邊緣包括任何形狀邊角（比如說，被 border-radius 定義的剪切路徑）none: 不創建的剪切路徑demo<style>* {margin: 0;padding: 0;}.demo {margin: 15px auto;width: 400px;height: 400px;background: #000000;}.clip {/* clip-path: url(#cross); *//* clip-path: circle(40%); */clip-path: view-box;} </style> <div class="demo clip"></div> <svg height="0" width="0"><defs><clipPath id="cross"><rect y="110" x="137" width="90" height="90" /><rect x="0" y="110" width="90" height="90" /><rect x="137" y="0" width="90" height="90" /><rect x="0" y="0" width="90" height="90" /></clipPath></defs> </svg>

會引起Reflow和Repaint的操作有哪些？?

頁面布局和幾何信息(比如：增加刪除dom，改變元素位置或者尺寸等)發生改變時，會觸發Reflow。 給dom節點添加樣式，會觸發Repaint。 觸發Reflow一定會引起Repaint，觸發Repaint的情況不一定引起Reflow。

css的linear-gradient有什么作用呢？?

概念：線性漸變,向下/向上/向左/向右/對角方向,為了創建一個線性漸變，你必須至少定義兩種顏色結點。顏色結點即你想要呈現平穩過渡的顏色。同時，你也可以設置一個起點和一個方向（或一個角度）demo/* 從上到下 */ #grad {background: linear-gradient(red, blue); } /* 從左到右 */ #grad {background: linear-gradient(to right, red , blue); /* 標準的語法 */ } /* 對角 */ #grad {background: linear-gradient(to right, red , blue); /* 標準的語法 */ } /* 使用角度 */ #grad {background: linear-gradient(180deg, red, blue); /* 標準的語法 */ }@censek censek commented on 16 Mar 2020概念：線性漸變,向下/向上/向左/向右/對角方向,為了創建一個線性漸變，你必須至少定義兩種顏色結點。顏色結點即你想要呈現平穩過渡的顏色。同時，你也可以設置一個起點和一個方向（或一個角度）demo/* 從上到下 */#grad {background: linear-gradient(red, blue); }/* 從左到右 */#grad {background: linear-gradient(to right, red , blue); /* 標準的語法 */}/* 對角 */#grad {background: linear-gradient(to right, red , blue); /* 標準的語法 */}/* 使用角度 */#grad {background: linear-gradient(180deg, red, blue); /* 標準的語法 */}對角漸變是：background: linear-gradient(to bottom right, red, blue);

怎么去掉點擊a鏈接或者圖片出現的邊框？?

a{text-decoration:none} img{border:0 none}

你了解css3的currentColor嗎？舉例說明它的作用是什么？?

currentColor是 color 屬性的值，具體意思是指：currentColor關鍵字的使用值是 color 屬性值的計算值。如果currentColor關鍵字被應用在 color 屬性自身，則相當于是 color: inherit。 它的作用在我看來是指定默認color的值，比如.active{color:#C60;border:thin solid; } .active{color:#C60;border:thin solid currentColor; }上述代碼中的currentColor代替了#C60

css怎么更改表單的單選框或下拉框的默認樣式？?

下拉框select可以通過appearance:none去除默認樣式，然后進行自定義，但是option標簽不能通過CSS自定義，所以最佳方案是自定義標簽重寫select單選框隱藏input標簽，自定義標簽通過checked偽類進行實現

請說說你對vh、vw的理解以及它們的運用場景是什么？?

vw: 100vw為視窗的寬度，即1vw是視窗寬度的1%vh: 100vh為視窗的高度，即1vh是視窗高度的1%運用場景圖片查看大圖：img { max-height: 90vh; }代替rem實現移動端布局

你有使用過字體圖標嗎？它有什么好處？?

代替圖片，可以減少http請求次數，提高頁面加載性能。

如果css文件過大時，如何異步加載它？?

分割成多個CSS文件進行Gzip壓縮link preload

你知道什么是流體排版嗎？說說它的原理是什么？?

在文檔流中，內聯元素按內聯方向顯示，即詞語在依據文件寫作模式的句子中表示的方向。塊元素則一個接一個地顯示，就像該文檔的寫作模式中的段落一樣。因此在流體排版中，內聯元素從左邊開始一個接一個地顯示，塊元素從頂部開始向下顯示并移動頁面。 流體排版其實現階段已經十分普遍了，通常我們設置字體大小的時候都是直接給一個具體的px值，這樣帶來的后果就是當視窗大小發生改變的時候我們的字體無法隨著窗口的變化而變化從而達不到我們預期的效果，在后來我們利用媒體查詢實現了這一功能，通過設置rem來進行自適應，再到現在我們可以用vmin、vw、vh、vmax進行排版。

?css3和css2的區別是什么？

css3增加了更多特性：動畫、過渡效果，圓角、文字特效等

你是怎樣對css文件進行壓縮合并的？

? 使用在線網站進行壓縮，如http://tool.lu/css如使用Gulp，可使用gulp-minify-css進行壓縮如使用WebPack，可使用optimize-css-assets-webpack-plugin進行壓縮

你有使用過preload、preconnect、prefetch這些屬性嗎？說說它們都有什么作用？

preload 元素的 rel 屬性的屬性值preload能夠讓你在你的HTML頁面中元素內部書寫一些聲明式的資源獲取請求，可以指明哪些資源是在頁面加載完成后即刻需要的。 試想我們網站使用了一種特殊字體，我們在css里面定義了字體的url。那么直到瀏覽器開始解析CSS了才會識別出來需要加載這個資源。 如果我們提前讓瀏覽器下載好這個資源呢？那么執行CSS的時候就可以直接用了。就像這樣： ``如上所示，我們使用這樣的語法： rel="preolad"聲明這是一個preload href指明資源的位置 as指明資源類型（這是為了讓瀏覽器精確設置優先級，設置正確的CSP、Accept頭部） crossorigin 指明使用的跨域設置 preload和onload事件 添加preload聲明之后，瀏覽器初次加載的資源變多了，但preload并不會阻塞onload事件的觸發 prefetch prefetch是對瀏覽器的暗示，暗示將來可能需要某些資源，但由代理決定是否加載以及什么時候加載這些資源。 efetch跟preload不同在于，用戶從A頁面進入B頁面，preload的會失效，而prefetch的內容可以在B頁面使用。preconnet 瀏覽器要建立一個連接，一般需要經過DNS查找，TCP三次握手和TLS協商（如果是https的話），這些過程都是需要相當的耗時的，所以preconnet，就是一項使瀏覽器能夠預先建立一個連接，等真正需要加載資源的時候就能夠直接請求了。 而一般形式就是<link rel="preconnect" href="//example.com"> <link rel="preconnect" href="//cdn.example.com" crossorigin>瀏覽器會進行以下步驟：解釋href的屬性值，如果是合法的URL，然后繼續判斷URL的協議是否是http或者https否則就結束處理 如果當前頁面host不同于href屬性中的host,crossorigin其實被設置為anonymous(就是不帶cookie了)，如果希望帶上cookie等信息可以加上crossorign屬性,corssorign就等同于設置為use-credentials

請舉例說明css有哪些不可繼承的屬性？?

1、display：規定元素應該生成的框的類型2、文本屬性：vertical-align：垂直文本對齊text-decoration：規定添加到文本的裝飾text-shadow：文本陰影效果white-space：空白符的處理unicode-bidi：設置文本的方向3、盒子模型的屬性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left4、背景屬性：background、background-color、background-image、background-repeat、background-position、background-attachment5、定位屬性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index6、生成內容屬性：content、counter-reset、counter-increment7、輪廓樣式屬性：outline-style、outline-width、outline-color、outline8、頁面樣式屬性：size、page-break-before、page-break-after9、聲音樣式屬性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

css中最常用的字體有哪些？你是怎么選擇字體的？?

總結： win：微軟雅黑為Win平臺上最值得選擇的中文字體，但非瀏覽器默認，需要設置；西文字體的選擇以Arial、Tahoma等無襯線字體為主。 mac：目前蘋方和San Francisco為蘋果推出的最新字體，顯示效果也最為優雅，但只有最新系統才能支持，而黑體-簡和Helvetica可以獲得更多系統版本支持，顯示效果也相差無幾，可以接受。 android：Droid Sans為默認的字體，并結合了中英文，無需單獨設置。

請使用css畫一個圓，方法可以多種?

<div class="circle"></div>1.border-radius.cirlce{width:10vw; height:10vw; background:gray;border-radius:50%; }2.clip-path.circle{width:10vw; height:10vw; background:gray;clip-path: circle(); }3.svg background.circle{ width:10vw; height:10vw; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50%25' cy='50%25' r='50%25' fill='gray'/%3E%3C/svg%3E"); }4.radial-gradient.circle{width:10vw; height:10vw; background:radial-gradient(gray 70%, transparent 70%); }5.font.circle::after {content: "●";font-size: 10vw;//字體實際大小line-height: 1; }6.mix-blend-mode.circle{width: 10vw;height: 10vw;background: gray; } .circle::after {content: "";display: block;width: 10vw;height: 10vw;mix-blend-mode: lighten;background: radial-gradient(#000 70%, #fff 70%); }

你知道css的預處理器和后處理器都有哪些嗎？它們有什么區別呢？?

目前最主流的 CSS 預處理器：Sass、LESS、Stylus 。優缺點優點：語言級邏輯處理，動態特性，改善項目結構缺點：采用特殊語法，框架耦合度高，復雜度高后處理器：Rework 、PostCSS、優缺點優點：使用 CSS 語法，容易進行模塊化，貼近 CSS 的未來標準缺點：邏輯處理能力有限.

讓你手寫一個reset的文件，你應該怎么寫？要考慮哪些方面呢？?

肯定首先考慮的是瀏覽器本身的樣式，還有瀏覽器兼容。margin，padding ==>0ul,ol list style:nonea,text-decoration:nonefont-size:100%上標，下標。表格等

怎樣去除圖片自帶的邊距？?

空隙產生的原因，換行符，空格符，制表符等你空白符，字體不為0的情況下，都會產生一個字符的空隙，空格符好會占據一定寬度，使用inline-block會產生元素間的空隙。解決方法： 1.父元素設置：font-size=0 2.使用flexbox不清楚圖片去除自帶邊距的方法是應該，應該差不多吧

請描述下你對translate()方法的理解?

Single length/percentage value一個長度值或百分比表示X軸和Y軸使用一樣的值進行二維上的平移。等同于translate() （2D 平移）函數指定單個值。Two length/percentage values兩個長度值或百分比表示在二維上分別按照指定X軸和Y軸的值進行的平移。等同于translate() （2D 平移）函數指定兩個值。Three length/percentage values三個長度值或百分比表示在三維上分別按照指定X軸、Y軸、Z軸的值進行的平移。等同于translate3d() （3D 平移）函數。

你是怎么設計css sprites（精靈圖）的？有哪些技巧？?

首先肯定不會去用PS量，那太費時間了~ 沒有webpack以前，用Gulp的gulp.spritesmith插件，這里附上配置源碼/* gulpfile.js */ const gulp = require('gulp'); const gulpLoadPlugins = require('gulp-load-plugins'); const $ = gulpLoadPlugins();/*** @desc 雪碧圖自動合成*/ gulp.task('sprite', function () {return gulp.src('src/assets/sprite/*.png')//需要合并的圖片地址.pipe(spritesmith({imgName: 'assets/sprite.png',// cssName: 'css/_sprite.scss',cssName: 'scss/_sprite.scss',padding: 5,algorithm: 'binary-tree',cssTemplate: function (data) {var arr = [];data.sprites.forEach(function (sprite) {arr.push(".icon-" + sprite.name + "{" +"background-image: url('" + sprite.escaped_image + "');" +"background-position: " + sprite.px.offset_x + " " + sprite.px.offset_y + ";" +"width:" + sprite.px.width + ";" +"height:" + sprite.px.height + ";" +"display: inline-block;" +"vertical-align: middle;" +"}\n");});return arr.join("");}})).pipe(gulp.dest('dist/')).pipe(gulp.dest('src/')); });把圖放入對應的文件夾中，然后根據文件名對應的類名引用就行了 webpack的話可以使用webpack-spritesmith，安裝了webpack-spritesmith之后var SpritesmithPlugin = require('webpack-spritesmith'); //module.exports = {//代碼} plugins: [new SpritesmithPlugin({// 目標小圖標src: {cwd: path.resolve(__dirname, './src/assets/imgs/icons'),glob: '*.png'},// 輸出雪碧圖文件及樣式文件target: {image: path.resolve(__dirname, './dist/sprites/sprite.png'),css: path.resolve(__dirname, './dist/sprites/sprite.css')},// 樣式文件中調用雪碧圖地址寫法apiOptions: {cssImageRef: '../sprites/sprite.png'},spritesmithOptions: {algorithm: 'top-down'}}) ]在index.html中引入css<link rel="stylesheet" type="text/css" href="./dist/sprites/sprite.css" />最后通過class引入小圖標即可

舉例說明你對相鄰兄弟選擇器的理解?

div+p{ //相鄰兄弟選擇器 background: red; } 符合兩個條件就會被選中： 1.緊鄰在另一個元素后面 2.兩者父元素相同

相鄰兄弟選擇器、后代選擇器和子選擇器三者有什么區別？?

后代選擇器與子選擇的關系：后代選擇器>子選擇器。 后代選擇器：包括父元素的子元素以及孫子元素（代表符號：空格）子選擇器：包括父元素的子元素（僅僅是子元素）（代表符號：>）相鄰兄弟選擇器與后續兄弟選擇的關系：后續兄弟選擇>相鄰兄弟選擇器 相鄰兄弟選擇器：緊跟在目標元素后面的第一個兄弟元素（代表符號：+）后續兄弟選擇器：緊跟在目標元素后的所有兄弟元素（代表符號：~）

?用css給一個元素加邊框有哪些方法？

:scope {border: 3px solid black;box-shadow: 0 0 0 1px black; /*不影響布局,無限疊加*/outline: 1px solid black; /*不支持圓角*/background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' stroke='%23000' fill='transparent'/%3E%3C/svg%3E");background-clip: content-box; /*形成透明邊框*/padding: 1px;border-image: linear-gradient(red, black) 1;border: 1px solid; }

請使用css寫一個多級的下拉菜單?

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {padding: 0;margin: 0;}a {text-decoration: none;}ul li {float: left;position: relative;list-style: none;margin: 3px;}ul li a {width: 100px;display: block;text-align: center;padding: 10px 20px;background-color: #e8e8e8;}ul li ul {display: none;position: absolute;left: 0;top: 100%;}ul li:hover>ul {display: block;}ul li:hover>a {background-color: bisque;}ul li ul li {clear: both;position: relative;}ul li ul li a {width: 150px;border-top: 1px solid white;}ul li ul li ul {display: none;position: absolute;left: 100%;top: 0;}</style> </head><body><ul><li><a href="">11111111</a></li><li><a href="">11111111</a><ul><li><a href="">2222</a></li><li><a href="">222</a><ul><li><a href="">2222</a></li><li><a href="">222</a></ul></li></ul></li></ul> </body></html>

請說說顏色中#F00的每一位分別表示什么？為什么會有三位和六位的表示呢？?

顏色可以使用紅-綠-藍（red-green-blue (RGB)）模式的兩種方式被定義：十六進制符號 #RRGGBB 和 #RGB "#" 后跟6位十六進制字符（0-9, A-F）。 "#" 后跟3位十六進制字符（0-9, A-F）。 三位數的 RGB 符號（#RGB）和六位數的形式（#RRGGBB）是相等的。 例如， #f03 和 #ff0033 代表同樣的顏色。 函數符 rgb(R,G,B) "rgb" 后跟3個 或3個 值。 整數 255 相當于 100%，和十六進制符號里的 F 或 FF 。

舉例說明css有哪些簡寫的屬性和屬性值？?

border: solid 1px red;border-style: solid; border-width: 1px; border-color: red;animation: fadeIn .5s forward ease-in .2s infinite;animation-name: fadeIn; animation-duration: 0.5s; animation-fill-mode: forward; animation-timing-function: ease-in; animation-delay: 0.2s; animation-iteration-count: infinite;background: url(images/foo.png) center top/cover no-repeat;background-image: url(images/foo.png); background-position-x: center; background-position-y: top; background-size: cover; background-repeat: no-repeat;

你知道CSS的標準發布流程嗎？?

隨著 CSS 3 的廣泛應用，很多新的 CSS 屬性層出不窮，有很多陌生的 CSS 屬性出現，所以經常需要去學習新的 CSS 屬性。新的屬性往往介紹文章不多，所以有時候就需要去看看官方文檔，此時會發現官方文檔有好幾個版本，看下圖：當初學 flex-box 的時候就發現有好多種寫法，還好官方文檔開頭有標明那些文檔時最新的。不過此時我萌生了去了解 CSS 標準流程的想法，我想作為一個合格的 CSSER 也應該去了解吧。這里講到的知識基本來自 CSS-tricks 上 CHRIS COYIER 的一篇文章：https://css-tricks.com/css-standards-process/ 。CSS 的標準化流程由 W3C Cascading Style Sheets Working Group (CSSWG)——W3C層疊樣式列表小組，由瀏覽器商，大學，大公司（google，IBM等），以及獨立CSS專家組成。W3C 本身并不制定標準，而是作為一個論壇式的平臺，接收來自小組成員的提交，并通過會議來商討制定標準，所有的提交以及討論都是公開透明的，可以在 W3C 網站上看到會議的記錄，標準確定一般有6個階段，其中兩個是過渡階段：1. 編輯草案 Editor's Draft (ED)這個是規范的開始階段，一個CSS屬性或者選擇器被提出來，并在CSSWG內部研究。如果小組成員同意這個屬性可以正式推出，它就能進入下一階段。2、工作草案 Working Draft (WD)編輯草案后是工作草案，標準的設計階段。小組反復處理來自 CSSWG 內部和來自小組外部的反饋，這個階段有兩個結果：一是可能會因為技術困難或者可能會引起其他問題而使新屬性被完全拒絕；二是規范會通過這個階段，并會作為第一次公開工作草案（ First Public Working Draft (FPWD)）發布，后面還會有數個工作草案，會處理來自 CSSWG 內部和小組外部更廣泛社會的反饋。3、過渡－最后通告工作草案 Transition – Last Call Working Draft (LCWD)這是第一個過渡階段，當規范開始考慮從工作草案進入到下一個階段時，將會對新屬性的一些小改動的反饋設置一個截止日期，LCWD 即是日期截至后最后的一次公開草案處理。注：最重要的階段是 ED, WD, and CR（下面會講到的），其他階段不是很重要。4. 候選推薦標準 Candidate Recommendation (CR)規范會在這個階段通過完整的測試，測試人員來自 CSSWG 以及被選為實現這個規范的瀏覽器生產商(Chrome, Safari, Firefox, Opera, 等等)。為了繼續進入下一階段，CSSWG 會推出兩個正確的實現規范。5. 過渡－建議推薦標準 Transition – Proposed Recommendations (PR)當到達這個階段，W3C全球資源小組：W3C咨詢委員會（W3C Advisory Committee），決定這個規范是否會繼續進入下一個階段。這個階段一般很少有異議出現，所以也是一個過渡階段而已。6.推薦標準 Recommendation (REC)如果規范到達這個階段，說明規范已經考慮完備并可以讓瀏覽器商實現，W3C 和 CSSWG 對這個規范的討論處理不再活躍，只做一些必要的維護。注：推薦標準階段其實不是一個理想的狀態，而是一個規范的墳墓，瀏覽器并不會等到這個階段才去實現它，而是在 CR 階段就會實現這個規范。為什么說是墳墓呢，因為到達 REC 階段后，規范會止步不前，而不是變得穩定。因為在 REC 階段 CSSWG 并不會投入精力去修復新出現的錯誤，所以錯誤會不斷積累，而新版本的規范已經在開發了，老的規范已經失去了繼續發展的活力以及意義，留下的問題就只能通過 hack 去彌補，同時會有新的屬性去代替它實現更好的功能。那什么時候規范才是穩定的呢？文章中有引述了 Tab Atkins Jr （google團隊成員，也是 CSSWG 以及 W3C 的成員）的一段話，內容大概是：規范的穩定性基本和它所在的流程階段沒有關系。當規范特性已經開始傳播開來，并因為向后兼容性不能改變時，它才是穩定的，這個階段可能會在 ED 規范階段或者 CR 階段，這才是穩定性評判的正確方法，而不是 W3C 的標準發布流程。說到這里，作者也提到了怎樣根據 CSS 新屬性的穩定性情況去使用它，避免跳坑，其實就是能夠實現漸進增強與優雅降級。這里不得不提到一個有名的網站 http://caniuse.com 估計這個網站大多數人都會用到了，簡直是 CSSER 的福音啊，通過這個網站，當鍵入某個屬性時，可以在下面的resources標簽很快速地找到它的官方文檔以及很多最新的學習文章，同時了解到到一些現有的使用問題（issues）。舉個例子，比如鍵入flex時，下面有這樣的標簽：里面有來自css－trick、github等著名網站的文章，很多都是比較新，并且寫得很好的文章。 這里還有個小常識，就是關于 CSS 3 的這個命名，Tab Atkins Jr 在文章 A Word About CSS4 代表 CSSWG 做了闡述，主要內容就是 CSS 3 代表了 CSS 2.1 后新增的 CSS屬性，而且不會有 CSS4 這樣的東西出現。下面是我看完后結合文章內容以及自己的一些理解，不想看原文的可以稍微了解一下。可能理解不是很到位，不過應該不會偏頗太多：CSSWG 想結束 CSS 2.1 這個版本時，發現 “versions”（版本）這個東西不好用，因為一旦使用版本來發布 CSS 時，CSS 變得很難維護，發展也會變慢。結合上面 CSS 的標準發布流程以及現在 CSS 的使用情況，不難想到確實是這樣。因為 CSS 的整體性不強，CSS 屬性都是為了實現某個效果單獨被提出并反饋，和其他提出的屬性并沒有什么交集；有的屬性一直在用不需要什么新的更新，而有的屬性可能很快要被淘汰，所以以一整個版本去發布 CSS 很不科學。基于這樣的想法，CSSWG 決定把 CSS 分成很多獨立的小模塊，每個模塊只包含一個主要的特性（feature），可以自己單獨升級開發，為什么要分成小的只包含少數特性的模塊呢？這樣就不會因為一個模塊包含太多特性，然后因為某個特性特別棘手不好解決而阻礙整個模塊其他特性的發展升級。因為這個想法是在結束 CSS 2.1 版本的時候決定的，那么現在 CSS 就要以模塊來整理一下，也要相應定一些等級（level）。規則是這樣的： 1、如果模塊在 CSS 2.1 就有相關的內容，那么這些模塊就從 level 3 開始。2、如果是完全新的屬性（比如 Flexbox），就直接從 level 1 開始。3、一個模塊的級別和它所在 CSS 的版本無關，即不管它是 CSS 2.1 的內容還是完全新的屬性。因為模塊的概念是新提出來的，所以只要是模塊，就都屬于 CSS 3（或者也可以說都是 CSS），不管它們處于什么模塊等級。4、可能會看到類似 css4-backgrounds 這樣的寫法，其實代表的是 CSS Background & Borders Level 4，即4表示的是模塊的等級。后來發現大漠前輩也寫了相關文章，內容更全面，講到了瀏覽器前綴的問題。我也參考了一下，大家可以點下面的參考鏈接去看看。

你有去看過或者了解過css的標準文檔嗎？?

當然，CSS 中可以研究的太多了，比如 css2 的層疊上下文極其詭異，比如 body 的默認值與普通 dom 的不同，flex-shrink 的計算規則等等，雖然看得很吃力，但對研究很有幫助。

為什么說不提倡用1px的小尺寸圖片做背景平鋪？?

因為明明可以用background-color就能搞定的事情為什么要用圖片？

解釋下為什么css的reset不建議直接這么寫：*{ margin:0; padding:0;}？?

1.*為通配符，使用通配符，即全局范圍遍歷，耗費瀏覽器效率，增大負荷； 2.會影響后面的設置的部分屬性無效，例如：table設置的cellpadding，cellspacing。

你最希望css擁有什么樣的特性？（目前沒有的）?

:nth-letter 選擇器 :nth-of-class 選擇器 :has 選擇器（似乎快了）以及如果能實現這些我就不需要sass了：ul {counter-reset: lis; }ul li{counter-increment: lis;/* counter 可以用計算 */width: calc(lis * 200px);/* attr 可以用于計算 */height: calc(attr(data-height) * 1rem);/* attr 可以用于字符串拼接 */background-image: url("/images/" attr(data-type) ".png"); }

未完待續...

總結

以上是生活随笔為你收集整理的前端面试题（一）（CSS篇）建议收藏，持续更新中...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。