web前端面試題及答案 css篇
1.CSS3有哪些新特性?
CSS3實現圓角(border-radius),
陰影(box-shadow),
對文字加特效(text-shadow、),
線性漸變(gradient),
旋轉(transform)transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜
增加了更多的CSS選擇器 多背景 rgba
在CSS3中唯一引入的偽元素是::selection.
媒體查詢,多欄佈局,border-image;
2.XML和JSON的區別?
(1).資料體積方面。JSON相對於XML來講,資料的體積小,傳遞的速度更快些。
(2).資料互動方面。JSON與JavaScript的互動更加方便,更容易解析處理,更好的資料互動。
(3).資料描述方面。JSON對資料的描述性比XML較差。
(4).傳輸速度方面。JSON的速度要遠遠快於XML。
3.對BFC規範的理解?
BFC,塊級格式化上下文,一個建立了新的BFC的盒子是獨立佈局的,盒子裡面的子元素的樣式不會影響到外面的元素。在同一個BFC中的兩個毗鄰的塊級盒在垂直方向(和佈局方向有關係)的margin會發生摺疊。 (W3C CSS 2.1 規範中的一個概念,它決定了元素如何對其內容進行佈局,以及與其他元素的關係和相互作用。)
4.解釋下 CSS sprites,以及你要如何在頁面或網站中使用它。
CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片檔案中,再利用CSS的“background-image”,“background- repeat”,“background-position”的組合進行背景定位,background-position可以用數字能精確;
5.position的值, relative和absolute分別是相對於誰進行定位的?
absolute 生成絕對定位的元素, 相對於最近一級的 定位不是 static 的父元素來進行定位。
fixed (老IE不支援) 生成絕對定位的元素,相對於瀏覽器視窗進行定位。
relative 生成相對定位的元素,相對於其在普通流中的位置進行定位。
static 預設值。沒有定位,元素出現在正常的流中。
6.display:none和visibility:hidden的區別?
display:none 隱藏對應的元素,在文件佈局中不再給它分配空間,它各邊的元素會合攏,就當他從來不存在。
visibility:hidden 隱藏對應的元素,但是在文件佈局中仍保留原來的空間。
7.CSS中 link 和@import 的區別是?
(1) link屬於HTML標籤,而@import是CSS提供的;
(2) 頁面被載入的時,link會同時被載入,而@import引用的CSS會等到頁面被載入完再載入;
(3) import只在IE5以上才能識別,而link是HTML標籤,無相容問題;
(4) link方式的樣式的權重 高於@import的權重.
8.position:absolute和float屬性的異同?
A:共同點:對內聯元素設定`float`和`absolute`屬性,可以讓元素脫離文件流,並且可以設定其寬高。
B:不同點:float仍會佔據位置,position會覆蓋文件流中的其他元素。
9.介紹一下box-sizing屬性?
box-sizing屬性主要用來控制元素的盒模型的解析模式。預設值是content-box。
content-box:讓元素維持W3C的標準盒模型。元素的寬度/高度由border
+ padding + content的寬度/高度決定,設定width/height屬性指的是content部分的寬/高
border-box:讓元素維持IE傳統盒模型(IE6以下版本和IE6~7的怪異模式)。設定width/height屬性指的是border
+ padding + content
標準瀏覽器下,按照W3C規範對盒模型解析,一旦修改了元素的邊框或內距,就會影響元素的盒子尺寸,就不得不重新計算元素的盒子尺寸,從而影響整個頁面的佈局。
10.CSS 選擇符有哪些?哪些屬性可以繼承?優先順序演算法如何計算? CSS3新增偽類有那些?
1.id選擇器( # myid)
2.類選擇器(.myclassname)
3.標籤選擇器(div, h1, p)
4.相鄰選擇器(h1 + p)
5.子選擇器(ul > li)
6.後代選擇器(li a)
7.萬用字元選擇器( * )
8.屬性選擇器(a[rel = "external"])
9.偽類選擇器(a: hover, li:nth-child)
可繼承的樣式:
font-size font-family color, text-indent;
不可繼承的樣式:border
padding margin width height ;
優先順序就近原則,同權重情況下樣式定義最近者為準;
載入樣式以最後載入的定位為準;
!important
> id >
class >
tag
css3新增偽類:
p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每個 <p> 元素。
p:last-of-type 選擇屬於其父元素的最後 <p> 元素的每個 <p> 元素。
p:only-of-type 選擇屬於其父元素唯一的 <p> 元素的每個 <p> 元素。
p:only-child 選擇屬於其父元素的唯一子元素的每個 <p> 元素。
p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個 <p> 元素。
:enabled :disabled 控制表單控制元件的禁用狀態。
:checked 單選框或複選框被選中。