常見的的CSS面試題目

2021-09-28 14:06:43 字數 1304 閱讀 2621

*1、介紹一下標準的css的盒子模型?與低版本ie的盒子模型有什麼不同的?

標準盒子模型:寬度=內容的寬度(content) + 邊框寬度(border )+ 內邊距(padding )+ 外邊距(margin);

低版本ie盒子模型:寬度=內容寬度(content+border+padding)+ 外邊距(margin),與標準盒子模型不同的地方在於內容部分包含了border和padding;

2、box-sizing屬性?

它是用來控制元素的盒子模型的解析模式,其預設為值為:content-box,該屬性不可被繼承。它還可以設定值為「border-box」和「inherit」,其主要作用是統一css盒子模型規範,屬性值含義如下:

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

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

③ inherit:從父元素繼承box-sizeing的值。

3、css選擇器有哪些?哪些屬性可以繼承?

① css選擇器按照型別區分有:id選擇器(#id)、class選擇器(.class)、tag選擇器(div)、相鄰選擇器(div + p)、子選擇器(ul > li)、後代選擇器(li a)、萬用字元選擇器(*)、屬性選擇器(a[rel=」external」])、偽類選擇器(a:hover, p:nth-child)、偽元素選擇器(div::after,div::before);

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

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

④優先順序(詳情參考mdn描述):選擇器優先順序權重:!important > inline > id > 偽類選擇器 > 屬性選擇器 > class > 偽元素選擇器 > tag > * > 瀏覽器繼承屬性。

4、css選擇器及其優先順序計算?

① css中的選擇器有:

id 選擇器, 如 #id{}

類選擇器, 如 .class{}

屬性選擇器, 如 a[href=「segmentfault.com」]{}

偽類選擇器, 如 :hover{}

偽元素選擇器, 如 ::before{}

標籤選擇器, 如 span{}

通配選擇器, 如 {}

② 選擇器的優先順序:

內聯樣式 > id 選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 標籤選擇器 = 偽元素選擇器

常見css面試題

一 盒子居住 1 未知盒子寬高 transform居中,可以不知道寬高 padding 20px background orange color fff position absolute top 50 left 50 border radius 5px webkit transform trans...

CSS常見面試題

1.盒子模型有幾種型別,區別是什麼 標準盒模型 寬度 內容的寬度 content padding border margin ie低版本盒模型 寬度 內容的寬度 content padding border margin 2.box sizing屬性 content box 內容的寬度是conten...

常見面試題目3

q 您在什麼情況下會用到虛方法?它與介面有什麼不同?q override與過載有什麼區別?q 值型別與引用型別有什麼區別?q 怎樣理解靜態變數?q 向伺服器傳送請求有幾種方式?q datareader與dataset有什麼區別?q 用.net做b s結構的系統,您是用幾層結構來開發,每一層之間的關係...