css 

基礎(chǔ)面試題

css 面試題

js 面試題

1、介紹下CSS的盒子模型    介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？與低版本IE的盒子模型有什么不同的？

 

css 是如何設(shè)置這兩種模型的

box-sizing: border-box;   width 不包含padding 和border 

box-sizing: content-box; 

 

css 3 伸縮盒模型彈性盒模型

 

27 base64的原理及優(yōu)缺點(diǎn)

  • 優(yōu)點(diǎn)可以加密，減少了HTTTP請求
  • 缺點(diǎn)是需要消耗CPU進(jìn)行編解碼

45 水平居中的方法

  • 元素為行內(nèi)元素，設(shè)置父元素text-align:center
  • 如果元素寬度固定，可以設(shè)置左右margin為auto;
  • 如果元素為絕對定位，設(shè)置父元素position為relative，元素設(shè)left:0;right:0;margin:auto;
  • 使用flex-box布局，指定justify-content屬性為center
  • display設(shè)置為tabel-ceil

#

46 垂直居中的方法

  • 將顯示方式設(shè)置為表格，display:table-cell,同時(shí)設(shè)置vertial-align：middle
  • 使用flex布局，設(shè)置為align-item：center
  • 絕對定位中設(shè)置bottom:0,top:0,并設(shè)置margin:auto
  • 絕對定位中固定高度時(shí)設(shè)置top:50%，margin-top值為高度一半的負(fù)值
  • 文本垂直居中設(shè)置line-height為height值

#

47 如何使用CSS實(shí)現(xiàn)硬件加速？

硬件加速是指通過創(chuàng)建獨(dú)立的復(fù)合圖層，讓GPU來渲染這個(gè)圖層，從而提高性能，

  • 一般觸發(fā)硬件加速的CSS屬性有transform、opacity、filter，為了避免2D動畫在 開始和結(jié)束的時(shí)候的repaint操作，一般使用tranform:translateZ(0)

#

48 重繪和回流（重排）是什么，如何避免？

  • DOM的變化影響到了元素的幾何屬性（寬高）,瀏覽器重新計(jì)算元素的幾何屬性，其他元素的幾何
  • 屬性和位置也會受到影響，瀏覽器需要重新構(gòu)造渲染樹，這個(gè)過程稱為重排，瀏覽器將受到影響的部分
  • 重新繪制到屏幕上的過程稱為重繪。引起重排的原因有
    • 添加或者刪除可見的DOM元素，
    • 元素位置、尺寸、內(nèi)容改變，
    • 瀏覽器頁面初始化，
    • 瀏覽器窗口尺寸改變，重排一定重繪，重繪不一定重排，

減少重繪和重排的方法：

  • 不在布局信息改變時(shí)做DOM查詢
  • 使用cssText或者className一次性改變屬性
  • 使用fragment
  • 對于多次重排的元素，如動畫，使用絕對定位脫離文檔流，讓他的改變不影響到其他元素

 如何實(shí)現(xiàn)小于12px的字體效果

transform:scale()這個(gè)屬性只可以縮放可以定義寬高的元素，而行內(nèi)元素是沒有寬高的，我們可以加上一個(gè)display:inline-block;

 

 

 

 

如何獲取dom對應(yīng)的寬和高

dom.style.width/height;//設(shè)置獲取的是內(nèi)聯(lián)樣式

dom.currentStyle.width/height;//只有IE支持

window.getComputedStyle(dom).width/height;//兼容性好

dom.getBoundingClientRect().width/height;//適用場所：計(jì)算一個(gè)元素的絕對位置

如何解決邊距重疊問題

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

 

CSS選擇符：id選擇器(#myid)、類選擇器(.myclassname)、標(biāo)簽選擇器(div, h1, p)、相鄰選擇器(h1 + p)、子選擇器（ul > li）、后代選擇器（li a）、通配符選擇器（*）、屬性選擇器（a[rel="external"]）、偽類選擇器（a:hover, li:nth-child）

 

可繼承的屬性：font-size, font-family, color

 

不可繼承的樣式：border, padding, margin, width, height

優(yōu)先級（就近原則）：!important > [ id > class > tag ]

!important 比內(nèi)聯(lián)優(yōu)先級高

 

 ::before 和 :after中雙冒號和單冒號有什么區(qū)別？解釋一下這2個(gè)偽元素的作用

偽類更偏向于匹配元素的狀態(tài)

單冒號(:)用于CSS3偽類，雙冒號(::)用于CSS3偽元素。

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

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

 

display有哪些值？說明他們的作用?

inline（默認(rèn)）--內(nèi)聯(lián)

none--隱藏

block--塊顯示

table--表格顯示

list-item--項(xiàng)目列表

inline-block

 

position的值？

static（默認(rèn)）：按照正常文檔流進(jìn)行排列；

relative（相對定位）：不脫離文檔流，參考自身靜態(tài)位置通過 top, bottom, left, right 定位；

absolute(絕對定位)：參考距其最近一個(gè)不為static的父級元素通過top, bottom, left, right 定位；

fixed(固定定位)：所固定的參照對像是可視窗口。

 

display:none與visibility：hidden的區(qū)別？

display：none 不顯示對應(yīng)的元素，在文檔布局中不再分配空間（回流+重繪）

visibility：hidden 隱藏對應(yīng)元素，在文檔布局中仍保留原來的空間（重繪）

 

 

rgba() 和 opacity 的透明效果有什么不同？

  • opacity 作用于元素以及元素內(nèi)的所有內(nèi)容（包括文字）的透明度
  • rgba() 只作用于元素自身的顏色或其背景色，子元素不會繼承透明效果

如果需要手動寫動畫，你認(rèn)為最小時(shí)間間隔是多久？

16.7ms 多數(shù)顯示器默認(rèn)頻率是 60Hz，即 1 秒刷新 60 次，所以理論上最小間隔: 1s / 60 * 1000 ＝ 16.7ms

 

 

常見的媒體查詢

CSS : @media only screen and (max-device-width:480px) {/css樣式/}

 

媒體查詢的原理

 

元素上下居中，有幾種方式？

 

margin和padding分別適合什么場景使用？

何時(shí)使用margin：

需要在border外側(cè)添加空白

空白處不需要背景色

上下相連的兩個(gè)盒子之間的空白，需要相互抵消時(shí)。

何時(shí)使用padding：

需要在border內(nèi)側(cè)添加空白

空白處需要背景顏色

 

 

png、jpg、gif  svg 這些圖片格式解釋一下，分別什么時(shí)候用。有沒有了解過webp？

 

 

為什么要初始化CSS樣式

 

不同瀏覽器對有些標(biāo)簽的默認(rèn)值是不同的，不同瀏覽器的標(biāo)簽?zāi)J(rèn)的margin和padding不一樣。*{margin:0;padding:0;}

如果沒對CSS初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異。