[if !supportLists]1.1.?[endif]web前端面試之CSS3問題（碼動(dòng)未來）

2.3.1纬凤、CSS3有哪些新特性福贞？

新增各種CSS選擇器 ?（: not(.input)：所有 class 不是“input”的節(jié)點(diǎn)）

圓角（border-radius:8px）

多列布局（multi-column layout）

陰影和反射（Shadow\Reflect）

文字特效（text-shadow、）

文字渲染（Text-decoration）

線性漸變（gradient）

旋轉(zhuǎn)（transform）

增加了旋轉(zhuǎn),縮放,定位,傾斜,動(dòng)畫停士，多背景

??transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

2.3.2挖帘、請(qǐng)解釋一下CSS3的Flexbox（彈性盒布局模型）,以及適用場(chǎng)景？

彈性盒布局模型的目的是提供一種更加有效的方式來對(duì)一個(gè)容器中的條目進(jìn)行排列向瓷、對(duì)齊和分配空白空間肠套。即便容器中條目的尺寸未知或是動(dòng)態(tài)變化的，彈性盒布局模型也能正常的工作猖任。在該布局模型中，容器會(huì)根據(jù)布局的需要瓷耙，調(diào)整其中包含的條目的尺寸和順序來最好地填充所有可用的空間朱躺。當(dāng)容器的尺寸由于屏幕大小或窗口尺寸發(fā)生變化時(shí)，其中包含的條目也會(huì)被動(dòng)態(tài)地調(diào)整搁痛。比如當(dāng)容器尺寸變大時(shí)长搀，其中包含的條目會(huì)被拉伸以占滿多余的空白空間；當(dāng)容器尺寸變小時(shí)鸡典，條目會(huì)被縮小以防止超出容器的范圍源请。彈性盒布局是與方向無關(guān)的。在傳統(tǒng)的布局方式中，block布局是把塊在垂直方向從上到下依次排列的谁尸；而 inline 布局則是在水平方向來排列舅踪。彈性盒布局并沒有這樣內(nèi)在的方向限制，可以由開發(fā)人員自由操作

2.3.3良蛮、::before和 :after中雙冒號(hào)和單冒號(hào) 有什么區(qū)別抽碌？解釋一下這2個(gè)偽元素的作用

單冒號(hào)(:)用于CSS3偽類，雙冒號(hào)(::)用于CSS3偽元素决瞳。

偽元素由雙冒號(hào)和偽元素名稱組成货徙。雙冒號(hào)是在css3規(guī)范中引入的，用于區(qū)分偽類和偽元素皮胡。但是偽類兼容現(xiàn)存樣式痴颊，瀏覽器需要同時(shí)支持舊的偽類，比如:first-line屡贺、:first-letter祷舀、:before、:after等烹笔。

對(duì)于CSS2之前已有的偽元素裳扯，比如:before，單冒號(hào)和雙冒號(hào)的寫法::before作用是一樣的谤职。

提醒饰豺，如果你的網(wǎng)站只需要兼容webkit、firefox允蜈、opera等瀏覽器冤吨，建議對(duì)于偽元素采用雙冒號(hào)的寫法，如果不得不兼容IE瀏覽器饶套，還是用CSS2的單冒號(hào)寫法比較安全

::before就是以一個(gè)子元素的存在漩蟆，定義在元素主體內(nèi)容之前的一個(gè)偽元素。但是并不存在于dom中妓蛮，只是顯示在頁(yè)面上而已怠李。同理，after就是在主體內(nèi)容之后顯示的

2.3.4蛤克、設(shè)置元素浮動(dòng)后捺癞，該元素的display值是多少？

浮動(dòng)元素自動(dòng)設(shè)置為”block”元素构挤，而不管他們之前是什么髓介。這說明浮動(dòng)元素上的{display: inline;}會(huì)被忽略，事實(shí)上所有的瀏覽器沒有呈現(xiàn)任何改變筋现，包括IE

2.3.5唐础、font-style屬性可以讓它賦值為“oblique” oblique是什么意思箱歧？

讓一種字體標(biāo)識(shí)為斜體(oblique)，如果沒有這種格式一膨，就使用italic字體呀邢。這里描述所用的“oblique”和“italic”都是傾斜的意思」保“oblique”在維基百科里的解釋就是一種排版術(shù)語(yǔ)驼鹅，就是一種傾斜的文字，但不是斜體森篷。一種字庫(kù)不能同時(shí)提供斜體和oblique兩種字體输钩，因?yàn)閛blique基本上是一種模仿的斜體，而不是真正的斜體仲智。所以买乃，如果一種字庫(kù)里沒有提供斜體字，那當(dāng)使用CSS的font-style: italic時(shí)钓辆，瀏覽器實(shí)際上是按font-style: oblique顯示的剪验。

2.3.6、position:fixed;在android下無效怎么處理

加入如下標(biāo)記

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

2.3.7前联、CSS 選擇符有哪些功戚？哪些屬性可以繼承？?jī)?yōu)先級(jí)算法如何計(jì)算似嗤？ CSS3新增偽類有那些啸臀？

選擇符:

id選擇器（ # myid）

類選擇器（.myclassname）

標(biāo)簽選擇器（div, h1, p）

相鄰選擇器（h1 + p）

子選擇器（ul > li）

后代選擇器（li a）

通配符選擇器（*）

屬性選擇器（a[rel =“external”]）

偽類選擇器（a: hover, li: nth– child）

可繼承的樣式:

font-size font-family color, UL LI DL DD DT;

不可繼承的樣式：

border padding margin width height ;

優(yōu)先級(jí)算法:

優(yōu)先級(jí)就近原則，同權(quán)重情況下樣式定義最近者為準(zhǔn);

優(yōu)先級(jí)為:

!important > ?id > class > tag

important比 內(nèi)聯(lián)優(yōu)先級(jí)高

CSS3新增偽類:

p:first-of-type選擇屬于其父元素的首個(gè)元素的每個(gè)元素烁落。

p:last-of-type選擇屬于其父元素的最后元素的每個(gè)元素乘粒。

p:only-of-type選擇屬于其父元素唯一的元素的每個(gè)元素。

p:only-child選擇屬于其父元素的唯一子元素的每個(gè)元素伤塌。

p:nth-child(2)選擇屬于其父元素的第二個(gè)子元素的每個(gè)元素灯萍。

:enabled :disabled控制表單控件的禁用狀態(tài)。

:checked單選框或復(fù)選框被選中每聪。

QQ技術(shù)交流群:815302226