11.27学习日志

         11.27学习日志

                                                                                                  元素的定位属性

                               元素的定位属性主要包括定位模式和边偏移。

                          如果边偏移没写，就是指它的边偏移为0.

                       1.静态定位（static）是元素的文档流的位置状态。

                       2.相对定位（relative）：1.原位置保留

                                                                 2.它的边偏移是以原位置参考的。

                       3.绝对定位（absolute）：父辈有定位，依据最近的已定位的父元素进行定位，如果父元素都没有定位，则以boby（浏览器）进行定位。绝对定位后，元素的原位置不保留。

                       4.固定定位（fixed）：是特殊的固定定位，是以浏览器窗口为参考。

               

                 默认的页面堆积为0，当元素设置定位后，其堆积均为正直（浮在空中），正直越大；空间上越靠上。

                在网页设计中，用到绝对定位时，往往是子绝父相。

 

 

 

1.  static    静态定位:

static 静态定位是position的默认值,默认文本流的状态，不会识别left right top bottom值指定的坐标。

 

2.  absolute  绝对定位：

a : 参照物：按照已经有定位的父元素进行位置的变化。

b : 假如 当前没有父元素 或者 父元素没有定位的情况下，以整个文档为参照物。

c : 绝对定位，脱离文档流、不占据空间。

d : 可以识别left right top bottom值指定的坐标。

 

3.  relative  相对定位：

a : 参照物：自身默认的位置。

b : 始终占据空间，不会破坏文档流。

c : 可以识别left right top bottom值指定的坐标。

 

4. fixed 固定定位：

a : 参照物：浏览器窗口。

b : 脱离整个文本流。不占据空间。

c : 可以识别left right top bottom值指定的坐标。

 

5. sticky 粘性定位：

position:relative  和 position:fixed的结合。

如果页面没超出窗口范围，按照relative 执行，

如果内容超出窗口位置，按照fixed执行。

可以识别left right top bottom值指定的坐标。

 

定位元素:后定位的元素会把前面定位的盖住。

        z-index:

            控制定位元素的层次关系

            属性值为一个数字（可以为负数），数字越大，层次关系越高

            默认值 auto;

在页面的搭建中经常用到包含块的设置：

       1：如果父元素为参照物：添加 position:relative;

       2: 给要做定位的子元素：添加 position:absolute;

 

运用定位可以很方便的让元素到想要到的地方。

居中的方法：

    让内容在浏览器窗口左右上下居中。

        第一种方法:

            position:fixed;

            left:50%;

            top:50%;

            margin:-高度的一半 0 0 -宽度的一半。

 

        第二种方法：

            position:fixed;

            left:0;right:0;

            top:0;bottom:0;

            margin:auto;

    利用定位:让子元素在父元素里面左右上下居中

         /* 左右上下的居中 */

        position:absolute;

        left:0;right:0;

        top:0;bottom:0;

        margin:auto;