高頻面試題之CSS篇

2021-09-26 01:33:26 字數 3204 閱讀 2234

(1) 沒有寬度

父子元素都float:left;position:relative.父元素left:50%,子元素left:-50%

我是浮動的

(2) 有寬度

margin-left:50%;position:relative;left:-100px;不能是-50%,否則就不是自身一半,而是body的一半。

hhh

(1) display:none會讓元素從渲染樹上消失,不佔據空間。

visibility:hidden不會讓元素從渲染樹上消失,有空間沒內容。

(2) display:none具有株連性,子孫元素都不可見。

visibility:hidden子元素設定visible可以顯示。

(1) link屬於html標籤,@import是css提供的。

(2) 頁面被載入時,link會被同時載入,@import引用的css會等到頁面被載入完再載入。

(3) link無相容問題,@import只在ie5以上才能被識別。

(4) link樣式的權重高於@import的權重。

清除浮動主要為了解決父級元素因為子級浮動引起內部高度為0的問題。

(1) 在浮動元素末尾新增乙個空標籤,比如div,並設定clear:both。clear取值一共三種,left,right,both,分別表示不允許左側/右側/兩側有浮動元素。

缺點:新增了無意義標籤。

(2) 父元素新增overflow:hidden/auto/scroll觸發bfc。

缺點:內容增多時候容易造成不自動換行從而內容被隱藏掉,無法顯示需要溢位的元素。

(3) 父元素新增after偽元素清除浮動。

.clearfix:after

.clearfix

(4) before和after雙偽元素清除浮動。

.clearfix:before,.clearfix:after

.clearfix:after

.clearfix

一般分為塊級元素和行內元素。

block元素:

(1) 總是從新行開始

(2) 高度、行高、內外邊距都可以控制

(3) 寬度預設是容器的100%

(4) 可以容納內聯元素和其他塊元素

舉例:div、p、ul、ol、li、h1-h6,其中p、h1-h6都是文字類塊級標籤,裡面不能放其他塊級元素。

inline元素:

(1) 和相鄰行內元素在一行上

(2) 只有水平的內外邊距有效,高寬、垂直邊距都無效

(3) 預設寬度就是本身內容的寬度

(4) 行內元素只能容納文字或者其他行內元素

舉例:a、span、strong、del,其中鏈結裡面不能再放鏈結

inline-block元素:在行內元素中有幾個特殊標籤img、input、td,可以設定寬高和對齊

(1) 和相鄰行內元素在一行上,但之間會有空白縫隙。可以通過設定父元素font-size:0解決。

(2) 預設寬度就是本身內容寬度

(3) 高度、行高、內外邊距都可以控制

優雅降級:web站點在所有新式瀏覽器中都能正常工作,為無法支援功能的瀏覽器提供候選方案,降低體驗但不至於完全失效。

漸進增強:從被所有瀏覽器支援的基本功能開始,逐步新增只有新式瀏覽器才支援的功能。

都是相對文字長度單位。em:相對當前物件內/父元素 rem:相對根元素html,所有瀏覽器預設16px。

content-box:標準模式盒模型,高寬不包括border和padding。

border-box:怪異模式盒模型,高寬包括border和padding。

對html檔案來說,瀏覽器使用檔案開頭的 doctype 來決定用怪異模式處理或標準模式處理。為了確保你的頁面使用標準模式,請確認你的頁面擁有 doctype。怪異模式按照瀏覽器自己的方式執行。在盒模型計算方式、對齊方式、行內元素設定寬高等方面都有差別。

定位屬性=定位模式+邊偏移

bfc(1) 哪些元素或者屬性會產生bfc

ifc(1) 框會從包含塊的頂部開始,乙個接乙個地水平擺放。

(2) 擺放這些框時,它們在水平方向的 內外邊距+邊框 所占用的空間都會被考慮; 在垂直方向上,這些框可能會以不同形式來對齊: 水平的margin、padding、border有效,垂直無效。不能指定寬高;

(3) 行框的寬度是 由包含塊和存在的浮動來決定; 行框的高度 由行高來決定

聖杯/雙飛翼布局、彈性布局、多欄布局、響應式布局、瀑布流布局

(1) 聖杯/雙飛翼布局

參考 之前寫的一篇聖杯布局

之前寫的一篇雙飛翼布局

總結如下:

聖杯布局

header

left

right

footer

雙飛翼布局

header

left

right

footer

一句話概括:同樣使用了float和負margin,但是並未使用relative,而是給main增加了乙個dom層。是聖杯布局的優化版本。

絕對定位

(2) 彈性布局 flex

參考 這一篇就夠了

(3) 多欄布局

參考 主要是columns:column-count|column-width,單獨寫也不會產生歧義。

(4) 響應式布局

參考 不修改dom前提下調整布局

C 高頻面試題

malloc free是c語言的標準庫函式,new delete是c 的運算子。由於malloc free是庫函式而不是運算子,不在編譯器控制許可權之內。對於使用者自定義的物件而言,用maloc free無法滿足動態管理物件的要求。廢話 new是型別安全的,malloc不是。int a new fl...

C 高頻面試題

字首式可以返回物件的引用,而字尾式必須返回物件的值所以導致在大物件產生時產生了較大的複製開銷,因此處理自定義型別的時候盡量使用字首式。a b b a a b 相對於c,c 多了過載 內聯函式 異常處理,擴充套件了物件導向的設計內容 類 繼承 虛函式 模板。c 並不是完全的物件導向,它也可以寫出面向過...

STL高頻面試題

vector的內部是使用動態陣列的方式來實現的,如果動態陣列的內部實現不夠用,就要動態的重新分配記憶體。然後把原陣列的內容拷貝過去。vector和陣列類似,擁有連續的記憶體空間,支援隨機的訪問,在中間進行元素的插入和刪除的操作時間複雜度是o n list是由雙向鍊錶實現的,只能通過陣列指標來進行資料...