總結的一些CSS面試題(持續更新中 )

2021-10-09 03:24:28 字數 2660 閱讀 2286

1,box-sizing屬性?

用來控制元素的盒子模型的解析模式,預設為content-box

context-box:w3c的標準盒子模型,設定元素的 height/width 屬性指的是content部分的高/寬

border-box:ie傳統盒子模型。設定元素的height/width屬性指的是border + padding + content部分的高/寬

2,css選擇器有哪些?哪些屬性可以繼承?

css選擇符:

id選擇器(#myid)、類選擇器(.myclassname)、標籤選擇器(div, h1, p)、相鄰選擇器(h1 + p)、子選擇器(ul > li)、後代選擇器(li a)、萬用字元選擇器(*)、屬性選擇器(a[rel=」external」])、偽類選擇器(a:hover, li:nth-child)

可繼承的屬性:font-size, font-family, color

不可繼承的樣式:border, padding, margin, width, height

3, css3新增偽類有那些?

p:first-of-type 選擇屬於其父元素的首個元素

p:last-of-type 選擇屬於其父元素的最後元素

p:only-of-type 選擇屬於其父元素唯一的元素

p:only-child 選擇屬於其父元素的唯一子元素

p:nth-child(2) 選擇屬於其父元素的第二個子元素

:enabled :disabled 表單控制項的禁用狀態。

:checked 單選框或核取方塊被選中。

4,display有哪些值?說明他們的作用?

inline(預設)–內聯

none–隱藏

block–塊顯示

table–**顯示

list-item–專案列表

inline-block

5,position的值?

static(預設):按照正常文件流進行排列;

relative(相對定位):不脫離文件流,參考自身靜態位置通過 top, bottom, left, right 定位;

absolute(絕對定位):參考距其最近乙個不為static的父級元素通過top, bottom, left, right 定位;

fixed(固定定位):所固定的參照對像是可視視窗。

6,css3有哪些新特性?

1,rgba和透明度

2,background-image background-origin(content-box/padding-box/border-box) background-size,

3,background-repeat

4,word-wrap(對長的不可分割單詞換行)word-wrap:break-word,

5,文字陰影:text-shadow: 5px 5px 5px #ff0000;(水平陰影,垂直陰影,模糊距離,陰影顏色)

6,font-face屬性:定義自己的字型

7,圓角(邊框半徑):border-radius 屬性用於建立圓角,

8,邊框:border-image: url(border.png) 30 30 round

9,盒陰影:box-shadow: 10px 10px 5px #888888

10,**查詢:定義兩套css,當瀏覽器的尺寸變化時會採用不同的屬性

7, 請解釋一下css3的flexbox(彈性盒布局模型),以及適用場景?

該布局模型的目的是提供一種更加高效的方式來對容器中的條目進行布局、對齊和分配空間。在傳統的布局方式中,block 布局是把塊在垂直方向從上到下依次排列的;而 inline 布局則是在水平方向來排列。彈性盒布局並沒有這樣內在的方向限制,可以由開發人員自由操作。

試用場景:彈性布局適合於移動前端開發,在android和ios上也完美支援。

8, 乙個滿屏品字布局如何設計?

1,第一種真正的品字:

三塊高寬是確定的;

上面那塊用margin: 0 auto;居中;

下面兩塊用float或者inline-block不換行;

用margin調整位置使他們居中。

第二種全屏的品字布局:,

2,上面的div設定成100%,下面的div分別寬50%,然後使用float或者inline使其不換行。

9,display:none與visibility:hidden的區別?

display:none 不顯示對應的元素,在文件布局中不再分配空間(回流+重繪)

visibility:hidden 隱藏對應元素,在文件布局中仍保留原來的空間(重繪)

10,為什麼會出現浮動和什麼時候需要清除浮動?清除浮動的方式?

浮動元素碰到包含它的邊框或者浮動元素的邊框停留。由於浮動元素不在文件流中,所以文件流的塊框表現得就像浮動框不存在一樣。浮動元素會漂浮在文件流的塊框上。

浮動帶來的問題:

1,父元素的高度無法被撐開,影響與父元素同級的元素

2,與浮動元素同級的非浮動元素(內聯元素)會跟隨其後

3,若非第乙個元素浮動,則該元素之前的元素也需要浮動,否則會影響頁面顯示的結構。

清除浮動的方式:

1,父級div定義height

2,最後乙個浮動元素後加空div標籤 並新增樣式clear:both。

3,包含浮動元素的父標籤新增樣式overflow為hidden或auto。

4,父級div定義zoom

一些面試題,持續更新

console.log false 未通過 字串中有空格,是真,前面兩個嘆號,是假之後真,結果是true true是1 空字串,無值,是假,前面兩個嘆號,是真之後假,結果是false false是0 false前面兩個嘆號,是真之後假,結果是false false是0 1 0 0 未通過 中間是 或...

前端面試題總結 持續更新

共同點 都是儲存在瀏覽器端,且同源的。區別 function fn fn.prototype c function var myfn new fn 例項物件 myfn.b myfn.c 依次列印的就是 0 30這裡運用的知識點就是new的作用 建立乙個新物件 將建構函式的作用域賦給新物件 因此 th...

一些特別有趣的C 面試題(持續更新中)

include using namespace std class a a const a class b virtual a b const b class c virtual a c const c class d b,c d const d int main include include i...