CSS常见样式2

text-align：center；

可继承，让行内元素水平居中显示（文本，img）

盒模型的区别

当声明后浏览器解析的盒模型是W3C标准盒模型(CSS3中为box-sizing：content-box，默认值)为：
width=content所以盒子的总宽度是width+padding+border盒子会被撑大
而IE盒模型(CSS3也可在盒子添加属性box-sizing：border-box)：
width=content+padding+border盒子内容会被压小

line-height

具有继承性但2和200%继承上有区别
当line-height：2；时2是子元素本身字体大小的两倍
当line-height：200%；时200%代表子元素的父元素字体大小的两倍

inline-block

有行内元素的特性：在一行上显示，同时具有块级元素属性可以设置宽高
当书写个inline-block元素时，如果他们中间有留白，浏览器会默为一个空格，因此页面渲染上也有有一个空格的间隙，出现以上情况当需要去除间隙可以在书写时两个元素紧挨着写不要留有空白或者将他俩套在一个盒子里并给盒子设置font-size：0；
高度不一样的inline-block元素当需要对其时可以设置：
vertical：top／middle／bottom

CSS Sprites

精灵图：当一个页面上有多个小图标时，如果一个一个去请求会造成web服务器负担过重，也会让客户端页面加载变慢，所以合成一张图只需要一次请求。

元素看不见（隐藏或透明）

opacity：0；元素透明度为0，会包含子元素一起变化
visibility：hidden；同上
dispaly：none；消失，不占位置
background-color：rgba(0，0，0，0.2)让背景变得透明

js bin今天有问题
代码1

屏幕快照 2017-08-08 上午9.28.47.png

代码2

屏幕快照 2017-08-08 上午10.14.02.png