zoukankan      html  css  js  c++  java
  • 位置属性

    定位有三种:

    1.相对定位 2.绝对定位 3.固定定位

    这三种定位,每一种都暗藏玄机,所以我们要一一单讲。

    相对定位

    相对定位:相对于自己原来的位置定位

    现象和使用:

    1.如果对当前元素仅仅设置了相对定位,那么与标准流的盒子什么区别。

    2.设置相对定位之后,我们才可以使用四个方向的属性: top、bottom、left、right

    特性:

    1.不脱标

    2.形影分离

    3.老家留坑(占着茅房不拉屎,恶心人)

    所以说相对定位 在页面中没有什么太大的作用。影响我们页面的布局。我们不要使用相对定位来做压盖效果

    用途:

    1.微调元素位置

    2.做绝对定位的参考(父相子绝)绝对定位会说到此内容。

    参考点:

    自己原来的位置做参考点。

    绝对定位

    特性:

    1.脱标 2.做遮盖效果,提成了层级。设置绝对定位之后,不区分行内元素和块级元素,都能设置宽高。

    参考点(重点):

    一、单独一个绝对定位的盒子

    1.当我使用top属性描述的时候 是以页面的左上角(跟浏览器的左上角区分)为参考点来调整位置
    2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。

    二、以父辈盒子作为参考点

    1.父辈元素设置相对定位,子元素设置绝对定位,那么会以父辈元素左上角为参考点,这个父辈元素不一定是爸爸,它也可以是爷爷,曾爷爷。

    2.如果父亲设置了定位,那么以父亲为参考点。那么如果父亲没有设置定位,那么以父辈元素设置定位的为参考点

    3.不仅仅是父相子绝,父绝子绝 ,父固子绝,都是以父辈元素为参考点

    注意了:父绝子绝,没有实战意义,做站的时候不会出现父绝子绝。因为绝对定位脱离标准流,影响页面的布局。相反‘父相子绝’在我们页面布局中,是常用的布局方案。因为父亲设置相对定位,不脱离标准流,子元素设置绝对定位,仅仅的是在当前父辈元素内调整该元素的位置。

    还要注意,绝对定位的盒子无视父辈的padding

    作用:页面布局常见的“父相子绝”,一定要会!!!!

    绝对定位的盒子居中

    当做公式记下来吧!

    *{
       padding: 0;
       margin: 0;
    }
    .box{
       width: 100%;
       height: 69px;
       background: #000;
    }
    .box .c{
       width: 960px;
       height: 69px;
       background-color: pink;
       *margin: 0 auto;*/
       position: relative;
       left: 50%;
        margin-left: -480px;
       /*设置绝对定位之后,margin:0 auto;不起任何作用,如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位,然后left:50%; margin-left等于元素宽度的一半,实现绝对定位盒子居中*/
     }
    View Code

    固定定位

    固定当前的元素不会随着页面滚动而滚动

    特性:

    1.脱标 2.遮盖,提升层级 3.固定不变

    参考点:

    设置固定定位,用top描述。那么是以浏览器的左上角为参考点
    如果用bottom描述,那么是以浏览器的左下角为参考点

    作用: 1.返回顶部栏 2.固定导航栏 3.小广告

    小结

    设置定位之后,top、left、right、bottom属性值可以使用

    一、relative 相对定位:相对于自身位置定位

    影响:
    1.没有偏移量的时候对元素本身基本没有影响
    2.提升层级

    二、abdolute 绝对定位

      在没有父级元素的情况下,相对于浏览器的左上角定位
      没有定位父级,相对于浏览器的左上角定位
      有定位父级,相对于最近的父级定位
     影响
      脱离文档流
      提升了层级
    

    三、fixed 固定在浏览器的某个位置,可以做小广告

    四、static 静态定位,默认 ```

  • 相关阅读:
    Java实现 蓝桥杯VIP 算法训练 字符串逆序
    Java实现 蓝桥杯VIP 算法训练 字符串逆序
    Java实现 蓝桥杯VIP 算法训练 最长字符串
    Java实现 蓝桥杯VIP 算法训练 最长字符串
    Java实现 蓝桥杯VIP 算法训练 最长字符串
    Java实现 蓝桥杯VIP 算法训练 最长字符串
    Java实现 蓝桥杯VIP 算法训练 最长字符串
    Java实现 蓝桥杯VIP 算法训练 成绩的等级输出
    Java实现 蓝桥杯VIP 算法训练 成绩的等级输出
    Qt 自定义model实现文件系统的文件名排序
  • 原文地址:https://www.cnblogs.com/fmgao-technology/p/9246054.html
Copyright © 2011-2022 走看看