元素的层级：

如果定位元素的层级是一样，则下边的元素会盖住上边的

通过z-index属性可以用来设置元素的层级

可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级，层级越高，越优先显示

对于没有开启定位的元素不能使用z-index

设置元素的透明背景

opacity可以用来设置元素背景的透明，它需要一个0-1之间的值

0 表示完全透明

1 表示完全不透明

0.5 表示半透明

opacity属性在IE8及以下的浏览器中不支持

IE8及以下的浏览器需要使用如下属性代替

alpha(opacity=透明度)

透明度，需要一个0-100之间的值

0 表示完全透明

100 表示完全不透明

50 半透明

这种方式支持IE6，但是这种效果在IE Tester中无法测试

---

背景：

使用background-image来设置背景图片

语法：background-image:url(相对路径);

- 如果背景图片大于元素，默认会显示图片的左上角

- 如果背景图片和元素一样大，则会将背景图片全部显示

- 如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素

可以同时为一个元素指定背景颜色和背景图片，这样背景颜色将会作为背景图片的底色

一般情况下设置背景图片时都会同时指定一个背景颜色

background-repeat用于设置背景图片的重复方式

可选值：

repeat，默认值，背景图片会双方向重复（平铺）

no-repeat，背景图片不会重复，有多大就显示多大

repeat-x， 背景图片沿水平方向重复

  repeat-y，背景图片沿垂直方向重复

---

背景偏移与走位：

背景图片默认是贴着元素的左上角显示

通过background-position可以调整背景图片在元素中的位置

可选值：

该属性可以使用 top right left bottom center中的两个值来指定一个背景图片的位置

top left 左上

bottom right 右下

如果只给出一个值，则第二个值默认是center

也可以直接指定两个偏移量

第一个值是水平偏移量

- 如果指定的是一个正值，则图片会向右移动指定的像素

- 如果指定的是一个负值，则图片会向左移动指定的像素

第二个是垂直偏移量

- 如果指定的是一个正值，则图片会向下移动指定的像素

- 如果指定的是一个负值，则图片会向上移动指定的像素

background-attachment用来设置背景图片是否随页面一起滚动

可选值：

scroll，默认值，背景图片随着窗口滚动

fixed，背景图片会固定在某一位置，不随页面滚动

不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素

当背景图片的background-attachment设置为fixed时，背景图片的定位永远相对于浏览器的窗口

---

按钮练习：

做完功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁，这个闪烁会造成一次不佳的用户体验

产生问题的原因：

背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求

但是我们的外部资源并不是同时加载，浏览器会在资源被使用时才去加载资源

我们这个练习，一上来浏览器只会加载link.png

由于hover和active的状态没有马上触发，所以hover.png和active.png并不是立即加载的

当hover被触发时，浏览器才去加载hover.png

当active被触发时，浏览器才去加载active.png

由于加载图片需要一定的时间，所以在加载和显示过程会有一段时间，背景图片无法显示，导致出现闪烁的情况

为了解决该问题，可以将三个图片整合为一张图片，这样可以同时将三张图片一起加载，就不会出现闪烁的问题了

然后再通过background-position来切换要显示的图片的位置，这种技术叫做图片整合技术（CSS-Sprite）

优点：

1 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，提高访问效率，提高了用户体验。

  2 将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加了用户体验

---

表格：

在HTML中，使用table标签来创建一个表格

在table标签中使用tr来表示表格中的一行，有几行就有几对tr

在tr中需要使用td来创建一个单元格，有几个单元格就有几个td

rowspan用来设置纵向的合并单元格

colspan横向的合并单元格

---

表格样式：

table和td边框之间默认有一个距离，通过border-spacing属性可以设置这个距离

border-collapse可以用来设置表格的边框合并

如果设置了边框合并，则border-spacing自动失效

隔行变色：

tbody > tr.nth-child（even/odd）

---

长表格：

有一些情况下表格是非常的长的，这时就需要将表格分为三个部分，表头，表格的主体，表格底部

在HTML中为我们提供了三个标签：

thead 表头

tbody 表格主体

tfoot 表格底部

这三个标签的作用，就来区分表格的不同的部分，他们都是table的子标签，都需要直接写到table中，tr需要写在这些标签当中

thead中的内容，永远会显示在表格的头部

tfoot中的内容，永远都会显示表格的底部

tbody中的内容，永远都会显示表格的中间

如果表格中没有写tbody，浏览器会自动在表格中添加tbody

并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素

通过table > tr 无法选中行 需要通过tbody > tr

---

表格布局：

以前表格更多的情况实际上是用来对页面进行布局的，但是这种方式早已被CSS所淘汰了

表格的列数由td最多的那行决定

表格是可以嵌套，可以在td中在放置一个表格

---