text-align: center的作用是什么,作用在什么元素上?能讓什么元素水平居中
text-align樣式的定義就是塊狀元素中的inline內容(包括inline,inline-block的元素,文本)的對齊方式。
text-align: center:作用設置文本或img標簽等一些內聯對象(或與之類似的元素)的居中。
作用在塊狀元素中的inline的內容上,能讓文本和inline元素的水平居中。
text-align:取值:
值 | 描述 |
---|---|
left |
把文本排列到左邊。默認值:由瀏覽器決定。 |
right |
把文本排列到右邊。 |
center |
把文本排列到中間。 |
justify |
實現兩端對齊文本效果。 |
inherit |
規定應該從父元素繼承 text-align 屬性的值。 |
IE 盒模型和W3C盒模型有什么區別?
什么是IE盒模型
什么是標準盒模型
區別:
W3C標準中padding
、border
所占的空間不在width
、height
范圍內,大家俗稱的IE的盒模型width
包括content
尺寸+padding
+border
ie678怪異模式(不添加 doctype)使用 ie 盒模型,寬度=邊框+padding+內容寬度
chrome, ie9+, ie678(添加 doctype) 使用標準盒模型, 寬度= 內容寬度
使用css3新樣式box-sizing
box-sizing: content-box:w3c標準盒模型
box-sizing: border-box:“IE盒模型”
<div style="height:200px;width:200px;border:solid 10px #333;padding:100px;box-sizing: border-box;"></div>
*{ box-sizing: border-box;}的作用是什么?
該屬性是讓當前頁面所有的元素寬高屬性都按照IE的盒子模型的方式來計算
line-height: 2和line-height: 200%有什么區別?
line-height: 2 為本身文字的高度的2倍;
line-height: 200%為父元素文字的高度的兩倍;
繼承問題:父元素的line-height有單位(px、%),那么繼承的值則是換算后的一個具體的px級別的值;
屬性值沒有單位,則瀏覽器會直接繼承這個“因子(數值)”,而非計算后的具體值,此時它的line-height會根據本身的font-size值重新計算得到新的line-height 值。
參考
inline-block有什么特性?如何去除縫隙?高度不一樣的inline-block元素如何頂端對齊?
特性:既有inline特性(不占據一整行,寬度由內容寬度決定),又有 block特性(可設置寬高,內外邊距)
去除縫隙:可先將具有inline-block特性的元素標簽加一個空的div塊包裹,將其font-size設置為0,同時在將inline-block對應的元素標簽字體在css中恢復原來樣式,這樣可以巧妙的出去兩個inline-block之間的空字符所產生的間隙
頂端對齊:添加CSS樣式vertical-align:top;
CSS sprite 是什么?
精靈圖
指將不同的圖片/圖標合并在一張圖上。
使用CSS Sprite 可以減少網絡請求,提高網頁加載性能。
讓一個元素"看不見"有幾種方式?有什么區別?
- display: none:元素消失,不占位置
- opacity: 0:元素透明度為0,還占有位置
- visibility: hidden:與opacity: 0類似
- background-color: rgba(0,0,0,0):背景色透明