htm15css3面試題及答案，前端面試題及答案-CSS篇

這篇文章并不是最全的前端面試題(沒有最全?只有更全)，只是針對自己面試過程中遇到的一些難題、容易忽略的題做一個簡單的筆記?方

便后面月面國需要的小伙伴們借釜.后續內容會不定時更新?與錯誤之處希望大家不吝指出?

1、CSS3的新特性

實現圓黃(border-radius)

陰影(box-shadow)

文字加特奴(text-shadow)

線性漸變(gradient)

旋軍專(transform)

媒體查詢?多欄布局

具體

2、CSS中link和@1(7^。11的區別link

屬于HTML標簽,而@1|7^0代是CSS提供的;

頁面被加靚的時?link會同時被加載?引用的CSS會等到頁面被加載完再加載;

import只在IE5以上才能識別,用link是HTML標簽,I兼容問題;

link方式的樣式的權重高于@import的權重.

3、介紹一下CSS的盒子模型

通過css3新增的屬性box-sizing:content-box|border-box分別設首盒模型為標準模型(content-box)和正模型(bnrder-box)詳細介紹

兩種盒模型：標準W3C盒模型'正盒模型?

區別對比：(注意藍色背景區域大小)

標準盒模型元素寬度width=content=100px-§度計算相同

IE模型元素寬度width=content+2xpadding+2xborder=70px+2xlOpx+2x5px=lOOpx?4、

CSS選擇符有哪些？哪些屬性可以繼承?優先級算法如何計算?CSS3新增偽類有那些？

選擇符

l.id選擇器(#myid)

2.類選擇器(.myclassname)

3.標簽選攔器(div,hl,p)

4.相鄰選擇器(hl+p)

5.子選擇器(ul>li)

6.后代選擇器(lia)

7.通配符選擇器(*)8.

屬性選擇器(a[rel="external"])

9.偽類選擇器(a:hover,li:nth-child)

繼承

1.可繼承的樣式：font-sizefont-familycolor,text-indent;

2.不可繼承的樣式：borderpaddingmarginwidthheight;

新增偽類

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

元素。

p:last-of-type選擇屬于其父元素的最后

元素?

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

元素。

"only-child選擇屬于其父元素的唯一子元素的每個

元素。

p:nth-child⑵選擇屬于其父元素的第二個子元素的每個

元素。

:enableddisabled控制表單控件的禁用狀態?

xhecked單選框或復選框被選中?

優先級算法規則:優先級就近原則,同權重情況下樣式定義最近者為準；

'important>id>class>tag

important比內聯優先級高，但內聯比id要高5、

為什么要清除浮動？如何清除？

引起的問題:(1)

父元素的高度無法被撐開?影響與父元素同級的元素(2)

與浮動元素同級的和浮動元素會跟隨其后

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

決方法：

1、利用clear清除浮動

.son{

clear:left|right|both|auto

}

2、在父元素后面額外添加標簽

3、父元素上使用after偽類

#parent:after{

content:

clear:botn;

height:0;

display:block;

}

4、利用overflow清除浮動

#parent{

overflow:auto;

display:inline-block;

}

6、實現垂直居中的幾種方法

margin:auto

.parent{width:

400px;height:

400px;

position:relative;

.son{

position:absoulte;

left:0;

right:0;

top:0;

bottom:0;

margin:auto;

）

}

margin-left、margin-top負值法（需知道子元素width、height）

.parent{width:

400px;height:

400px;

position:relative;

.son{

position:absolute;

width:lOOpx;

height:160px;

left:50%;

top:50%;

//margin-top:translateY(-50%);

//margin-left:translateX(-50%);

margin-top:-80px;

margin-left:-50px;

}

)

flex

,parent{displ

ay:flex;

align