CSS常见样式-下

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会使浏览器对元素的解析使用不同的盒模型

1. box-sizing: content-box; 标准盒模型
2. box-sizing: border-box; IE盒模型

line-height

行高，

• line-height: 2; 其行高为其本身字体大小的两倍
• line-height: 200%; 其行高为其父元素字体大小的两倍

display: inline-block;

MDN释义：该元素生成一个块状盒，该块状盒随着周围内容流动，如同它是一个单独的行内盒子（表现更像是一个被替换的元素）
表现上，

• 既呈现inline特性（不占据一整行，宽度由内容宽度决定），
• 又呈现block特性（可设置宽高，内外边距）

但是会因此引发元素与元素之间产生缝隙

产生缝隙的原因，html标签在编写过程中的换行产生的空白字符，使得浏览器在解析HTML文档时将空白字符解析为“缝隙”

解决方法：

1. 设置过 display: inline-block;样式的html标签在编写时不换行，避免产生空白字符
2. 对于设置过 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);	只会使背景色透明