css是层叠样式表，它是网页之皮

---

本文主要内容：

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属性调整。

---

隐藏／透明

1. display: none;
2. opacity: 0;
3. visibility: hidden;
4. 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属性

常见问题：

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

---

盒模型

正常盒模型由内容区+padding+border+margin组成，宽度=内容区宽度
ie678如果没声明html5，会使用怪异模式，宽度=内容区宽度+padding+border