text-align
text-align 属性规定元素中的文本的水平对齐方式
可能的值
| 值 | 描述 |
|---|---|
| left | 把文本排列到左边。默认值：由浏览器决定 |
| right | 把文本排列到右边 |
| center | 把文本排列到中间 |
| justify | 实现两端对齐文本效果 |
| inherit | 规定应该从父元素继承 text-align 属性的值 |
text-align: center;作用在父元素（块级元素）上，使得块级元素内的行内元素水平居中
由 text-align 展开的居中问题，先留个坑，周末再填
盒模型
所有HTML元素都可以看作盒子，它包括：边距，边框，填充和实际内容，盒模型允许我们在其他元素和周围元素边框之间的空间放置元素
由于历史原因，IE对盒子模型的理解与其他浏览器不同，见下
| 标准盒子模型 | IE盒子模型 | |
|---|---|---|
| 区别 |
padding、border所占的空间不算入width、height |
width=content(尺寸)+padding+border即 padding、border所占的空间算入width、height |
- 在IE678中，如果文档未声明类型（doctype），IE会使用IE盒子模型（怪异模式）
- 在IE9+、IE678（添加doctype）、Chrome中，浏览器会使用标准盒模型
另外，CSS3中新增的样式box-sizing会使浏览器对元素的解析使用不同的盒模型
-
box-sizing: content-box;标准盒模型 -
box-sizing: border-box;IE盒模型
line-height
行高，
-
line-height: 2;其行高为其本身字体大小的两倍 -
line-height: 200%;其行高为其父元素字体大小的两倍
display: inline-block;
MDN释义：该元素生成一个块状盒，该块状盒随着周围内容流动，如同它是一个单独的行内盒子（表现更像是一个被替换的元素）
表现上，
- 既呈现inline特性（不占据一整行，宽度由内容宽度决定），
- 又呈现block特性（可设置宽高，内外边距）
但是会因此引发元素与元素之间产生缝隙
产生缝隙的原因，html标签在编写过程中的换行产生的空白字符，使得浏览器在解析HTML文档时将空白字符解析为“缝隙”
解决方法：
- 设置过
display: inline-block;样式的html标签在编写时不换行，避免产生空白字符 - 对于设置过
display: inline-block;样式的元素，将其父元素的font-size置为0，再对需要的元素设置相应的font-size，以此消除空白字符带来的影响
CSS sprite
称“雪碧图”，又称“精灵图” （方老师语）：|为了减少向后端请求图片资源，而将大量“小而杂”的图片集中在一张图片上，以减少服务器压力
使用时，只需控制图片位置来显示响应图像，做到一次请求，多次引用
附：MDN 雪碧图
让元素看不见（在眼前消失）
| 方式 | 区别 |
|---|---|
display: none |
消失，不会占据位置 |
opacity: 0; |
元素整体透明度为0 |
visibility: hidden; |
和opacity: 0;类似 |
background-color: rgba(0, 0, 0, 0.2); |
只会使背景色透明 |
