HTML5+CSS

一、定位    position
    1.static       (默认值)
    2.relative     相对定位
        概念：
          <1>相对自身原本的位置进行定位。(正数向元素中心走，负数向元素外界走) 
          <2>具体参考偏移量进行移动。
          <3>不脱离文档流
    3.absolute     绝对定位
            概念：
          <1>绝对定位的参照物为包含块，如果父元素是包含块就针对父元素定位。如果父元素不是包含块，就向上层寻找，直到body为止。
          <2>完全脱离文档流
          <3>具体参考偏移量进行移动。
    4.fixed        固定定位
            概念：
          <1>参照物为浏览器可视窗口，针对于浏览器可视窗口进行定位。
          <2>脱离文档流。
    5.sticky       粘性定位
            概念：
          <1>参照物为距离自己最近的具有滚动条的元素。
          <2>不脱离文档流。
    包含块：
      <1>元素添加定位后，就是一个包含块。父元素是包含块就针对父元素定位。如果父元素不是包含        块，就向上层寻找，直到body为止。
      <2>如果父元素本身不需要定位，子元素想要参考父元素进行绝对定位，可以给父元素设置        position:relative;使父元素不脱离文档，不会对页面造成影响。
二、偏移量
    概念：控制定位元素如何进行位移。
      top        上
      left       左
      right      右
      bottom     下
      left和right同时使用，left优先生效。
      top和bottom同时使用，top优先生效。
      注意：偏移量只对定位的元素生效，对于没有定位的元素无效。
三、层叠性     z-index
    1.层叠性显示规则：
            <1>定位元素会盖着未定位元素（添加static属性值不算定位。）
            <2>如果都添加定位，html结构后写的盖着先写的。
            <3>z-index属性可以改变定位的层叠关系，z-index越大，层级越高。
            注意：z-index只对定位元素生效。
      2.z-index   取值为number;
          案例   z-index:1;
四、定位元素应用
    1.position取值为absolute和fixed时，可以将元素类型偷偷转换为块元素。
      总结：脱离文档的元素，基本上都会偷偷转换为块元素。
      2.元素在父元素中水平垂直居中
    方法1:
      (1)给大盒子写个position:relative;
      (2)给小盒子写
        position:absolute;
        left:50%;
        top:50%;
        margin-top:负的小盒子高度的一半;
        margin-left:负的小盒子宽度的一半;
    方法2:
      (1)给大盒子写个position:relative;
      (2)给小盒子写
        position:absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    3.元素在页面中永远水平垂直居中
  方法1:
      给盒子写
        position:fixed;
        left:50%;
        top:50%;
        margin-top:负的盒子高度的一半;
        margin-left:负的盒子宽度的一半;
    方法2:
      给盒子写
        position:fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
五、锚记
    1.作用：可以在页面的不同位置进行跳转。
      2.实现：
      <div id='box1'></div>
      <a href='#box1'></a> 
      3.原理：
        a标签可以进行跳转，当我们不写页面路径时，默认跳转当前页面
        id在一个页面中是唯一的，那么我们a标签，href可以跟一个id名
        这样就能跳转到指定的位置。 
六、元素透明   opacity
     作用：让元素整体变得透明，包括里边的子元素和文字。
      opacity     取值范围0-1之间
      0为全透明     1为不透明