前端面試1 CSS布局

2021-09-11 12:11:45 字數 1250 閱讀 3091

複製**

float:不可用

absolute:不可用

flex:可用

table:可用

grid:不可用

與左右固定,中自適應的三欄布局

複製**

做法:把要居中的元素的margin-left和margin-right都設為auto

場景:只能進行水平的居中,且對浮動元素或絕對定位元素無效。

場景:只能對,按鈕,文字等行內元素(display為inline或inline-block等)進行水平居中。但要說明的是在ie6、7這兩個奇葩的瀏覽器中,它是能對任何元素進行水平居中的。

做法:把文字的line-height設為文字父容器的高度

場景:適用於只有一行文字的情況。

做法:td/th元素設定align="center"、valign="middle"即可處理單元格裡面內容的水平和垂直居中問題

場景:必須是table

做法:通過display:table-cell 模擬**單元格,這樣就可以利用**那很方便的居中特性了。

場景:ie6、ie7都無效。

場景:只適用於寬度或高度已知的元素。

原理:通過把這個絕對定位元素的left或top的屬性設為50%,這個時候元素並不是居中的,而是比居中的位置向右或向左偏了這個元素寬度或高度的一半的距離,所以需要使用乙個負的margin-left或margin-top的值來把它拉回到居中的位置,這個負的margin值就取元素寬度或高度的一半。

場景:只適用於寬度或高度已知的元素。且只支援ie9+,谷歌,火狐等符合w3c標準的現代瀏覽器。

原理:這裡如果不定義元素的寬和高的話,那麼他的寬就會由left,right的值來決定,高會由top,bottom的值來決定,所以必須要設定元素的高和寬。同時如果改變left,right , top , bottom的值還能讓元素向某個方向偏移。

場景:不用知道要居中的元素的寬度,缺點是需要乙個多餘的元素來包裹要居中的元素。

原理:把浮動元素相對定位到父元素寬度50%的地方,但這個時候元素還不是居中的,而是比居中的那個位置多出了自身一半的寬度,這時就需要他裡面的子元素再用乙個相對定位,把那多出的自身一半的寬度拉回來,而因為相對定位正是相對於自身來定位的,所以自身一半的寬度只要把left 或 right 設為50%就可以得到了,因而不用知道自身的實際寬度是多少。

語義化掌握到位

頁面布局理解深刻

css基礎知識紮實

**書寫規範

全網前端面試題彙總(1)CSS

1.css3新特性 1 border radius 圓角 box shadow 陰影 text shadow 文字陰影特效 2 background linear gradient 線性漸變 radial gradient 徑向漸變 background多背景 size orgin等 3 trans...

前端面試CSS

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

前端面試 css部分

html語義化是html5之後提出來的,在之前的html版本中,頁面是通過一大堆的div css堆砌起來的。當css載入失敗後,頁面非常醜陋,而且沒有所謂的權重。比如文字強調,css載入失敗後,和一般的文字沒有任何區別,而且對於搜尋引擎也不友好,搜尋引擎無法得知頁面的具體什麼內容是重要的,等等。主要...