text-align: center
text-align:center作用在块级元素上，能使块级元素内的文本，图片等行内元素水平居中，但不能使子类块级元素居中。
同时text-align具有可继承的特性，子类块级元素的子类内联元素也会居中。
IE 盒模型和W3C盒模型
IE盒模型box-sizing: border-box：width或height=内容宽度或高度+padding*2+border*2
长度
normal
纯数字
inline-block
- 特性：
- 和其他元素都在一行上；
- 元素的高度、宽度、行高以及顶和底边距都可设置。
- ** 如何去掉中间的缝隙：**
可以改变元素的书写方式，让两个标签前后相接没有空格，但这种写法不符合代码规范，增加了阅读和后期维护成本，不建议使用。
也可以使用margin负值，或者使用letter-spacing、word-spacing等。
比较推荐的是用font-size:0来进行解决，如下：
- ** 高度不一样的inline-block元素如何顶端对齐？**
设置vertical-align的值来实现顶端对齐：vertical-align:top
CSS sprite介绍
CSS Sprites是一种网页图片应用处理方式，就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background-position”的组合进行背景定位。
其优点在于：
- 减少网页的http请求，提高性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
- 减少图片的字节：多张图片合并成1张图片的字节小于多张图片的字节总和；
- 减少了命名困扰：只需对一张集合的图片命名，不需要对每一个小元素进行命名提高制作效率；
- 更换风格方便：只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变，维护起来更加方便。
诚然CSS Sprites是如此的强大，但是也存在不可忽视的缺点：
不易修改，不能缩放等。
让一个元素"看不见"的方式及区别：
- display:none
将元素设置为display:none后，元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。 - visibility:hidden
设置元素的visibility为hidden也是一种常用的隐藏元素的方法，和display:none的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排。 - opacity:0
这种方法和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间，但我们都知道，设置透明度为0后，元素只是隐身了，它依旧存在页面中。 - background-color: rgba(0，0，0，0.2) ； 只是背景色透明。
网友评论