1、text-align: center的作用是什么,作用在什么元素上?能讓什么元素水平居中
text-align可以使文本居中對齊,作用在塊級元素上,如果是給父元素是塊級元素的元素設置text-align:center,可以使包裹在父元素里的行內元素水平居中。
2、IE 盒模型和W3C盒模型有什么區別?
- W3C盒模型:
總寬度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
- IE盒模型
IE盒模型的計算方式和W3C的很相似,但有一點是非常不同的,這就是:填充和邊框并不被包含在計算的范圍內。
總寬度 = margin-left + width + margin-right
這就意味著一旦元素擁有橫向的填充和/或邊框,實際的內容區域(content area )就要擴大來創造出他們占據的空間。
3、*{ box-sizing: border-box;}的作用是什么?
作用是為元素設定的任何內邊距及邊框均在設定的寬度和高度中進行繪制,即設置為了IE盒模型。如果是box-sizing: content-box就是w3c盒模型。另外box-sizing: content-box即是把當前模型設置為“標準盒模型”(圖一所示)。
4、line-height: 2和line-height: 200%有什么區別?
line-height:2表示的是行高是本身字體像素的2倍。
line-height:200%表示的是行高是父容器行高的2倍。
5、inline-block有什么特性?如何去除縫隙?高度不一樣的inline-block元素如何頂端對齊?
簡單來說就是將對象呈現為inline對象,但是對象的內容作為block對象呈現。之后的內聯對象會被排列在同一行內。比如我們可以給一個link(a元素)inline-block屬性值,使其既具有block的寬度高度特性又具有inline的同行特性。
去除間隙可以在html中把產生間隙的兩標簽擠在一起,不留空格;也可以在css中在父元素外設置font-size:0;,然后再再子元素中單獨把字體設置回去。
達到頂端對齊,可以給inline-block元素添加vertical-align:top
6、CSS sprite 是什么?
css 雪碧圖或精靈圖。用一張.png格式圖片來放置所有的小圖標,然后引用這一張圖片,設置background-position來顯示不同的圖標。這樣可以減少向服務器的請求數量,提高加載速度。
7、讓一個元素"看不見"有幾種方式?有什么區別?
display:none;
將元素設置為display:none后,元素在頁面上將徹底消失,元素本來占有的空間就會被其他元素占有,也就是說它會導致瀏覽器的重排和重繪。visibility:hidden
和display:none的區別在于,元素在頁面消失后,其占據的空間依舊會保留著,所以它只會導致瀏覽器重繪而不會重排。適用于那些元素隱藏后不希望頁面布局會發生變化的場景。opacity:0
這種方法和visibility:hidden的一個共同點是元素隱藏后依舊占據著空間,但我們都知道,設置透明度為0后,元素只是隱身了,它依舊存在頁面中。background-color:rgba(0,0,0,0);raga(0, 0, 0, 0) raga 是代表 Red(紅色)、Green(綠色)、Blue(藍色)和 Alpha,Alpha代表透明度,raga(0, 0, 0, 0)表示背景色完全透明。