天天看點

前端面試硬核之複述性問題集合(CSS)

1.說一下css盒模型

前端面試硬核之複述性問題集合(CSS)

2.畫一條0.5px的線

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>
           

或者border-image,transform:scale()方式

3.link标簽和import标簽的差別

link屬于html标簽,import則是由css提供

頁面被加載時,link會同時被加載,而import引用的css會等到頁面加載結束時加載

link是html标簽,是以沒有相容性,而import在ie5以上才能識别

link方式樣式的權重高于import

4.js動畫和css3動畫的差異

功能涵蓋面:js比css大

css比js更加簡單,性能跳優方向固定

對幀速表現不好的低版本浏覽器,css3可以做到自然降級

css動畫有天然事件支援

css3有相容性問題

5.說一下塊級元素和行級元素

塊元素:獨占一行,并且有自動填滿父元素,可以設定margin和padding以及width height。

行元素:不會獨占一行,width,height失效,并且在垂直方向的padding和margin會失效。

6.雙邊距重疊問題

多個相鄰普通流的塊元素錘石方向margin會重疊

折疊結果:

兩個相鄰的外邊距都是正數時,折疊結果是它們兩者之間較大的值

兩個相鄰的外邊距都是負數時,折疊結果是它們兩者之間絕對值較大的值

有正有負時,折疊結果是兩者的相加的和

7.浮動清除

方法1:使用帶clear屬性的空元素,或者鄰接元素處理

在浮動元素後使用一個空元素如

<div class="clear"></div>

,并設定其css,

.clear{clear:both;}

即可清理浮動。

方法2:使用css的overflow屬性

給浮動元素的容器添加

overflow:hidden;

或者

overflow:auto;

可以清除浮動.

方法3:僞元素處理

給浮動元素的容器添加一個clearfix的class,然後給這個class添加一個:afer僞元素實作元素末尾添加一個看不見的塊元素清理浮動。

8.css的選擇器

id選擇器,class選擇器,标簽選擇器,僞元素選擇器,僞類選擇器

前端面試硬核之複述性問題集合(CSS)

帶有!important标記的樣式屬性優先級最高

前端面試硬核之複述性問題集合(CSS)

9.如何讓一個元素消失

三種方式:

display:none;
visibility:hidden;
opacity:0;
           

10.重繪和重排

DOM的變化影響到了預算的幾何屬性如寬高,浏覽器重新計算元素的幾何屬性,其他元素的幾何屬性也會受到影響,浏覽器需要重新構造渲染書,這個過程稱之為重排,浏覽器将受到影響的部分重新繪制在螢幕上的過程稱為重繪,

引起重排重繪的原因:

添加或者删除可見的DOM元素

元素尺寸位置的改變

浏覽器頁面初始化

浏覽器視窗大小發生改變,重排一定導緻重繪,重繪不一定導緻重排

減少重繪重排的方法:

不在布局資訊改變時做DOM查詢

使用csstext,className一次性改變屬性

使用fragment

對于多次重排的元素,比如動畫,使用絕對定位脫離文檔流,使其不影響其他元素