text-align: center的作用是什么，作用在什么元素上？能讓什么元素水平居中?
text-align: center, 作用是讓行內內容相對父元素水平居中對齊
可以作用在塊級元素上, 可以讓行內內容水平對齊
行內內容包括行內元素、行內塊元素和行內文本-
IE 盒模型和W3C盒模型有什么區別?
image.png
區別:
W3C盒模型對于css中設置的width, height就是content內容的大小
IE盒模型中的width,height 是border + padding + content的大小
*{ box-sizing: border-box;}的作用是什么？
box-sizing是css3新增屬性
作用是:
修改默認樣式
所有涉及盒模型的地方全部使用IE盒模型line-height: 2和line-height: 200%有什么區別?
line-height 屬性是用來設置單行文本的行高.
line-height: 2; 設置行高是元素本身font-size的2倍; 無論字體大小, 后代元素都會繼承2倍行高這個關系;
line-height: 200%; 設置行高是當前父容器文字font-size兩倍; 后代的元素只會繼承固定的行高, 不會繼承2倍的行高;inline-block有什么特性？如何去除縫隙？高度不一樣的inline-block元素如何頂端對齊?
- 既呈現inline特性(不占據整行, 寬度由內容寬度決定)
- 又呈現block特性(可設置寬高, 內外邊距)
縫隙問題是因為兩個元素之間有空格等元素, 會被瀏覽器解析成一個空格大小;
解決方法: 設置父元素font-size: 0;
display: inline-block 的元素頂端對齊方式:
添加 vertical-align: top;
- CSS sprite 是什么?
- 將不同的圖片/圖表合并到一張圖上
- 可以減少網絡請求, 提高網頁的加載性能
- 讓一個元素"看不見"有幾種方式？有什么區別?
- opacity: 0; 規定不透明度。從 0.0 （完全透明）到 1.0（完全不透明）, 會從父元素繼承; 不影響頁面布局, 元素依然存在, 只是看不到.
- visibility: hidden; 和opacity:0 情況類似
- display: none 會影響頁面布局, 元素不存在了.
- background-color: rgba(0,0,0,0) 設置背景色透明, 元素必然存在, 不影響頁面布局
