前端面試 CSS篇

2023-02-17 10:51 更新

一、CSS基礎(chǔ)

1. CSS選擇器及其優(yōu)先級

選擇器 格式 優(yōu)先級權(quán)重
id選擇器 #id 100
類選擇器 .classname 10
屬性選擇器 a[ref=“eee”] 10
偽類選擇器 li:last-child 10
標簽選擇器 div 1
偽元素選擇器 li:after 1
相鄰兄弟選擇器 h1+p 0
子選擇器 ul>li 0
后代選擇器 li a 0
通配符選擇器 * 0

對于選擇器的優(yōu)先級：

  • 標簽選擇器、偽元素選擇器：1
  • 類選擇器、偽類選擇器、屬性選擇器：10
  • id 選擇器：100
  • 內(nèi)聯(lián)樣式：1000

注意事項：

  • !important聲明的樣式的優(yōu)先級最高；
  • 如果優(yōu)先級相同，則最后出現(xiàn)的樣式生效；
  • 繼承得到的樣式的優(yōu)先級最低；
  • 通用選擇器（*）、子選擇器（>）和相鄰?fù)x擇器（+）并不在這四個等級中，所以它們的權(quán)值都為 0 ；
  • 樣式表的來源不同時，優(yōu)先級順序為：內(nèi)聯(lián)樣式 > 內(nèi)部樣式 > 外部樣式 > 瀏覽器用戶自定義樣式 > 瀏覽器默認樣式。

2. CSS中可繼承與不可繼承屬性有哪些

一、無繼承性的屬性

  1. display：規(guī)定元素應(yīng)該生成的框的類型
  2. 文本屬性：
    • vertical-align：垂直文本對齊
    • text-decoration：規(guī)定添加到文本的裝飾
    • text-shadow：文本陰影效果
    • white-space：空白符的處理
    • unicode-bidi：設(shè)置文本的方向
  3. 盒子模型的屬性：width、height、margin、border、padding
  4. 背景屬性：background、background-color、background-image、background-repeat、background-position、background-attachment
  5. 定位屬性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
  6. 生成內(nèi)容屬性：content、counter-reset、counter-increment
  7. 輪廓樣式屬性：outline-style、outline-width、outline-color、outline
  8. 頁面樣式屬性：size、page-break-before、page-break-after
  9. 聲音樣式屬性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

二、有繼承性的屬性

  1. 字體系列屬性
    • font-family：字體系列
    • font-weight：字體的粗細
    • font-size：字體的大小
    • font-style：字體的風格
  2. 文本系列屬性
    • text-indent：文本縮進
    • text-align：文本水平對齊
    • line-height：行高
    • word-spacing：單詞之間的間距
    • letter-spacing：中文或者字母之間的間距
    • text-transform：控制文本大小寫（就是uppercase、lowercase、capitalize這三個）
    • color：文本顏色
  3. 元素可見性
    • visibility：控制元素顯示隱藏
  4. 列表布局屬性
    • list-style：列表風格，包括list-style-type、list-style-image等
  5. 光標屬性
    • cursor：光標顯示為何種形態(tài)

3. display的屬性值及其作用

屬性值 作用
none 元素不顯示，并且會從文檔流中移除。
block 塊類型。默認寬度為父元素寬度，可設(shè)置寬高，換行顯示。
inline 行內(nèi)元素類型。默認寬度為內(nèi)容寬度，不可設(shè)置寬高，同行顯示。
inline-block 默認寬度為內(nèi)容寬度，可以設(shè)置寬高，同行顯示。
list-item 像塊類型元素一樣顯示，并添加樣式列表標記。
table 此元素會作為塊級表格來顯示。
inherit 規(guī)定應(yīng)該從父元素繼承display屬性的值。

4. display的block、inline和inline-block的區(qū)別

（1）block：會獨占一行，多個元素會另起一行，可以設(shè)置width、height、margin和padding屬性；

（2）inline：元素不會獨占一行，設(shè)置width、height屬性無效。但可以設(shè)置水平方向的margin和padding屬性，不能設(shè)置垂直方向的padding和margin；

（3）inline-block：將對象設(shè)置為inline對象，但對象的內(nèi)容作為block對象呈現(xiàn)，之后的內(nèi)聯(lián)對象會被排列在同一行內(nèi)。

對于行內(nèi)元素和塊級元素，其特點如下：

（1）行內(nèi)元素

  • 設(shè)置寬高無效；
  • 可以設(shè)置水平方向的margin和padding屬性，不能設(shè)置垂直方向的padding和margin；
  • 不會自動換行；

（2）塊級元素

  • 可以設(shè)置寬高；
  • 設(shè)置margin和padding都有效；
  • 可以自動換行；
  • 多個塊狀，默認排列從上到下。

5. 隱藏元素的方法有哪些

  • display: none：渲染樹不會包含該渲染對象，因此該元素不會在頁面中占據(jù)位置，也不會響應(yīng)綁定的監(jiān)聽事件。
  • visibility: hidden：元素在頁面中仍占據(jù)空間，但是不會響應(yīng)綁定的監(jiān)聽事件。
  • opacity: 0：將元素的透明度設(shè)置為 0，以此來實現(xiàn)元素的隱藏。元素在頁面中仍然占據(jù)空間，并且能夠響應(yīng)元素綁定的監(jiān)聽事件。
  • position: absolute：通過使用絕對定位將元素移除可視區(qū)域內(nèi)，以此來實現(xiàn)元素的隱藏。
  • z-index: 負值：來使其他元素遮蓋住該元素，以此來實現(xiàn)隱藏。
  • clip/clip-path ：使用元素裁剪的方法來實現(xiàn)元素的隱藏，這種方法下，元素仍在頁面中占據(jù)位置，但是不會響應(yīng)綁定的監(jiān)聽事件。
  • transform: scale(0,0)：將元素縮放為 0，來實現(xiàn)元素的隱藏。這種方法下，元素仍在頁面中占據(jù)位置，但是不會響應(yīng)綁定的監(jiān)聽事件。

6. link和@import的區(qū)別

兩者都是外部引用CSS的方式，它們的區(qū)別如下：

  • link是XHTML標簽，除了加載CSS外，還可以定義RSS等其他事務(wù)；@import屬于CSS范疇，只能加載CSS。
  • link引用CSS時，在頁面載入時同時加載；@import需要頁面網(wǎng)頁完全載入以后加載。
  • link是XHTML標簽，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
  • link支持使用Javascript控制DOM去改變樣式；而@import不支持。

7. transition和animation的區(qū)別

  • transition是過渡屬性，強調(diào)過渡，它的實現(xiàn)需要觸發(fā)一個事件（比如鼠標移動上去，焦點，點擊等）才執(zhí)行動畫。它類似于flash的補間動畫，設(shè)置一個開始關(guān)鍵幀，一個結(jié)束關(guān)鍵幀。
  • animation是動畫屬性，它的實現(xiàn)不需要觸發(fā)事件，設(shè)定好時間之后可以自己執(zhí)行，且可以循環(huán)一個動畫。它也類似于flash的補間動畫，但是它可以設(shè)置多個關(guān)鍵幀（用@keyframe定義）完成動畫。

8. display:none與visibility:hidden的區(qū)別

這兩個屬性都是讓元素隱藏，不可見。兩者區(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)容會被讀取。

9. 偽元素和偽類的區(qū)別和作用？

  • 偽元素：在內(nèi)容元素的前后插入額外的元素或樣式，但是這些元素實際上并不在文檔中生成。它們只在外部顯示可見，但不會在文檔的源代碼中找到它們，因此，稱為“偽”元素。例如：
p::before {content:"第一章：";}
p::after {content:"Hot!";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}
  • 偽類：將特殊的效果添加到特定選擇器上。它是已有元素上添加類別的，不會產(chǎn)生新的元素。例如：
a:hover {color: #FF00FF}
p:first-child {color: red}

總結(jié)：偽類是通過在元素選擇器上加?偽類改變元素狀態(tài)，?偽元素通過對元素的操作進?對元素的改變。

10. 對requestAnimationframe的理解

實現(xiàn)動畫效果的方法比較多，Javascript 中可以通過定時器 setTimeout 來實現(xiàn)，CSS3 中可以使用 transition 和 animation 來實現(xiàn)，HTML5 中的 canvas 也可以實現(xiàn)。除此之外，HTML5 提供一個專門用于請求動畫的API，那就是 requestAnimationFrame，顧名思義就是請求動畫幀。

MDN對該方法的描述：

window.requestAnimationFrame() 告訴瀏覽器——你希望執(zhí)行一個動畫，并且要求瀏覽器在下次重繪之前調(diào)用指定的回調(diào)函數(shù)更新動畫。該方法需要傳入一個回調(diào)函數(shù)作為參數(shù)，該回調(diào)函數(shù)會在瀏覽器下一次重繪之前執(zhí)行。

語法： window.requestAnimationFrame(callback); 其中，callback是下一次重繪之前更新動畫幀所調(diào)用的函數(shù)(即上面所說的回調(diào)函數(shù))。該回調(diào)函數(shù)會被傳入DOMHighResTimeStamp參數(shù)，它表示requestAnimationFrame() 開始去執(zhí)行回調(diào)函數(shù)的時刻。該方法屬于宏任務(wù)，所以會在執(zhí)行完微任務(wù)之后再去執(zhí)行。

取消動畫：使用cancelAnimationFrame()來取消執(zhí)行動畫，該方法接收一個參數(shù)——requestAnimationFrame默認返回的id，只需要傳入這個id就可以取消動畫了。

優(yōu)勢：

  • CPU節(jié)能：使用SetTinterval 實現(xiàn)的動畫，當頁面被隱藏或最小化時，SetTinterval 仍然在后臺執(zhí)行動畫任務(wù)，由于此時頁面處于不可見或不可用狀態(tài)，刷新動畫是沒有意義的，完全是浪費CPU資源。而RequestAnimationFrame則完全不同，當頁面處于未激活的狀態(tài)下，該頁面的屏幕刷新任務(wù)也會被系統(tǒng)暫停，因此跟著系統(tǒng)走的RequestAnimationFrame也會停止渲染，當頁面被激活時，動畫就從上次停留的地方繼續(xù)執(zhí)行，有效節(jié)省了CPU開銷。
  • 函數(shù)節(jié)流：在高頻率事件( resize, scroll 等)中，為了防止在一個刷新間隔內(nèi)發(fā)生多次函數(shù)執(zhí)行，RequestAnimationFrame可保證每個刷新間隔內(nèi)，函數(shù)只被執(zhí)行一次，這樣既能保證流暢性，也能更好的節(jié)省函數(shù)執(zhí)行的開銷，一個刷新間隔內(nèi)函數(shù)執(zhí)行多次時沒有意義的，因為多數(shù)顯示器每16.7ms刷新一次，多次繪制并不會在屏幕上體現(xiàn)出來。
  • 減少DOM操作：requestAnimationFrame 會把每一幀中的所有DOM操作集中起來，在一次重繪或回流中就完成，并且重繪或回流的時間間隔緊緊跟隨瀏覽器的刷新頻率，一般來說，這個頻率為每秒60幀。

setTimeout執(zhí)行動畫的缺點：它通過設(shè)定間隔時間來不斷改變圖像位置，達到動畫效果。但是容易出現(xiàn)卡頓、抖動的現(xiàn)象；原因是：

  • settimeout任務(wù)被放入異步隊列，只有當主線程任務(wù)執(zhí)行完后才會執(zhí)行隊列中的任務(wù)，因此實際執(zhí)行時間總是比設(shè)定時間要晚；
  • settimeout的固定時間間隔不一定與屏幕刷新間隔時間相同，會引起丟幀。

11. 對盒模型的理解

CSS3中的盒模型有以下兩種：標準盒子模型、IE盒子模型


img

盒模型都是由四個部分組成的，分別是margin、border、padding和content。

標準盒模型和IE盒模型的區(qū)別在于設(shè)置width和height時，所對應(yīng)的范圍不同：

  • 標準盒模型的width和height屬性的范圍只包含了content，
  • IE盒模型的width和height屬性的范圍包含了border、padding和content。

可以通過修改元素的box-sizing屬性來改變元素的盒模型：

  • ?box-sizeing: content-box?表示標準盒模型（默認值）
  • ?box-sizeing: border-box?表示IE盒模型（怪異盒模型）

12. 為什么有時候?translate來改變位置?不是定位？

translate 是 transform 屬性的?個值。改變transform或opacity不會觸發(fā)瀏覽器重新布局（reflow）或重繪（repaint），只會觸發(fā)復(fù)合（compositions）。?改變絕對定位會觸發(fā)重新布局，進?觸發(fā)重繪和復(fù)合。transform使瀏覽器為元素創(chuàng)建?個 GPU 圖層，但改變絕對定位會使?到 CPU。 因此translate()更?效，可以縮短平滑動畫的繪制時間。 ?translate改變位置時，元素依然會占據(jù)其原始空間，絕對定位就不會發(fā)?這種情況。

13. li 與 li 之間有看不見的空白間隔是什么原因引起的？如何解決？

瀏覽器會把inline內(nèi)聯(lián)元素間的空白字符（空格、換行、Tab等）渲染成一個空格。為了美觀，通常是一個 <li>放在一行，這導(dǎo)致 <li>換行后產(chǎn)生換行字符，它變成一個空格，占用了一個字符的寬度。

解決辦法：

（1）為 ?<li>?設(shè)置float:left。不足：有些容器是不能設(shè)置浮動，如左右切換的焦點圖等。

（2）將所有 ?<li>?寫在同一行。不足：代碼不美觀。

（3）將 ?<ul>?內(nèi)的字符尺寸直接設(shè)為0，即font-size:0。不足：?<ul>?中的其他字符尺寸也被設(shè)為0，需要額外重新設(shè)定其他字符尺寸，且在Safari瀏覽器依然會出現(xiàn)空白間隔。

（4）消除 ?<ul>?的字符間隔letter-spacing:-8px，不足：這也設(shè)置了 ?<li>?內(nèi)的字符間隔，因此需要將 ?<li>?內(nèi)的字符間隔設(shè)為默認letter-spacing:normal。

14. CSS3中有哪些新特性

  • 新增各種CSS選擇器 （: not(.input)：所有 class 不是“input”的節(jié)點）
  • 圓角 （border-radius:8px）
  • 多列布局 （multi-column layout）
  • 陰影和反射 （Shadoweflect）
  • 文字特效 （text-shadow）
  • 文字渲染 （Text-decoration）
  • 線性漸變 （gradient）
  • 旋轉(zhuǎn) （transform）
  • 增加了旋轉(zhuǎn),縮放,定位,傾斜,動畫,多背景

15. 替換元素的概念及計算規(guī)則

img、input、textarea、select

通過修改某個屬性值呈現(xiàn)的內(nèi)容就可以被替換的元素就稱為“替換元素”。

替換元素除了內(nèi)容可替換這一特性以外，還有以下特性：

  • 內(nèi)容的外觀不受頁面上的CSS的影響：用專業(yè)的話講就是在樣式表現(xiàn)在CSS作用域之外。如何更改替換元素本身的外觀需要類似appearance屬性，或者瀏覽器自身暴露的一些樣式接口。
  • 有自己的尺寸：在Web中，很多替換元素在沒有明確尺寸設(shè)定的情況下，其默認的尺寸（不包括邊框）是300像素×150像素，如
  • 在很多CSS屬性上有自己的一套表現(xiàn)規(guī)則：比較具有代表性的就是vertical-align屬性，對于替換元素和非替換元素，vertical-align屬性值的解釋是不一樣的。比方說vertical-align的默認值的baseline，很簡單的屬性值，基線之意，被定義為字符x的下邊緣，而替換元素的基線卻被硬生生定義成了元素的下邊緣。
  • 所有的替換元素都是內(nèi)聯(lián)水平元素：也就是替換元素和替換元素、替換元素和文字都是可以在一行顯示的。但是，替換元素默認的display值卻是不一樣的，有的是inline，有的是inline-block。

替換元素的尺寸從內(nèi)而外分為三類：

  • 固有尺寸： 指的是替換內(nèi)容原本的尺寸。例如，圖片、視頻作為一個獨立文件存在的時候，都是有著自己的寬度和高度的。
  • HTML尺寸： 只能通過HTML原生屬性改變，這些HTML原生屬性包括的width和height屬性、的size屬性。
  • CSS尺寸： 特指可以通過CSS的width和height或者max-width/min-width和max-height/min-height設(shè)置的尺寸，對應(yīng)盒尺寸中的content box。

這三層結(jié)構(gòu)的計算規(guī)則具體如下：

（1）如果沒有CSS尺寸和HTML尺寸，則使用固有尺寸作為最終的寬高。

（2）如果沒有CSS尺寸，則使用HTML尺寸作為最終的寬高。

（3）如果有CSS尺寸，則最終尺寸由CSS屬性決定。

（4）如果“固有尺寸”含有固有的寬高比例，同時僅設(shè)置了寬度或僅設(shè)置了高度，則元素依然按照固有的寬高比例顯示。

（5）如果上面的條件都不符合，則最終寬度表現(xiàn)為300像素，高度為150像素。

（6）內(nèi)聯(lián)替換元素和塊級替換元素使用上面同一套尺寸計算規(guī)則。

16. 常見的圖片格式及使用場景

（1）BMP，是無損的、既支持索引色也支持直接色的點陣圖。這種圖片格式幾乎沒有對數(shù)據(jù)進行壓縮，所以BMP格式的圖片通常是較大的文件。

（2）GIF是無損的、采用索引色的點陣圖。采用LZW壓縮算法進行編碼。文件小，是GIF格式的優(yōu)點，同時，GIF格式還具有支持動畫以及透明的優(yōu)點。但是GIF格式僅支持8bit的索引色，所以GIF格式適用于對色彩要求不高同時需要文件體積較小的場景。

（3）JPEG是有損的、采用直接色的點陣圖。JPEG的圖片的優(yōu)點是采用了直接色，得益于更豐富的色彩，JPEG非常適合用來存儲照片，與GIF相比，JPEG不適合用來存儲企業(yè)Logo、線框類的圖。因為有損壓縮會導(dǎo)致圖片模糊，而直接色的選用，又會導(dǎo)致圖片文件較GIF更大。

（4）PNG-8是無損的、使用索引色的點陣圖。PNG是一種比較新的圖片格式，PNG-8是非常好的GIF格式替代者，在可能的情況下，應(yīng)該盡可能的使用PNG-8而不是GIF，因為在相同的圖片效果下，PNG-8具有更小的文件體積。除此之外，PNG-8還支持透明度的調(diào)節(jié)，而GIF并不支持。除非需要動畫的支持，否則沒有理由使用GIF而不是PNG-8。

（5）PNG-24是無損的、使用直接色的點陣圖。PNG-24的優(yōu)點在于它壓縮了圖片的數(shù)據(jù)，使得同樣效果的圖片，PNG-24格式的文件大小要比BMP小得多。當然，PNG24的圖片還是要比JPEG、GIF、PNG-8大得多。

（6）SVG是無損的矢量圖。SVG是矢量圖意味著SVG圖片由直線和曲線以及繪制它們的方法組成。當放大SVG圖片時，看到的還是線和曲線，而不會出現(xiàn)像素點。SVG圖片在放大時，不會失真，所以它適合用來繪制Logo、Icon等。

（7）WebP是谷歌開發(fā)的一種新圖片格式，WebP是同時支持有損和無損壓縮的、使用直接色的點陣圖。從名字就可以看出來它是為Web而生的，什么叫為Web而生呢？就是說相同質(zhì)量的圖片，WebP具有更小的文件體積?，F(xiàn)在網(wǎng)站上充滿了大量的圖片，如果能夠降低每一個圖片的文件大小，那么將大大減少瀏覽器和服務(wù)器之間的數(shù)據(jù)傳輸量，進而降低訪問延遲，提升訪問體驗。目前只有Chrome瀏覽器和Opera瀏覽器支持WebP格式，兼容性不太好。

  • 在無損壓縮的情況下，相同質(zhì)量的WebP圖片，文件大小要比PNG小26%；
  • 在有損壓縮的情況下，具有相同圖片精度的WebP圖片，文件大小要比JPEG小25%~34%；
  • WebP圖片格式支持圖片透明度，一個無損壓縮的WebP圖片，如果要支持透明度只需要22%的格外文件大小。

17. 對 CSSSprites 的理解

CSSSprites（精靈圖），將一個頁面涉及到的所有圖片都包含到一張大圖中去，然后利用CSS的 background-image，background-repeat，background-position屬性的組合進行背景定位。

優(yōu)點：

  • 利用 ?CSS Sprites?能很好地減少網(wǎng)頁的http請求，從而大大提高了頁面的性能，這是 ?CSS Sprites?最大的優(yōu)點；
  • ?CSS Sprites?能減少圖片的字節(jié)，把3張圖片合并成1張圖片的字節(jié)總是小于這3張圖片的字節(jié)總和。

缺點：

  • 在圖片合并時，要把多張圖片有序的、合理的合并成一張圖片，還要留好足夠的空間，防止板塊內(nèi)出現(xiàn)不必要的背景。在寬屏及高分辨率下的自適應(yīng)頁面，如果背景不夠?qū)挘苋菀壮霈F(xiàn)背景斷裂；
  • ?CSSSprites?在開發(fā)的時候相對來說有點麻煩，需要借助 ?photoshop?或其他工具來對每個背景單元測量其準確的位置。
  • 維護方面：?CSS Sprites?在維護的時候比較麻煩，頁面背景有少許改動時，就要改這張合并的圖片，無需改的地方盡量不要動，這樣避免改動更多的 ?CSS?，如果在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的字節(jié)就增加了，還要改動 ?CSS?。

18. 什么是物理像素，邏輯像素和像素密度，為什么在移動端開發(fā)時需要用到@3x, @2x這種圖片？

以 iPhone XS 為例，當寫 CSS 代碼時，針對于單位 px，其寬度為 414px & 896px，也就是說當賦予一個 DIV元素寬度為 414px，這個 DIV 就會填滿手機的寬度；

而如果有一把尺子來實際測量這部手機的物理像素，實際為 1242*2688 物理像素；經(jīng)過計算可知，1242/414=3，也就是說，在單邊上，一個邏輯像素=3個物理像素，就說這個屏幕的像素密度為 3，也就是常說的 3 倍屏。

對于圖片來說，為了保證其不失真，1 個圖片像素至少要對應(yīng)一個物理像素，假如原始圖片是 500300 像素，那么在 3 倍屏上就要放一個 1500900 像素的圖片才能保證 1 個物理像素至少對應(yīng)一個圖片像素，才能不失真。


當然，也可以針對所有屏幕，都只提供最高清圖片。雖然低密度屏幕用不到那么多圖片像素，而且會因為下載多余的像素造成帶寬浪費和下載延遲，但從結(jié)果上說能保證圖片在所有屏幕上都不會失真。

還可以使用 CSS 媒體查詢來判斷不同的像素密度，從而選擇不同的圖片:

my-image { background: (low.png); }
@media only screen and (min-device-pixel-ratio: 1.5) {
  #my-image { background: (high.png); }
}

19. margin 和 padding 的使用場景

  • 需要在border外側(cè)添加空白，且空白處不需要背景（色）時，使用 margin；
  • 需要在border內(nèi)測添加空白，且空白處需要背景（色）時，使用 padding。

20. 對line-height 的理解及其賦值方式

（1）line-height的概念：

  • line-height 指一行文本的高度，包含了字間距，實際上是下一行基線到上一行基線距離；
  • 如果一個標簽沒有定義 height 屬性，那么其最終表現(xiàn)的高度由 line-height 決定；
  • 一個容器沒有設(shè)置高度，那么撐開容器高度的是 line-height，而不是容器內(nèi)的文本內(nèi)容；
  • 把 line-height 值設(shè)置為 height 一樣大小的值可以實現(xiàn)單行文字的垂直居中；
  • line-height 和 height 都能撐開一個高度；

（2）line-height 的賦值方式：

  • 帶單位：px 是固定值，而 em 會參考父元素 font-size 值計算自身的行高
  • 純數(shù)字：會把比例傳遞給后代。例如，父級行高為 1.5，子元素字體為 18px，則子元素行高為 1.5 * 18 = 27px
  • 百分比：將計算后的值傳遞給后代

21. CSS 優(yōu)化和提高性能的方法有哪些？

加載性能：

（1）css壓縮：將寫好的css進行打包壓縮，可以減小文件體積。

（2）css單一樣式：當需要下邊距和左邊距的時候，很多時候會選擇使用 margin:top 0 bottom 0；但margin-bottom:bottom;margin-left:left;執(zhí)行效率會更高。

（3）減少使用@import，建議使用link，因為后者在頁面加載時一起加載，前者是等待頁面加載完成之后再進行加載。

選擇器性能：

（1）關(guān)鍵選擇器（key selector）。選擇器的最后面的部分為關(guān)鍵選擇器（即用來匹配目標元素的部分）。CSS選擇符是從右到左進行匹配的。當使用后代選擇器的時候，瀏覽器會遍歷所有子元素來確定是否是指定的元素等等；

（2）如果規(guī)則擁有ID選擇器作為其關(guān)鍵選擇器，則不要為規(guī)則增加標簽。過濾掉無關(guān)的規(guī)則（這樣樣式系統(tǒng)就不會浪費時間去匹配它們了）。

（3）避免使用通配規(guī)則，如*{}計算次數(shù)驚人，只對需要用到的元素進行選擇。

（4）盡量少的去對標簽進行選擇，而是用class。

（5）盡量少的去使用后代選擇器，降低選擇器的權(quán)重值。后代選擇器的開銷是最高的，盡量將選擇器的深度降到最低，最高不要超過三層，更多的使用類來關(guān)聯(lián)每一個標簽元素。

（6）了解哪些屬性是可以通過繼承而來的，然后避免對這些屬性重復(fù)指定規(guī)則。

渲染性能：

（1）慎重使用高性能屬性：浮動、定位。

（2）盡量減少頁面重排、重繪。

（3）去除空規(guī)則：｛｝?？找?guī)則的產(chǎn)生原因一般來說是為了預(yù)留樣式。去除這些空規(guī)則無疑能減少css文檔體積。

（4）屬性值為0時，不加單位。

（5）屬性值為浮動小數(shù)0.**，可以省略小數(shù)點之前的0。

（6）標準化各種瀏覽器前綴：帶瀏覽器前綴的在前。標準屬性在后。

（7）不使用@import前綴，它會影響css的加載速度。

（8）選擇器優(yōu)化嵌套，盡量避免層級過深。

（9）css雪碧圖，同一頁面相近部分的小圖標，方便使用，減少頁面的請求次數(shù)，但是同時圖片本身會變大，使用時，優(yōu)劣考慮清楚，再使用。

（10）正確使用display的屬性，由于display的作用，某些樣式組合會無效，徒增樣式體積的同時也影響解析性能。

（11）不濫用web字體。對于中文網(wǎng)站來說WebFonts可能很陌生，國外卻很流行。web fonts通常體積龐大，而且一些瀏覽器在下載web fonts時會阻塞頁面渲染損傷性能。

可維護性、健壯性：

（1）將具有相同屬性的樣式抽離出來，整合并通過class在頁面中進行使用，提高css的可維護性。

（2）樣式與內(nèi)容分離：將css代碼定義到外部css中。

22. CSS預(yù)處理器/后處理器是什么？為什么要使用它們？

預(yù)處理器，如：less，sass，stylus，用來預(yù)編譯 sass或者 less，增加了 css代碼的復(fù)用性。層級，mixin， 變量，循環(huán)， 函數(shù)等對編寫以及開發(fā)UI組件都極為方便。

后處理器， 如： postCss，通常是在完成的樣式表中根據(jù) css規(guī)范處理 css，讓其更加有效。目前最常做的是給 css屬性添加瀏覽器私有前綴，實現(xiàn)跨瀏覽器兼容性的問題。

css預(yù)處理器為 css增加一些編程特性，無需考慮瀏覽器的兼容問題，可以在 CSS中使用變量，簡單的邏輯程序，函數(shù)等在編程語言中的一些基本的性能，可以讓 css更加的簡潔，增加適應(yīng)性以及可讀性，可維護性等。

其它 css預(yù)處理器語言：Sass（Scss）, Less, Stylus, Turbine, Swithch css, CSS Cacheer, DT Css。

使用原因：

  • 結(jié)構(gòu)清晰， 便于擴展
  • 可以很方便的屏蔽瀏覽器私有語法的差異
  • 可以輕松實現(xiàn)多重繼承
  • 完美的兼容了 ?CSS?代碼，可以應(yīng)用到老項目中

23. ::before 和 :after 的雙冒號和單冒號有什么區(qū)別？

（1）冒號(:)用于 CSS3偽類，雙冒號(::)用于 CSS3偽元素。

（2）::before就是以一個子元素的存在，定義在元素主體內(nèi)容之前的一個偽元素。并不存在于 dom之中，只存在在頁面之中。

注意： :before 和 :after 這兩個偽元素，是在 CSS2.1里新出現(xiàn)的。起初，偽元素的前綴使用的是單冒號語法，但隨著 Web的進化，在 CSS3的規(guī)范里，偽元素的語法被修改成使用雙冒號，成為 ::before、::after。

24. display:inline-block 什么時候會顯示間隙？

  • 有空格時會有間隙，可以刪除空格解決；
  • ?margin?正值時，可以讓 ?margin?使用負值解決；
  • 使用 ?font-size?時，可通過設(shè)置 ?font-size:0?、?letter-spacing?、?word-spacing?解決；

25. 單行、多行文本溢出隱藏

  • 單行文本溢出
overflow: hidden;            // 溢出隱藏
text-overflow: ellipsis;      // 溢出用省略號顯示
white-space: nowrap;         // 規(guī)定段落中的文本不進行換行
  • 多行文本溢出
overflow: hidden;            // 溢出隱藏
text-overflow: ellipsis;     // 溢出用省略號顯示
display:-webkit-box;         // 作為彈性伸縮盒子模型顯示。
-webkit-box-orient:vertical; // 設(shè)置伸縮盒子的子元素排列方式：從上到下垂直排列
-webkit-line-clamp:3;        // 顯示的行數(shù)

注意：由于上面的三個屬性都是 CSS3 的屬性，沒有瀏覽器可以兼容，所以要在前面加一個 -webkit- 來兼容一部分瀏覽器。

26. Sass、Less 是什么？為什么要使用他們？

他們都是 CSS 預(yù)處理器，是 CSS 上的一種抽象層。他們是一種特殊的語法/語言編譯成 CSS。 例如 Less 是一種動態(tài)樣式語言，將 CSS 賦予了動態(tài)語言的特性，如變量，繼承，運算， 函數(shù)，LESS 既可以在客戶端上運行 (支持 IE 6+, Webkit, Firefox)，也可以在服務(wù)端運行 (借助 Node.js)。

為什么要使用它們？

  • 結(jié)構(gòu)清晰，便于擴展。 可以方便地屏蔽瀏覽器私有語法差異。封裝對瀏覽器語法差異的重復(fù)處理， 減少無意義的機械勞動。
  • 可以輕松實現(xiàn)多重繼承。 完全兼容 CSS 代碼，可以方便地應(yīng)用到老項目中。LESS 只是在 CSS 語法上做了擴展，所以老的 CSS 代碼也可以與 LESS 代碼一同編譯。

27. 對媒體查詢的理解？

媒體查詢由?個可選的媒體類型和零個或多個使?媒體功能的限制了樣式表范圍的表達式組成，例如寬度、?度和顏?。媒體查詢，添加?CSS3，允許內(nèi)容的呈現(xiàn)針對?個特定范圍的輸出設(shè)備?進?裁剪，?不必改變內(nèi)容本身，適合web??應(yīng)對不同型號的設(shè)備?做出對應(yīng)的響應(yīng)適配。

媒體查詢包含?個可選的媒體類型和滿?CSS3規(guī)范的條件下，包含零個或多個表達式，這些表達式描述了媒體特征，最終會被解析為true或false。如果媒體查詢中指定的媒體類型匹配展示?檔所使?的設(shè)備類型，并且所有的表達式的值都是true，那么該媒體查詢的結(jié)果為true。那么媒體查詢內(nèi)的樣式將會?效。 

<!-- link元素中的CSS媒體查詢 --> 
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> 
<!-- 樣式表中的CSS媒體查詢 --> 
<style> 
@media (max-width: 600px) { 
  .facet_sidebar { 
    display: none; 
  } 
}
</style>

簡單來說，使用 @media 查詢，可以針對不同的媒體類型定義不同的樣式。@media 可以針對不同的屏幕尺寸設(shè)置不同的樣式，特別是需要設(shè)置設(shè)計響應(yīng)式的頁面，@media 是非常有用的。當重置瀏覽器大小的過程中，頁面也會根據(jù)瀏覽器的寬度和高度重新渲染頁面。

28. 對 CSS 工程化的理解

CSS 工程化是為了解決以下問題：

  1. 宏觀設(shè)計：CSS 代碼如何組織、如何拆分、模塊結(jié)構(gòu)怎樣設(shè)計？
  2. 編碼優(yōu)化：怎樣寫出更好的 CSS？
  3. 構(gòu)建：如何處理我的 CSS，才能讓它的打包結(jié)果最優(yōu)？
  4. 可維護性：代碼寫完了，如何最小化它后續(xù)的變更成本？如何確保任何一個同事都能輕松接手？

以下三個方向都是時下比較流行的、普適性非常好的 CSS 工程化實踐：

  • 預(yù)處理器：Less、 Sass 等；
  • 重要的工程化插件： PostCss；
  • Webpack loader 等 。

基于這三個方向，可以衍生出一些具有典型意義的子問題，這里我們逐個來看：

（1）預(yù)處理器：為什么要用預(yù)處理器？它的出現(xiàn)是為了解決什么問題？

預(yù)處理器，其實就是 CSS 世界的“輪子”。預(yù)處理器支持我們寫一種類似 CSS、但實際并不是 CSS 的語言，然后把它編譯成 CSS 代碼：


那為什么寫 CSS 代碼寫得好好的，偏偏要轉(zhuǎn)去寫“類 CSS”呢？這就和本來用 JS 也可以實現(xiàn)所有功能，但最后卻寫 React 的 jsx 或者 Vue 的模板語法一樣——為了爽！要想知道有了預(yù)處理器有多爽，首先要知道的是傳統(tǒng) CSS 有多不爽。隨著前端業(yè)務(wù)復(fù)雜度的提高，前端工程中對 CSS 提出了以下的訴求：

  1. 宏觀設(shè)計上：我們希望能優(yōu)化 CSS 文件的目錄結(jié)構(gòu)，對現(xiàn)有的 CSS 文件實現(xiàn)復(fù)用；
  2. 編碼優(yōu)化上：我們希望能寫出結(jié)構(gòu)清晰、簡明易懂的 CSS，需要它具有一目了然的嵌套層級關(guān)系，而不是無差別的一鋪到底寫法；我們希望它具有變量特征、計算能力、循環(huán)能力等等更強的可編程性，這樣我們可以少寫一些無用的代碼；
  3. 可維護性上：更強的可編程性意味著更優(yōu)質(zhì)的代碼結(jié)構(gòu)，實現(xiàn)復(fù)用意味著更簡單的目錄結(jié)構(gòu)和更強的拓展能力，這兩點如果能做到，自然會帶來更強的可維護性。

這三點是傳統(tǒng) CSS 所做不到的，也正是預(yù)處理器所解決掉的問題。預(yù)處理器普遍會具備這樣的特性：

  • 嵌套代碼的能力，通過嵌套來反映不同 css 屬性之間的層級關(guān)系 ；
  • 支持定義 css 變量；
  • 提供計算函數(shù)；
  • 允許對代碼片段進行 extend 和 mixin；
  • 支持循環(huán)語句的使用；
  • 支持將 CSS 文件模塊化，實現(xiàn)復(fù)用。

（2）PostCss：PostCss 是如何工作的？我們在什么場景下會使用 PostCss？

PostCss 仍然是一個對 CSS 進行解析和處理的工具，它會對 CSS 做這樣的事情：

img

它和預(yù)處理器的不同就在于，預(yù)處理器處理的是 類CSS，而 PostCss 處理的就是 CSS 本身。Babel 可以將高版本的 JS 代碼轉(zhuǎn)換為低版本的 JS 代碼。PostCss 做的是類似的事情：它可以編譯尚未被瀏覽器廣泛支持的先進的 CSS 語法，還可以自動為一些需要額外兼容的語法增加前綴。更強的是，由于 PostCss 有著強大的插件機制，支持各種各樣的擴展，極大地強化了 CSS 的能力。

PostCss 在業(yè)務(wù)中的使用場景非常多：

  • 提高 CSS 代碼的可讀性：PostCss 其實可以做類似預(yù)處理器能做的工作；
  • 當我們的 CSS 代碼需要適配低版本瀏覽器時，PostCss 的 Autoprefixer 插件可以幫助我們自動增加瀏覽器前綴；
  • 允許我們編寫面向未來的 CSS：PostCss 能夠幫助我們編譯 CSS next 代碼；

（3）Webpack 能處理 CSS 嗎？如何實現(xiàn)？

Webpack 能處理 CSS 嗎：

  • Webpack 在裸奔的狀態(tài)下，是不能處理 CSS 的，Webpack 本身是一個面向 JavaScript 且只能處理 JavaScript 代碼的模塊化打包工具；
  • Webpack 在 loader 的輔助下，是可以處理 CSS 的。

如何用 Webpack 實現(xiàn)對 CSS 的處理：

  • Webpack 中操作 CSS 需要使用的兩個關(guān)鍵的 loader：css-loader 和 style-loader
  • 注意，答出“用什么”有時候可能還不夠，面試官會懷疑你是不是在背答案，所以你還需要了解每個 loader 都做了什么事情：
    • css-loader：導(dǎo)入 CSS 模塊，對 CSS 代碼進行編譯處理；
    • style-loader：創(chuàng)建style標簽，把 CSS 內(nèi)容寫入標簽。

在實際使用中，css-loader 的執(zhí)行順序一定要安排在 style-loader 的前面。因為只有完成了編譯過程，才可以對 css 代碼進行插入；若提前插入了未編譯的代碼，那么 webpack 是無法理解這坨東西的，它會無情報錯。

29. 如何判斷元素是否到達可視區(qū)域

以圖片顯示為例：

  • ?window.innerHeight? 是瀏覽器可視區(qū)的高度；
  • ?document.body.scrollTop || document.documentElement.scrollTop? 是瀏覽器滾動的過的距離；
  • ?imgs.offsetTop? 是元素頂部距離文檔頂部的高度（包括滾動條的距離）；
  • 內(nèi)容達到顯示區(qū)域的：?img.offsetTop < window.innerHeight + document.body.scrollTop;?

img

30. z-index屬性在什么情況下會失效

通常 z-index 的使用是在有兩個重疊的標簽，在一定的情況下控制其中一個在另一個的上方或者下方出現(xiàn)。z-index值越大就越是在上層。z-index元素的position屬性需要是relative，absolute或是fixed。

z-index屬性在下列情況下會失效：

  • 父元素position為relative時，子元素的z-index失效。解決：父元素position改為absolute或static；
  • 元素沒有設(shè)置position屬性為非static屬性。解決：設(shè)置該元素的position屬性為relative，absolute或是fixed中的一種；
  • 元素在設(shè)置z-index的同時還設(shè)置了float浮動。解決：float去除，改為display：inline-block；

二、頁面布局

1. 常見的CSS布局單位

首先將獲得1px 與 vw之前的比例關(guān)系 再將html標簽中的font-size定義為多少vw 然后就使用rem來作為單位 常用的布局單位包括像素（px），百分比（%），em，rem，vw/vh。

（1）像素（px）是頁面布局的基礎(chǔ)，一個像素表示終端（電腦、手機、平板等）屏幕所能顯示的最小的區(qū)域，像素分為兩種類型：CSS像素和物理像素：

  • CSS像素：為web開發(fā)者提供，在CSS中使用的一個抽象單位；
  • 物理像素：只與設(shè)備的硬件密度有關(guān)，任何設(shè)備的物理像素都是固定的。

（2）百分比（%），當瀏覽器的寬度或者高度發(fā)生變化時，通過百分比單位可以使得瀏覽器中的組件的寬和高隨著瀏覽器的變化而變化，從而實現(xiàn)響應(yīng)式的效果。一般認為子元素的百分比相對于直接父元素。

（3）em和rem相對于px更具靈活性，它們都是相對長度單位，它們之間的區(qū)別：em相對于父元素，rem相對于根元素。

  • em： 文本相對長度單位。相對于當前對象內(nèi)文本的字體尺寸。如果當前行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認字體尺寸(默認16px)。(相對父元素的字體大小倍數(shù))。
  • rem： rem是CSS3新增的一個相對單位，相對于根元素（html元素）的font-size的倍數(shù)。作用：利用rem可以實現(xiàn)簡單的響應(yīng)式布局，可以利用html元素中字體的大小與屏幕間的比值來設(shè)置font-size的值，以此實現(xiàn)當屏幕分辨率變化時讓元素也隨之變化。

（4）vw/vh是與視圖窗口有關(guān)的單位，vw表示相對于視圖窗口的寬度，vh表示相對于視圖窗口高度，除了vw和vh外，還有vmin和vmax兩個相關(guān)的單位。

  • vw：相對于視窗的寬度，視窗寬度是100vw；
  • vh：相對于視窗的高度，視窗高度是100vh；
  • vmin：vw和vh中的較小值；
  • vmax：vw和vh中的較大值；

vw/vh 和百分比很類似，兩者的區(qū)別：

  • 百分比（?%?）：大部分相對于祖先元素，也有相對于自身的情況比如（border-radius、translate等)
  • vw/vm：相對于視窗的尺寸

2. px、em、rem的區(qū)別及使用場景

三者的區(qū)別：

  • px是固定的像素，一旦設(shè)置了就無法因為適應(yīng)頁面大小而改變。
  • em和rem相對于px更具有靈活性，他們是相對長度單位，其長度不是固定的，更適用于響應(yīng)式布局。
  • em是相對于其父元素來設(shè)置字體大小，這樣就會存在一個問題，進行任何元素設(shè)置，都有可能需要知道他父元素的大小。而rem是相對于根元素，這樣就意味著，只需要在根元素確定一個參考值。

使用場景：

  • 對于只需要適配少部分移動設(shè)備，且分辨率對頁面影響不大的，使用px即可 。
  • 對于需要適配各種移動設(shè)備，使用rem，例如需要適配iPhone和iPad等分辨率差別比較挺大的設(shè)備。

3. 兩欄布局的實現(xiàn)

一般兩欄布局指的是左邊一欄寬度固定，右邊一欄寬度自適應(yīng)，兩欄布局的具體實現(xiàn)：

  • 利用浮動，將左邊元素寬度設(shè)置為200px，并且設(shè)置向左浮動。將右邊元素的margin-left設(shè)置為200px，寬度設(shè)置為auto（默認為auto，撐滿整個父元素）。
.outer {
  height: 100px;
}
.left {
  float: left;
  width: 200px;
  background: tomato;
}
.right {
  margin-left: 200px;
  width: auto;
  background: gold;
}
  • 利用浮動，左側(cè)元素設(shè)置固定大小，并左浮動，右側(cè)元素設(shè)置overflow: hidden; 這樣右邊就觸發(fā)了BFC，BFC的區(qū)域不會與浮動元素發(fā)生重疊，所以兩側(cè)就不會發(fā)生重疊。
.left{
     width: 100px;
     height: 200px;
     background: red;
     float: left;
 }
 .right{
     height: 300px;
     background: blue;
     overflow: hidden;
 }
  • 利用flex布局，將左邊元素設(shè)置為固定寬度200px，將右邊的元素設(shè)置為flex:1。
.outer {
  display: flex;
  height: 100px;
}
.left {
  width: 200px;
  background: tomato;
}
.right {
  flex: 1;
  background: gold;
}
  • 利用絕對定位，將父級元素設(shè)置為相對定位。左邊元素設(shè)置為absolute定位，并且寬度設(shè)置為200px。將右邊元素的margin-left的值設(shè)置為200px。
.outer {
  position: relative;
  height: 100px;
}
.left {
  position: absolute;
  width: 200px;
  height: 100px;
  background: tomato;
}
.right {
  margin-left: 200px;
  background: gold;
}
  • 利用絕對定位，將父級元素設(shè)置為相對定位。左邊元素寬度設(shè)置為200px，右邊元素設(shè)置為絕對定位，左邊定位為200px，其余方向定位為0。
.outer {
  position: relative;
  height: 100px;
}
.left {
  width: 200px;
  background: tomato;
}
.right {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 200px;
  background: gold;
}

4. 三欄布局的實現(xiàn)

三欄布局一般指的是頁面中一共有三欄，左右兩欄寬度固定，中間自適應(yīng)的布局，三欄布局的具體實現(xiàn)：

  • 利用絕對定位，左右兩欄設(shè)置為絕對定位，中間設(shè)置對應(yīng)方向大小的margin的值。
.outer {
  position: relative;
  height: 100px;
}

.left {
  position: absolute;
  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  margin-left: 100px;
  margin-right: 200px;
  height: 100px;
  background: lightgreen;
}
  • 利用flex布局，左右兩欄設(shè)置固定大小，中間一欄設(shè)置為flex:1。
.outer {
  display: flex;
  height: 100px;
}

.left {
  width: 100px;
  background: tomato;
}

.right {
  width: 100px;
  background: gold;
}

.center {
  flex: 1;
  background: lightgreen;
}
  • 利用浮動，左右兩欄設(shè)置固定大小，并設(shè)置對應(yīng)方向的浮動。中間一欄設(shè)置左右兩個方向的margin值，注意這種方式，中間一欄必須放到最后：
.outer {
  height: 100px;
}

.left {
  float: left;
  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  float: right;
  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  height: 100px;
  margin-left: 100px;
  margin-right: 200px;
  background: lightgreen;
}
  • 圣杯布局，利用浮動和負邊距來實現(xiàn)。父級元素設(shè)置左右的 padding，三列均設(shè)置向左浮動，中間一列放在最前面，寬度設(shè)置為父級元素的寬度，因此后面兩列都被擠到了下一行，通過設(shè)置 margin 負值將其移動到上一行，再利用相對定位，定位到兩邊。
.outer {
  height: 100px;
  padding-left: 100px;
  padding-right: 200px;
}

.left {
  position: relative;
  left: -100px;

  float: left;
  margin-left: -100%;

  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  position: relative;
  left: 200px;

  float: right;
  margin-left: -200px;

  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  float: left;

  width: 100%;
  height: 100px;
  background: lightgreen;
}
  • 雙飛翼布局，雙飛翼布局相對于圣杯布局來說，左右位置的保留是通過中間列的 margin 值來實現(xiàn)的，而不是通過父元素的 padding 來實現(xiàn)的。本質(zhì)上來說，也是通過浮動和外邊距負值來實現(xiàn)的。
.outer {
  height: 100px;
}

.left {
  float: left;
  margin-left: -100%;

  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  float: left;
  margin-left: -200px;

  width: 200px;
  height: 100px;
  background: gold;
}

.wrapper {
  float: left;

  width: 100%;
  height: 100px;
  background: lightgreen;
}

.center {
  margin-left: 100px;
  margin-right: 200px;
  height: 100px;
}

水平垂直居中的實現(xiàn)

  • 利用絕對定位，先將元素的左上角通過top:50%和left:50%定位到頁面的中心，然后再通過translate來調(diào)整元素的中心點到頁面的中心。該方法需要考慮瀏覽器兼容問題。
.parent {
    position: relative;
}
 
.child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
  • 利用絕對定位，設(shè)置四個方向的值都為0，并將margin設(shè)置為auto，由于寬高固定，因此對應(yīng)方向?qū)崿F(xiàn)平分，可以實現(xiàn)水平和垂直方向上的居中。該方法適用于盒子有寬高的情況：
.parent {
    position: relative;
}
 
.child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
  • 利用絕對定位，先將元素的左上角通過top:50%和left:50%定位到頁面的中心，然后再通過margin負值來調(diào)整元素的中心點到頁面的中心。該方法適用于盒子寬高已知的情況
.parent {
    position: relative;
}
 
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;     /* 自身 height 的一半 */
    margin-left: -50px;    /* 自身 width 的一半 */
}
  • 使用flex布局，通過align-items:center和justify-content:center設(shè)置容器的垂直和水平方向上為居中對齊，然后它的子元素也可以實現(xiàn)垂直和水平的居中。該方法要考慮兼容的問題，該方法在移動端用的較多：
.parent {
    display: flex;
    justify-content:center;
    align-items:center;
}

6. 如何根據(jù)設(shè)計稿進行移動端適配？

移動端適配主要有兩個維度：

  • 適配不同像素密度，針對不同的像素密度，使用 CSS 媒體查詢，選擇不同精度的圖片，以保證圖片不會失真；
  • 適配不同屏幕大小，由于不同的屏幕有著不同的邏輯像素大小，所以如果直接使用 px 作為開發(fā)單位，會使得開發(fā)的頁面在某一款手機上可以準確顯示，但是在另一款手機上就會失真。為了適配不同屏幕的大小，應(yīng)按照比例來還原設(shè)計稿的內(nèi)容。

為了能讓頁面的尺寸自適應(yīng)，可以使用 rem，em，vw，vh 等相對單位。

7. 對Flex布局的理解及其使用場景

Flex是FlexibleBox的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。任何一個容器都可以指定為Flex布局。行內(nèi)元素也可以使用Flex布局。注意，設(shè)為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。采用Flex布局的元素，稱為Flex容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱"項目"。容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis），項目默認沿水平主軸排列。

以下6個屬性設(shè)置在容器上：

  • flex-direction屬性決定主軸的方向（即項目的排列方向）。
  • flex-wrap屬性定義，如果一條軸線排不下，如何換行。
  • flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。
  • justify-content屬性定義了項目在主軸上的對齊方式。
  • align-items屬性定義項目在交叉軸上如何對齊。
  • align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。

以下6個屬性設(shè)置在項目上：

  • order屬性定義項目的排列順序。數(shù)值越小，排列越靠前，默認為0。
  • flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。
  • flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。
  • flex-basis屬性定義了在分配多余空間之前，項目占據(jù)的主軸空間。瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。
  • flex屬性是flex-grow，flex-shrink和flex-basis的簡寫，默認值為0 1 auto。
  • align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。

簡單來說：

flex布局是CSS3新增的一種布局方式，可以通過將一個元素的display屬性值設(shè)置為flex從而使它成為一個flex容器，它的所有子元素都會成為它的項目。一個容器默認有兩條軸：一個是水平的主軸，一個是與主軸垂直的交叉軸。可以使用flex-direction來指定主軸的方向?？梢允褂胘ustify-content來指定元素在主軸上的排列方式，使用align-items來指定元素在交叉軸上的排列方式。還可以使用flex-wrap來規(guī)定當一行排列不下時的換行方式。對于容器中的項目，可以使用order屬性來指定項目的排列順序，還可以使用flex-grow來指定當排列空間有剩余的時候，項目的放大比例，還可以使用flex-shrink來指定當排列空間不足時，項目的縮小比例。

8. 響應(yīng)式設(shè)計的概念及基本原理

響應(yīng)式網(wǎng)站設(shè)計 （Responsive Web design）是一個網(wǎng)站能夠兼容多個終端，而不是為每一個終端做一個特定的版本。

關(guān)于原理： 基本原理是通過媒體查詢 （@media）查詢檢測不同的設(shè)備屏幕尺寸做處理。

關(guān)于兼容： 頁面頭部必須有mate聲明的 viewport。 

<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>

三、定位與浮動

1. 為什么需要清除浮動？清除浮動的方式

浮動的定義： 非IE瀏覽器下，容器不設(shè)高度且子元素浮動時，容器高度不能被內(nèi)容撐開。 此時，內(nèi)容會溢出到容器外面而影響布局。這種現(xiàn)象被稱為浮動（溢出）。

浮動的工作原理：

  • 浮動元素脫離文檔流，不占據(jù)空間（引起“高度塌陷”現(xiàn)象）
  • 浮動元素碰到包含它的邊框或者其他浮動元素的邊框停留

浮動元素可以左右移動，直到遇到另一個浮動元素或者遇到它外邊緣的包含框。浮動框不屬于文檔流中的普通流，當元素浮動之后，不會影響塊級元素的布局，只會影響內(nèi)聯(lián)元素布局。此時文檔流中的普通流就會表現(xiàn)得該浮動框不存在一樣的布局模式。當包含框的高度小于浮動框的時候，此時就會出現(xiàn)“高度塌陷”。

浮動元素引起的問題？

  • 父元素的高度無法被撐開，影響與父元素同級的元素
  • 與浮動元素同級的非浮動元素會跟隨其后
  • 若浮動的元素不是第一個元素，則該元素之前的元素也要浮動，否則會影響頁面的顯示結(jié)構(gòu)

清除浮動的方式如下：

  • 給父級div定義 ?height?屬性
  • 最后一個浮動元素之后添加一個空的div標簽，并添加 ?clear:both?樣式
  • 包含浮動元素的父級標簽添加 ?overflow:hidden?或者 ?overflow:auto ?
  • 使用 :after 偽元素。由于IE6-7不支持 :after，使用 zoom:1 觸發(fā) hasLayout
.clearfix:after{
    content: "\200B";
    display: table; 
    height: 0;
    clear: both;
  }
  .clearfix{
    *zoom: 1;
  }

2. 使用 clear 屬性清除浮動的原理？

使用clear屬性清除浮動，其語法如下： 

clear:none|left|right|both

如果單看字面意思，clear:left 是“清除左浮動”，clear:right 是“清除右浮動”，實際上，這種解釋是有問題的，因為浮動一直還在，并沒有清除。

官方對clear屬性解釋：“元素盒子的邊不能和前面的浮動元素相鄰”，對元素設(shè)置clear屬性是為了避免浮動元素對該元素的影響，而不是清除掉浮動。

還需要注意 clear 屬性指的是元素盒子的邊不能和前面的浮動元素相鄰，注意這里“前面的”3個字，也就是clear屬性對“后面的”浮動元素是不聞不問的?？紤]到float屬性要么是left，要么是right，不可能同時存在，同時由于clear屬性對“后面的”浮動元素不聞不問，因此，當clear:left有效的時候，clear:right必定無效，也就是此時clear:left等同于設(shè)置clear:both；同樣地，clear:right如果有效也是等同于設(shè)置clear:both。由此可見，clear:left和clear:right這兩個聲明就沒有任何使用的價值，至少在CSS世界中是如此，直接使用clear:both吧。

一般使用偽元素的方式清除浮動： 

.clear::after{
  content:'';
  display: block; 
  clear:both;
}

clear屬性只有塊級元素才有效的，而::after等偽元素默認都是內(nèi)聯(lián)水平，這就是借助偽元素清除浮動影響時需要設(shè)置display屬性值的原因。

3. 對BFC的理解，如何創(chuàng)建BFC

先來看兩個相關(guān)的概念：

  • Box: Box 是 CSS 布局的對象和基本單位，?個??是由很多個 Box 組成的，這個Box就是我們所說的盒模型。
  • Formatting context：塊級上下?格式化，它是??中的?塊渲染區(qū)域，并且有?套渲染規(guī)則，它決定了其?元素將如何定位，以及和其他元素的關(guān)系和相互作?。

塊格式化上下文（Block Formatting Context，BFC）是Web頁面的可視化CSS渲染的一部分，是布局過程中生成塊級盒子的區(qū)域，也是浮動元素與其他元素的交互限定區(qū)域。

通俗來講：BFC是一個獨立的布局環(huán)境，可以理解為一個容器，在這個容器中按照一定規(guī)則進行物品擺放，并且不會影響其它環(huán)境中的物品。如果一個元素符合觸發(fā)BFC的條件，則BFC中的元素布局不受外部影響。

創(chuàng)建BFC的條件：

  • 根元素：body；
  • 元素設(shè)置浮動：float 除 none 以外的值；
  • 元素設(shè)置絕對定位：position (absolute、fixed)；
  • display 值為：inline-block、table-cell、table-caption、flex等；
  • overflow 值為：hidden、auto、scroll；

BFC的特點：

  • 垂直方向上，自上而下排列，和文檔流的排列方式一致。
  • 在BFC中上下相鄰的兩個容器的margin會重疊
  • 計算BFC的高度時，需要計算浮動元素的高度
  • BFC區(qū)域不會與浮動的容器發(fā)生重疊
  • BFC是獨立的容器，容器內(nèi)部元素不會影響外部元素
  • 每個元素的左margin值和容器的左border相接觸

BFC的作用：

  • 解決margin的重疊問題：由于BFC是一個獨立的區(qū)域，內(nèi)部的元素和外部的元素互不影響，將兩個元素變?yōu)閮蓚€BFC，就解決了margin重疊的問題。
  • 解決高度塌陷的問題：在對子元素設(shè)置浮動后，父元素會發(fā)生高度塌陷，也就是父元素的高度變?yōu)?。解決這個問題，只需要把父元素變成一個BFC。常用的辦法是給父元素設(shè)置 ?overflow:hidden?。
  • 創(chuàng)建自適應(yīng)兩欄布局：可以用來創(chuàng)建自適應(yīng)兩欄布局：左邊的寬度固定，右邊的寬度自適應(yīng)。
.left{
     width: 100px;
     height: 200px;
     background: red;
     float: left;
 }
 .right{
     height: 300px;
     background: blue;
     overflow: hidden;
 }
 
<div class="left"></div>
<div class="right"></div>

左側(cè)設(shè)置 float:left，右側(cè)設(shè)置 overflow: hidden。這樣右邊就觸發(fā)了BFC，BFC的區(qū)域不會與浮動元素發(fā)生重疊，所以兩側(cè)就不會發(fā)生重疊，實現(xiàn)了自適應(yīng)兩欄布局。

4. 什么是margin重疊問題？如何解決？

問題描述：

兩個塊級元素的上外邊距和下外邊距可能會合并（折疊）為一個外邊距，其大小會取其中外邊距值大的那個，這種行為就是外邊距折疊。需要注意的是，浮動的元素和絕對定位這種脫離文檔流的元素的外邊距不會折疊。重疊只會出現(xiàn)在垂直方向。

計算原則：

折疊合并后外邊距的計算原則如下：

  • 如果兩者都是正數(shù)，那么就去最大者
  • 如果是一正一負，就會正值減去負值的絕對值
  • 兩個都是負值時，用0減去兩個中絕對值大的那個

解決辦法：

對于折疊的情況，主要有兩種：兄弟之間重疊和父子之間重疊

（1）兄弟之間重疊

  • 底部元素變?yōu)樾袃?nèi)盒子：?display: inline-block?
  • 底部元素設(shè)置浮動：?float?
  • 底部元素的position的值為 ?absolute/fixed?

（2）父子之間重疊

  • 父元素加入：?overflow: hidden?
  • 父元素添加透明邊框：?border:1px solid transparent?
  • 子元素變?yōu)樾袃?nèi)盒子：?display: inline-block?
  • 子元素加入浮動屬性或定位

5. 元素的層疊順序

層疊順序，英文稱作 stacking order，表示元素發(fā)生層疊時有著特定的垂直顯示順序。下面是盒模型的層疊規(guī)則：

img

對于上圖，由上到下分別是：

（1）背景和邊框：建立當前層疊上下文元素的背景和邊框。

（2）負的z-index：當前層疊上下文中，z-index屬性值為負的元素。

（3）塊級盒：文檔流內(nèi)非行內(nèi)級非定位后代元素。

（4）浮動盒：非定位浮動元素。

（5）行內(nèi)盒：文檔流內(nèi)行內(nèi)級非定位后代元素。

（6）z-index:0：層疊級數(shù)為0的定位元素。

（7）正z-index：z-index屬性值為正的定位元素。

注意: 當定位元素z-index:auto，生成盒在當前層疊上下文中的層級為 0，不會建立新的層疊上下文，除非是根元素。

6. position的屬性有哪些，區(qū)別是什么

position有以下屬性值：

屬性值 概述
absolute 生成絕對定位的元素，相對于static定位以外的一個父元素進行定位。元素的位置通過left、top、right、bottom屬性進行規(guī)定。
relative 生成相對定位的元素，相對于其原來的位置進行定位。元素的位置通過left、top、right、bottom屬性進行規(guī)定。
fixed 生成絕對定位的元素，指定元素相對于屏幕視?（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變，?如回到頂部的按鈕?般都是?此定位?式。
static 默認值，沒有定位，元素出現(xiàn)在正常的文檔流中，會忽略 top, bottom, left, right 或者 z-index 聲明，塊級元素從上往下縱向排布，?級元素從左向右排列。
inherit 規(guī)定從父元素繼承position屬性的值

前面三者的定位方式如下：

relative：元素的定位永遠是相對于元素自身位置的，和其他元素沒關(guān)系，也不會影響其他元素。

img

fixed：元素的定位是相對于 window （或者 iframe）邊界的，和其他元素沒有關(guān)系。但是它具有破壞性，會導(dǎo)致其他元素位置的變化。

img

absolute：元素的定位相對于前兩者要復(fù)雜許多。如果為 absolute 設(shè)置了 top、left，瀏覽器會根據(jù)什么去確定它的縱向和橫向的偏移量呢？答案是瀏覽器會遞歸查找該元素的所有父元素，如果找到一個設(shè)置了 position:relative/absolute/fixed的元素，就以該元素為基準定位，如果沒找到，就以瀏覽器邊界定位。如下兩個圖所示：

img

img

7. display、float、position的關(guān)系

（1）首先判斷display屬性是否為none，如果為none，則position和float屬性的值不影響元素最后的表現(xiàn)。

（2）然后判斷position的值是否為absolute或者fixed，如果是，則float屬性失效，并且display的值應(yīng)該被設(shè)置為table或者block，具體轉(zhuǎn)換需要看初始轉(zhuǎn)換值。

（3）如果position的值不為absolute或者fixed，則判斷float屬性的值是否為none，如果不是，則display的值則按上面的規(guī)則轉(zhuǎn)換。注意，如果position的值為relative并且float屬性的值存在，則relative相對于浮動后的最終位置定位。

（4）如果float的值為none，則判斷元素是否為根元素，如果是根元素則display屬性按照上面的規(guī)則轉(zhuǎn)換，如果不是，則保持指定的display屬性值不變。

總的來說，可以把它看作是一個類似優(yōu)先級的機制，"position:absolute"和"position:fixed"優(yōu)先級最高，有它存在的時候，浮動不起作用，'display'的值也需要調(diào)整；其次，元素的'float'特性的值不是"none"的時候或者它是根元素的時候，調(diào)整'display'的值；最后，非根元素，并且非浮動元素，并且非絕對定位的元素，'display'特性值同設(shè)置值。

8. absolute與fixed共同點與不同點

共同點：

  • 改變行內(nèi)元素的呈現(xiàn)方式，將display置為inline-block
  • 使元素脫離普通文檔流，不再占據(jù)文檔物理空間
  • 覆蓋非定位文檔元素

不同點：

  • abuselute與fixed的根元素不同，abuselute的根元素可以設(shè)置，fixed根元素是瀏覽器。
  • 在有滾動條的頁面中，absolute會跟著父元素進行移動，fixed固定在頁面的具體位置。

9. 對 sticky 定位的理解

sticky 英文字面意思是粘貼，所以可以把它稱之為粘性定位。語法：position: sticky; 基于用戶的滾動位置來定位。

粘性定位的元素是依賴于用戶的滾動，在 position:relative 與 position:fixed 定位之間切換。它的行為就像 position:relative; 而當頁面滾動超出目標區(qū)域時，它的表現(xiàn)就像 position:fixed;，它會固定在目標位置。元素定位表現(xiàn)為在跨越特定閾值前為相對定位，之后為固定定位。這個特定閾值指的是 top, right, bottom 或 left 之一，換言之，指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。

四、場景應(yīng)用

1. 實現(xiàn)一個三角形

CSS繪制三角形主要用到的是border屬性，也就是邊框。

平時在給盒子設(shè)置邊框時，往往都設(shè)置很窄，就可能誤以為邊框是由矩形組成的。實際上，border屬性是右三角形組成的，下面看一個例子：

div {
    width: 0;
    height: 0;
    border: 100px solid;
    border-color: orange blue red green;
}

將元素的長寬都設(shè)置為0，顯示出來的效果是這樣的：

image

所以可以根據(jù)border這個特性來繪制三角形：

（1）三角1 

div {
    width: 0;
    height: 0;
    border-top: 50px solid red;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
}

img

（2）三角2 

div {
    width: 0;
    height: 0;
    border-bottom: 50px solid red;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
}

img

（3）三角3 

div {
    width: 0;
    height: 0;
    border-left: 50px solid red;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
}

img

（4）三角4 

div {
    width: 0;
    height: 0;
    border-right: 50px solid red;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
}

img

（5）三角5 

div {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

img

還有很多，就不一一實現(xiàn)了，總體的原則就是通過上下左右邊框來控制三角形的方向，用邊框的寬度比來控制三角形的角度。

2. 實現(xiàn)一個扇形

用CSS實現(xiàn)扇形的思路和三角形基本一致，就是多了一個圓角的樣式，實現(xiàn)一個90°的扇形： 

div{
    border: 100px solid transparent;
    width: 0;
    heigt: 0;
    border-radius: 100px;
    border-top-color: red;
}

img

3. 實現(xiàn)一個寬高自適應(yīng)的正方形

  • 利用vw來實現(xiàn)：
.square {
  width: 10%;
  height: 10vw;
  background: tomato;
}
  • 利用元素的margin/padding百分比是相對父元素width的性質(zhì)來實現(xiàn)：
.square {
  width: 20%;
  height: 0;
  padding-top: 20%;
  background: orange;
}
  • 利用子元素的margin-top的值來實現(xiàn)：
.square {
  width: 30%;
  overflow: hidden;
  background: yellow;
}
.square::after {
  content: '';
  display: block;
  margin-top: 100%;
}

4. 畫一條0.5px的線

  • 采用transform: scale()的方式，該方法用來定義元素的2D 縮放轉(zhuǎn)換：
transform: scale(0.5,0.5);
  • 采用meta viewport的方式
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

這樣就能縮放到原來的0.5倍，如果是1px那么就會變成0.5px。viewport只針對于移動端，只在移動端上才能看到效果

5. 設(shè)置小于12px的字體

在谷歌下css設(shè)置字體大小為12px及以下時，顯示都是一樣大小，都是默認12px。

解決方法：

  • 使用Webkit的內(nèi)核的-webkit-text-size-adjust的私有CSS屬性來解決，只要加了-webkit-text-size-adjust:none;字體大小就不受限制了。但是chrome更新到27版本之后就不可以用了。所以高版本chrome谷歌瀏覽器已經(jīng)不再支持-webkit-text-size-adjust樣式，所以要使用時候慎用。
  • 使用css3的transform縮放屬性-webkit-transform:scale(0.5); 注意-webkit-transform:scale(0.75);收縮的是整個元素的大小，這時候，如果是內(nèi)聯(lián)元素，必須要將內(nèi)聯(lián)元素轉(zhuǎn)換成塊元素，可以使用display：block/inline-block/...；
  • 使用圖片：如果是內(nèi)容固定不變情況下，使用將小于12px文字內(nèi)容切出做圖片，這樣不影響兼容也不影響美觀。

6. 如何解決 1px 問題？

1px 問題指的是：在一些 Retina屏幕 的機型上，移動端頁面的 1px 會變得很粗，呈現(xiàn)出不止 1px 的效果。原因很簡單——CSS 中的 1px 并不能和移動設(shè)備上的 1px 劃等號。它們之間的比例關(guān)系有一個專門的屬性來描述： 

window.devicePixelRatio = 設(shè)備的物理像素 / CSS像素。

打開 Chrome 瀏覽器，啟動移動端調(diào)試模式，在控制臺去輸出這個 devicePixelRatio 的值。這里選中 iPhone6/7/8 這系列的機型，輸出的結(jié)果就是2：

image

這就意味著設(shè)置的 1px CSS 像素，在這個設(shè)備上實際會用 2 個物理像素單元來進行渲染，所以實際看到的一定會比 1px 粗一些。

解決1px 問題的三種思路：

思路一：直接寫 0.5px

如果之前 1px 的樣式這樣寫： 

border:1px solid #333

可以先在 JS 中拿到 window.devicePixelRatio 的值，然后把這個值通過 JSX 或者模板語法給到 CSS 的 data 里，達到這樣的效果（這里用 JSX 語法做示范）： 

<div id="container" data-device={{window.devicePixelRatio}}></div>

然后就可以在 CSS 中用屬性選擇器來命中 devicePixelRatio 為某一值的情況，比如說這里嘗試命中 devicePixelRatio 為2的情況： 

#container[data-device="2"] {
  border:0.5px solid #333
}

直接把 1px 改成 1/devicePixelRatio 后的值，這是目前為止最簡單的一種方法。這種方法的缺陷在于兼容性不行，IOS 系統(tǒng)需要8及以上的版本，安卓系統(tǒng)則直接不兼容。

思路二：偽元素先放大后縮小

這個方法的可行性會更高，兼容性也更好。唯一的缺點是代碼會變多。

思路是先放大、后縮小：在目標元素的后面追加一個 ::after 偽元素，讓這個元素布局為 absolute 之后、整個伸展開鋪在目標元素上，然后把它的寬和高都設(shè)置為目標元素的兩倍，border值設(shè)為 1px。接著借助 CSS 動畫特效中的放縮能力，把整個偽元素縮小為原來的 50%。此時，偽元素的寬高剛好可以和原有的目標元素對齊，而 border 也縮小為了 1px 的二分之一，間接地實現(xiàn)了 0.5px 的效果。

代碼如下： 

#container[data-device="2"] {
    position: relative;
}
#container[data-device="2"]::after{
      position:absolute;
      top: 0;
      left: 0;
      width: 200%;
      height: 200%;
      content:"";
      transform: scale(0.5);
      transform-origin: left top;
      box-sizing: border-box;
      border: 1px solid #333;
    }
}

思路三：viewport 縮放來解決

這個思路就是對 meta 標簽里幾個關(guān)鍵屬性下手： 

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

這里針對像素比為2的頁面，把整個頁面縮放為了原來的1/2大小。這樣，本來占用2個物理像素的 1px 樣式，現(xiàn)在占用的就是標準的一個物理像素。根據(jù)像素比的不同，這個縮放比例可以被計算為不同的值，用 js 代碼實現(xiàn)如下： 

const scale = 1 / window.devicePixelRatio;
// 這里 metaEl 指的是 meta 標簽對應(yīng)的 Dom
metaEl.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`);

這樣解決了，但這樣做的副作用也很大，整個頁面被縮放了。這時 1px 已經(jīng)被處理成物理像素大小，這樣的大小在手機上顯示邊框很合適。但是，一些原本不需要被縮小的內(nèi)容，比如文字、圖片等，也被無差別縮小掉了。


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號