HTML&CSS基础（八）

1.定位：定位指的是将指定的元素摆放到页面的任意位置。
通过定位可以任意的摆放元素。
通过position属性来设置元素的定位。
可选值：
①static，默认值，元素没有开启定位。
②relative，开启元素的相对定位。
开启相对定位的特点：
❶开启之后，若不设置偏移量，元素的位置不会发生任何变化。
❷相对定位是相对于元素在文档流中原来的位置进行定位。
❸相对定位的元素不会脱离文档流。
❹相对定位会使元素提升一个层级。
❺相对定位不会改变元素的性质，块元素还是块元素，内联元素还是内联元素。
③absolute，开启元素的绝对定位。
开启绝对定位的特点：
❶开启之后，会使元素脱离文档流。
❷开启之后，若不设置偏移量，元素的位置不会发生任何变化。
❸绝对定位是相对于离他最近的开启了定位的父元素进行定位的(一般情况下，开启了子元素的绝对定位都会同时开启父元素的相对定位)。
如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位。
❹绝对定位会使元素提升一个层级。
❺绝对定位会改变元素的性质，块元素的宽度和高度默认都被内容撑开，内联元素变成块元素。
④fixed，开启元素的固定定位(也是绝对定位的一种)。
固定定位也是绝对定位的一种，他的大部分特点都和绝对定位一样。
开启固定定位的特点：
❶开启之后，会使元素脱离文档流。
❷开启之后，若不设置偏移量，元素的位置不会发生任何变化。
❸固定定位会使元素提升一个层级。
❹固定定位永远都会相对于浏览器窗口进行定位。
❺固定定位会固定在浏览器窗口的某个位置，不会随滚动条滚动。
IE6不支持固定定位。
2.当开启了元素的定位(position属性值是一个非static的值)时，可以通过left、right、top、bottom四个属性值来设置元素的偏移量。

• left：元素相对于其定位位置的左侧偏移量。
  right：元素相对于其定位位置的右侧偏移量。
  top：元素相对于其定位位置的上边的偏移量。
  bottom：元素相对于其定位位置的下边的偏移量。
• 通常偏移量只需要使用两个就可以对一个元素进行定位，一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位。
  3.层级
  如果定位元素层级是一样的，下面的元素会盖住上面的。
• 通过z-index属性可以用来设置元素的层级。层级越高，越优先显示。
  为z-index指定一个正整数作为正值，该值将会作为当前元素的层级。
• 对于没有开启定位的元素，不能使用z-index。
• 父元素的层级再高，也不会盖住子元素。
  4.设置元素的透明背景
  opacity可以用来设置元素背景的透明。需要一个0-1之间的值。
  0表示完全透明，1表示完全不透明。
• IE8以下的浏览器不支持，可以使用如下的属性代替：
  filter:alpha(opacity=透明度)
  透明度需要一个0-100之间的值。
  0表示完全透明，100表示完全不透明，50表示半透明。

5.背景
background-image，设置背景图片。如：background-image:url(img/2.jpg);
语法：background-image:url(相对路径);
相对路径写在哪就相当于哪个文件夹。

• 可以同时为一个元素指定背景颜色和背景图片，这样背景颜色将会变为背景图片的底色。一般情况下设置背景图片时都会同时指定一个背景颜色。
• 如果背景图片大于元素，默认会显示图片的左上角。
  如果背景图片和元素一样大，则会将背景图片全部显示。
  如果背景图片小于元素大小，则会默认将背景图片平铺以铺满整个元素。
• background-repeat用于设置背景图片的重复方式。
  可选值：
  ❶repeat，默认值，背景图片会双方向重复(平铺)。
  ❷no-repeat，背景图片不会重复，有多大就显示多大。
  ❸repeat-x，背景图片沿水平方向重复。
  ❹repeat-y，背景图片沿垂直方向重复。
  6.背景图片位置的调整：背景图片默认是贴着元素的左上角显示。
• 通过background-position可以调整背景图片在元素中的位置。
  使用top、right、left、bottom、center中的两个值来指定一个背景图片的位置。
  可选值：
  ❶top left，左上
  ❷bottom right，右下。等等等等
  如果只给出一个值，则第二个值默认是center。
• 可以直接指定两个偏移量。
  第一个是水平偏移量。
  –如果指定的是一个正值，则图片会向右移动指定的像素。
  –如果指定的是一个负值，则图片会向左移动指定的像素。
  第二个是垂直偏移量。
  –如果指定的是一个正值，则图片会向下移动指定的像素。
  –如果指定的是一个负值，则图片会向上移动指定的像素。
  7.背景图片能否滚动
  用background-attachment设置背景图片是否随页面一起滚动。
  可选值：
  ❶scroll，默认值，背景图片随着窗口滚动
  ❷fixed，背景图片会固定在某一位置，不随页面滚动。
  -当设置为fixed时，背景图片的定位永远相对于浏览器的窗口。
• 不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素。
  8.background
  –通过该属性可以同时设置所有背景相关的样式。
  没有顺序的要求，谁前谁后都可以。
  也没有数量的要求，不写的样式就使用默认值。