本文主要内容：

1. 背景

2. 雪碧图

3. 隐藏／透明

4. inline-block

5. 盒模型

背景

当页面上某一个容器需要背景设置时，使用background属性

background-attachment
决定了背景图是否随着页面滚动而滚动
background-attachment: scroll; 默认值，背景图随着页面滚动而滚动。背景图相对于当前元素是固定位置的。（内容动背景图也动）
background-attachment: fixed; 滚动页面的时候背景图不动，背景图悬浮，相对浏览器是固定位置的。（内容动背景图不动）
background-attachment: inherit; 从父元素继承。
background-color: xxx;
设置背景色为xxx；有效区域为元素的内容／padding／border（如果是虚线边框）
background-color: red; 颜色名，设置背景色为red
background-color: #ff0000; 十六进制值，设置背景色为#ff0000
background-color: rgb(255,0,0); rgb代码，设置背景色为gba(255,0,0)
background-color: transparent; 设置背景色为透明
background-color: inherit; 继承父元素属性
background-image
为当前元素设置背景图，最好同时设置background-color以防background-image失效。
默认占据元素的内容+padding+边框，处于元素的左上角并在水平+竖直方向平铺。
background-image: url(xxx.gif); 把xxx这个图片地址的图片设置为背景图。（xxx是一个地址）
background-position
设置背景图片的位置，如果背景图需要平铺，就从这一点开始。
background-position: 1px 1px; 可以是两个数值，代表了水平坐标和垂直坐标。如果只有一个值，第二个值默认50%。
background-position: 10% 10%; 两个百分数，左上角是0% 0%; 右下角是100% 100%; 只有一个值的话第二个值默认50%。
background-position: left top; 两个关键词，特性同上。
background-repeat
设置是否以及如何复制背景图。
background-repeat: no-repeat; 不重复
background-repeat: repeat-x; 背景图在水平方向重复
background-repeat: repeat-y; 背景图在竖直方向重复
background-repeat: repeat; 默认值，在水平和竖直方向都重复
background-size
设置背景图片的尺寸（必须把容器撑开）
background-size: 100px 200px; 水平和竖直的数值，如果只写一个值，第二个值就是auto
background-size: 10% 35%;同上
background-size: cover; 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。(可能上下占满但是左右只能显示一部分背景图，图片展示不全)
background-size: contain; 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。(正好显示背景图，可能比例不合理)

雪碧图

原理：为了减少图片请求，把小图片（icon）集成到一张图上，然后用css定位来显示需要的图片区域。
把容器当作窗户，要雪碧图的哪个部分，就用background-position属性调整。

隐藏／透明

display: none;
opacity: 0;
visibility: hidden;
bacground-color: rgba(0,0,0,0.2);

display: none;
浏览器不会再去绘制这个元素，元素消失了，也不会占用位置。

visibility: hidden;
只是用户看不见了，但是元素仍然存在，浏览器知道它的存在，会占据位置，

opacity: 0;
透明度为0，根上面的一样，会占据位置。

bacground-color: rgba(0,0,0,0.2);

针对背景色，设置背景色透明。

inline-block

通过display: inline-block; 进行设置，同时拥有inline和block的特性。

inline-block特性：
1.不占据一整行
2.可以设置宽高
3.可以正常使用margin和padding属性

常见问题：

使用inline-block属性时要注意兼容性
可以使用vertical-align和text-align两个属性调整inline-block元素的竖直和水平对齐。（谁要对齐用谁身上）
缝隙问题
为什么有缝隙呢，因为inline-block的元素的代码之间存在空格，被浏览器识别为空白字符，所以生成了缝隙。
解决方式：
1. 把代码紧密连上。（这样不太方便阅读）
2. 在父元素上设置font-size: 0; 如果inline-block元素里有文字再重新设置子元素的font-size。（常用）