(4)CSS屬性常見筆試題

2021-10-14 12:02:03 字數 2142 閱讀 1792

已設定上外邊距

1.執行上面**·,雖然給p元素定義了15px的上外邊距,為什麼失效了?

答:浮動元素會脫離正常流,clear屬性會讓元素增加上外邊距,使其在浮動元素的下面。在上面**中,浮動元素的高是80px,所以clear屬性會給p元素增加80px的上外邊距,比定義的15px要大,因此最終的上外邊距是80px,正好在浮動元素的下面。

2.絕對定位和浮動有什麼異同?

答:都會脫離正常流,改變元素盒型別,將元素變為塊級元素,同時都能建立bfc。

不同點

絕對定位

浮動 包含塊

離它最近的position屬性不為static的祖先元素的內容區域

離它最近的塊級祖先元素的內容區域

兄弟元素的影響

原先所佔的空間會被刪除,不影響兄弟元素

影響兄弟元素的位置和樣式

擺放位置

可擺放在任意位置

不能超出包含塊的內容區域,並且向上浮動也會受限制

z-index

可設定任意整數或auto

無法設定,預設為0

3.下面關於border:none和border:0的區別,描述錯誤的是:()【多選】

a.當border為none的時候,邊框無外觀

b.當border為0的時候,邊框寬度為0

c.當border為none的時候,邊框寬度為0

d.只要定義了邊框寬度,就能顯示邊框

答案:cd

4.如何用純css的方式讓超出容器寬度的文字自動替換為省略號?

答:可以使用text-overflow屬性,這個屬性用於顯示內容溢位時的省略標記,但是使用之前,得滿足三個條件,容器要有明確的寬度,強制在一行顯示以及隱藏溢位內容。可設定為clip;ellipsis,「;」。

5.字型風格(font-style)有兩個關鍵字,分別是italic和oblique,他們有啥區別?

答:italic會對文字的結構做些改動,得到一種斜體字體,而oblique不會修改文字結構,僅僅傾斜字型。

6.在css中,可以將line-height設定為純數字或百分數,這兩種賦值方式有什麼區別?

p答:數字和百分數都需要與字型大小相乘才能得到真實的行高,在上面的css規則中,p元素的真實行高是24px,他們主要的區別在繼承方面,如果父元素的行高是數字,那麼子元素繼承的也是這個數字,如果父元素的行高是百分數,那麼子元素繼承的是經過計算後的真實行高。

7.背景影象可以用data uri描述,什麼是data uri?

答:data uri可以將外部資源(例如影象)經過base64編碼後,嵌入到其他文件中,可減少額外的http請求。data uri由協議,mime型別(可選),base64編碼設定(可選)和內容組成,格式如下

data:[:base64],

雖然使用data uri減少了一次http請求,但它會讓嵌入的文件體積膨脹,影響瀏覽器渲染,並且還會降低gzip的壓縮效率,破壞資源的快取,所以在使用它的時候需要權衡利弊。

8.什麼是css sprite,有何利弊?

答:css sprite是一種影象處理技術,將零散的小圖示整合在一起,形成一張大圖,這張圖可稱為雪碧圖或精靈圖。當用這張大圖做背景影象時,可以利用background-position屬性進行背景定位,找到想要的小圖示。這麼處理影象,不但可以解決命名困擾,還能減少http請求數和影象位元組數,提公升網頁效能,但製作和維護這張圖比較繁瑣,當加乙個小圖示的時候,必須修改原圖,還不能破壞原先圖示的位置。

9.過渡與動畫的區別是什麼?

答: 1.過度只能指定元素的初始狀態和結束狀態,而動畫需要通過關鍵幀,可以控制變化過程中的更多狀態(即更多階段)

2.動畫不需要觸發條件,當html文件和相關樣式載入完成後,就能立即執行。

10.如果用js中的settimeout()函式來實現動畫,那麼執行函式的事件間隔設定成多久比較合理?

答:一般情況下螢幕頻率為60hz,也就是每秒重新整理60次,合理的時間間隔就是16.7ms, 1000/60=16.7ms.

11.什麼是響應式設計?

答:響應式設計,可根據不同裝置的可視區域改變網頁布局,展現不同的設計風格,力求在當前裝置中達到最完美的效果,減少使用者瀏覽網頁的額外操作(例如縮放、平移或滾動等)

c 常見筆試題(4)

40.鍊錶題 乙個鍊錶的結點結構 struct node typedef struct node node 1 已知鍊錶的頭結點head,寫乙個函式把這個鍊錶逆序 intel node reverselist node head 鍊錶逆序 p2 next p1 head p2 return head...

CSS教程4 CSS的Text 文字

有一系列屬性可以改變網頁文字的大小和形狀,概要如下 font family 文字使用的字型,比如宋體,times new roman,arial等等 這個屬性必須詳細制定,不能使用偏僻的字型,要使用安全字型 比如arial,verdana和times new roman和宋體 可以同時指定許多字型,...

前端基礎(4) css盒模型

盒模型是css布局的基石,它規定了網頁元素如何顯示以及元素間相互關係。css定義所有的元素都可以擁有像盒子一樣的外形和平面空間,即都包含邊框 邊界 補白 內容區,這就是盒模型。說明 填充 padding,在設定頁面中乙個元素內容到元素的邊緣 邊框 之間的距離。也稱補白。用法 1 用來調整內容在容器中...