7. CSS常见样式探究2

text-align: center

text-align:center作用在块级元素上，能使块级元素内的文本，图片等行内元素水平居中，但不能使子类块级元素居中。
同时text-align具有可继承的特性，子类块级元素的子类内联元素也会居中。

IE 盒模型和W3C盒模型

IE盒模型box-sizing: border-box：width或height=内容宽度或高度+padding*2+border*2

长度

normal

纯数字

inline-block

1. 特性：

• 和其他元素都在一行上；
• 元素的高度、宽度、行高以及顶和底边距都可设置。

2. ** 如何去掉中间的缝隙：**
   可以改变元素的书写方式，让两个标签前后相接没有空格，但这种写法不符合代码规范，增加了阅读和后期维护成本，不建议使用。

也可以使用margin负值，或者使用letter-spacing、word-spacing等。

比较推荐的是用font-size:0来进行解决，如下：

3. ** 高度不一样的inline-block元素如何顶端对齐？**
   设置vertical-align的值来实现顶端对齐：vertical-align:top

CSS sprite介绍

CSS Sprites是一种网页图片应用处理方式，就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background-position”的组合进行背景定位。

其优点在于：

• 减少网页的http请求，提高性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
• 减少图片的字节：多张图片合并成1张图片的字节小于多张图片的字节总和；
• 减少了命名困扰：只需对一张集合的图片命名，不需要对每一个小元素进行命名提高制作效率；
• 更换风格方便：只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变，维护起来更加方便。

诚然CSS Sprites是如此的强大，但是也存在不可忽视的缺点：
不易修改，不能缩放等。

让一个元素"看不见"的方式及区别：

1. display:none
   将元素设置为display:none后，元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。
2. visibility:hidden
   设置元素的visibility为hidden也是一种常用的隐藏元素的方法，和display:none的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排。
3. opacity:0
   这种方法和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间，但我们都知道，设置透明度为0后，元素只是隐身了，它依旧存在页面中。
4. background-color: rgba(0，0，0，0.2) ； 只是背景色透明。