web前端面試2(css)

2021-10-08 19:53:56 字數 1876 閱讀 6274

1 css sprite(精靈圖,雪花圖)

將多個拼接到乙個中,通過background-position和元素尺寸調節背景圖

優點:減少http請求次數,提高載入速度,

修改方便,只要在一張上修改顏色或者深淺。

缺點:需要修改大小時,或者調整時,需要全域性考慮。

2.display:none和visibility:hidden區別。

相同:使得元素不可見。

區別:display:none會讓元素從渲染樹中消失,不佔任何空間。後者反之,會占領空間,只是不可見;display:none是非繼承屬性,子孫節點消失是由於元素從渲染樹種消失造成的,通過修改子孫節點屬性無法顯示。後者是繼承屬性,但是可以通過設定子孫節點visibility:visible顯示出來;修改display通常會造成文件重排,修改visibility只會造成本元素的重繪;讀屏器不會讀取display:none的內容,後者會被讀取。

3.link和@import的區別。

4.fouc:flash of unstyled content 頁面閃爍。

5.bfc

決定了元素如何對其內容進行定位,以及其他元素的關係和相互作用。

6.display,float,position的關係

7.清除浮動的方式。

使用空標籤,clear both(增加了無意義的標籤)

overflow:auto (zoom:1相容ie,可能出現滾動條)

after偽元素清除浮動。(ie8以上和非ie支援)大**都是這麼使用的。

8.初始化css樣式?

瀏覽器相容問題,可能內外邊距存在差異

9.c3新特性

css選擇器 圓角border-radius 多列布局 陰影和反射 文字特效text-shadow 線性漸變 旋轉transform

新增的偽類:p:first-of-type p:last-of-type p:only-of-type p:only-child p:nth-child(2) :after :before :enabled :disabled :checked

10.display的值?

block:

none:

inline-block:

list-itme:

table:

inherit:

11.css盒模型

ie盒子模型,w3c盒子模型。

content padding margin border

ie的content部分吧border和padding計算進去了。

12.css優先順序,權重。

!important》id》class》tag標籤

13.理解浮動和清除浮動

浮動的框可以向左和向右移動,直到他的外邊緣碰到包含乙個浮動框的邊框為止。由於浮動框不存在文件的普通流忠,所以就會漂浮在普通文件流的上。

14.定位理解。

absolute:生成絕對定位的元素,脫離文件流,相對于父元素定位。

fixed:同上,相對於瀏覽器定位。

relative:生成相對定位,不脫離文件流,相對於本身定位。『

static:預設定位。

inherit:繼承父級的屬性。

15.display:inline-block;不出現間隙

移除空格

使用margin負值

使用font-size:0

letter-spacing

word-spacing

16.git jpeg png 區別

git:8位畫素,256色素,無失真壓縮,支援動畫,支援boolean透明

jpeg:顏色限於256,有失真壓縮,不支援透明,適合**

png:類似gif,顏色上線256,檔案小,支援alpha透明度,無動畫,

svg:向量圖,放大不失真。

前端基礎 2 CSS

選擇器 注釋用 這裡是注釋 在html標籤中用style屬性值設定 key value1,value2.key value1,value2.我是內容 在html 的head標籤中用style標籤來定義css樣式 要用到選擇器,這裡先用標籤選擇器 把css樣式寫成單獨的css檔案 要用到選擇器 再在h...

前端基礎(2)css

1.浮動高度坍塌 原因 父元素的高度是被子元素撐開的,當設定浮動後,會脫離文件流,子元素無法撐起父元素,所以導致高度坍塌 解決方法 clearfix before,clearfix after 2.父子兄弟聯動 解決方法1 padding 解決方法2 float 但是有條件 解決方法3 positi...

前端面試CSS

權重分為四級 代表內聯樣式,如style 權值為 1000 代表 id 選擇器,如 content,權值為 100 代表類 偽類和屬性選擇器,如.content hover attribute 權值為 10 代表元素選擇器和偽元素選擇器,如div p,權值為 1。需要注意的是 通用選擇器 子選擇器 ...