text-align: center的作用是什么,作用在什么元素上?能讓什么元素水平居中
text-align 定義行內內容(例如文字)如何相對它的塊父元素對齊,text-align 并不控制塊元素自己的對齊,只控制它的行內內容的對齊,作用在block和inline-block元素上。
text-align: center;
意思是block或inline-block元素中的inline 和inline-block的元素居中居中。
IE 盒模型和 W3C 盒模型有什么區別?
W3C標準中padding、border所占的空間不在width、height范圍內;
而IE的盒模型width包括content+padding+border。
*{ box-sizing: border-box;}的作用是什么?
box-sizing是CSS 3新增屬性,*{ box-sizing: border-box;}設置當前頁面的所有標簽的盒模型為IE盒模型,
line-height: 2和line-height: 200%有什么區別?
- 計算標準:line-height:2 表示行高為本身字體的兩倍高度
line-height:200% 表示設置行高為父元素字體的兩倍高度 - 繼承:line-height: 2 繼承給子元素的是2這個縮放因子,line-height: 200% 繼承給子元素的是200%計算后的值。
inline-block有什么特性?如何去除縫隙?高度不一樣的inline-block元素如何頂端對齊?
- 既有inline特性(不占據一整行,寬度由內容寬度決定),又有block特性(可設置寬高,內外邊距)。
- 將元素的display設置為inline-block之后,元素和元素之間會由于空白字符或代碼的換行產生縫隙,可以刪去元素之間的字符或取消換行來去除縫隙,也可以用一個div包裹住這些需要處理縫隙的元素,將div元素的font-size設置為0,原理是使容器中的字符大小為0,字符相當于不存在,然后將需要展示的元素的font-size設置為需要的值這樣就達到了去除縫隙的效果。
- inline-block使元素具有了行內元素的特性,元素與元素在同一行顯示時會以元素內的文本基線作為一個基準點進行對其,將想要頂端對其的元素組合成一個同一類,然后設置其vertical-align為top,就能達到頂端對其的目的。vertical-align是與行內元素和表格綁定在一起的,對塊級元素不作用。
CSS sprite 是什么?
CSS sprite 又稱之為精靈圖,把多個小icon合成一個大的圖片,使用的時候,元素以這張合成后的大圖為背景,通過設置 background-position 的屬性來獲取指定 icon
- 優點:減少圖片的請求,減少http的性能消耗。
- 缺點:由于將多張 icon放到一張png圖上,因此在改變背景圖大小時background-position不利于計算。
讓一個元素"看不見"有幾種方式?有什么區別?
- display:none ,(脫離文檔流 不占據位置)
- opacity:0,(透明但仍然在文檔流中)
- visibility:hidden,基本與opacity一致。
- background-color:rgba(0,0,0,0) , 背景色透明