text-align
text-align 屬性規(guī)定元素中的文本的水平對齊方式
可能的值
| 值 | 描述 |
|---|---|
| left | 把文本排列到左邊意述。默認(rèn)值：由瀏覽器決定 |
| right | 把文本排列到右邊 |
| center | 把文本排列到中間 |
| justify | 實現(xiàn)兩端對齊文本效果 |
| inherit | 規(guī)定應(yīng)該從父元素繼承 text-align 屬性的值 |
text-align: center;作用在父元素（塊級元素）上喘落，使得塊級元素內(nèi)的行內(nèi)元素水平居中
由 text-align 展開的居中問題懈叹，先留個坑做盅，周末再填
盒模型
所有HTML元素都可以看作盒子缤削，它包括：邊距窘哈，邊框，填充和實際內(nèi)容亭敢，盒模型允許我們在其他元素和周圍元素邊框之間的空間放置元素
由于歷史原因滚婉，IE對盒子模型的理解與其他瀏覽器不同，見下
| 標(biāo)準(zhǔn)盒子模型 | IE盒子模型 | |
|---|---|---|
| 區(qū)別 |
padding帅刀、border所占的空間不算入width让腹、height |
width=content(尺寸)+padding+border即 padding、border所占的空間算入width扣溺、height |
- 在IE678中骇窍，如果文檔未聲明類型（doctype），IE會使用IE盒子模型（怪異模式）
- 在IE9+锥余、IE678（添加doctype）腹纳、Chrome中，瀏覽器會使用標(biāo)準(zhǔn)盒模型
另外哈恰，CSS3中新增的樣式box-sizing會使瀏覽器對元素的解析使用不同的盒模型
-
box-sizing: content-box;標(biāo)準(zhǔn)盒模型 -
box-sizing: border-box;IE盒模型
line-height
行高只估，
-
line-height: 2;其行高為其本身字體大小的兩倍 -
line-height: 200%;其行高為其父元素字體大小的兩倍
display: inline-block;
MDN釋義：該元素生成一個塊狀盒，該塊狀盒隨著周圍內(nèi)容流動着绷，如同它是一個單獨的行內(nèi)盒子（表現(xiàn)更像是一個被替換的元素）
表現(xiàn)上蛔钙，
- 既呈現(xiàn)inline特性（不占據(jù)一整行，寬度由內(nèi)容寬度決定）荠医，
- 又呈現(xiàn)block特性（可設(shè)置寬高吁脱，內(nèi)外邊距）
但是會因此引發(fā)元素與元素之間產(chǎn)生縫隙
產(chǎn)生縫隙的原因，html標(biāo)簽在編寫過程中的換行產(chǎn)生的空白字符彬向，使得瀏覽器在解析HTML文檔時將空白字符解析為“縫隙”
解決方法：
- 設(shè)置過
display: inline-block;樣式的html標(biāo)簽在編寫時不換行兼贡，避免產(chǎn)生空白字符 - 對于設(shè)置過
display: inline-block;樣式的元素，將其父元素的font-size置為0娃胆，再對需要的元素設(shè)置相應(yīng)的font-size遍希，以此消除空白字符帶來的影響
CSS sprite
稱“雪碧圖”，又稱“精靈圖” （方老師語）：|為了減少向后端請求圖片資源里烦，而將大量“小而雜”的圖片集中在一張圖片上凿蒜，以減少服務(wù)器壓力
使用時，只需控制圖片位置來顯示響應(yīng)圖像胁黑，做到一次請求废封，多次引用
附：MDN 雪碧圖
讓元素看不見（在眼前消失）
| 方式 | 區(qū)別 |
|---|---|
display: none |
消失，不會占據(jù)位置 |
opacity: 0; |
元素整體透明度為0 |
visibility: hidden; |
和opacity: 0;類似 |
background-color: rgba(0, 0, 0, 0.2); |
只會使背景色透明 |
