• 定位流


    相对定位(position:relative)
    1.什么是相对定位?相对定位就是相对于自己以前在标准流中的位置来移动。
    2.注意点:
    2.1)相对定位是不脱离标准流的,会继续在标准流中占用一份空间。相对定位需要配合top、bottom、left、right来使用。
    2.2)在相对定位中同一个方向上的定位属性只能使用一个。
    2.3)由于相对定位是不脱离标准流的,所以在相对定位中是区分块级元素/行内元素/行内块级元素。
    2.4)由于相对定位是不脱离标准流的,并且相对定位的元素会占用标准流中的位置,所以当给相对定位的元素设置margin/padding等属性的时候会影响到标准流的布局(解释:给相对定位设置margin、padding属性的作用效果是在原来的位置上 )
    3.运用场景:用于对元素进行微调(比如两个元素要顶部对齐时使用)、配合绝对定位来使用。
    绝对定位(position:absolute)
    1.什么是绝对定位?相对定位就是相对于body来定位。
    2.注意点:
    2.1)绝对定位的元素是脱离标准流的,也就是说绝对定位是不占空间的。
    2.2)绝对定位中是不区分块级元素/行内元素/行内块级元素,也就是说行内元素也可以设置宽高了。
    2.3)一个绝对定位的元素是以body作为参考点,那么其实是以网页首屏的宽度和高度作为参考点,而不是以整个网页的宽度和高度作为参考点。
    2.4)一个绝对定位的元素会忽略祖先元素的padding。
    2.5)子绝父相
    2.6)如何让绝对定位的元素水平居中(绝对定位的元素对margin:0 auto不起效果):只需要设置绝对定位元素的left:50%;然后再设置绝对定位元素的margin-left:-元素宽度/2 px;
    3.绝对定位的参考点
    规律:1)默认情况下所有的绝对定位的元素,无论有没有祖先元素,都会以body作为参考点。
    2)如果一个绝对定位的元素有祖先元素,并且祖先元素也是定位流,那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点(注意点:只要是这个绝对定位元素的祖先元素都可以、这里的定位流指的是绝对定位/相对定位/固定定位、只有静态定位不行)。
    3)如果一个绝对定位的元素有祖先元素,并且祖先元素也是定位流,而且祖先元素中有多个元素都是定位流,会以就近原则来选择最终以哪个祖先元素作为参考点。
    固定定位(position:fixed)
    1.什么是固定定位?固定定位和前面学习的背景关联方式很像,背景定位可以让背景图片不随着滚动条的滚动而滚动,而固定定位可以让某个盒子不随着滚动条的滚动而滚动。
    2.注意点:
    2.1)固定定位的元素是脱离标准流的,也就是说固定定位是不占空间的。
    2.2)固定定位和绝对定位一样,是不区分块级元素/行内元素/行内块级元素,也就是说行内元素也可以设置宽高了。

  • 相关阅读:
    Linux 介绍了相关的文件夹
    mousewheel 与 DOMMouseScroll
    如何粗略分析关键词的优化难度
    好老师 (第九届湖南大学计算机程序设计竞赛)
    Java程序猿JavaScript学习笔记(14——扩大jQuery UI)
    在Ubuntu上为Android系统的Application Frameworks层增加硬件访问服务
    在Ubuntu为Android硬件抽象层(HAL)模块编写JNI方法提供Java访问硬件服务接口
    在Ubuntu上为Android增加硬件抽象层(HAL)模块访问Linux内核驱动程序
    在Ubuntu上为Android系统内置C可执行程序测试Linux内核驱动程序
    在Ubuntu上为Android系统编写Linux内核驱动程序
  • 原文地址:https://www.cnblogs.com/Shuangyi/p/11313364.html
Copyright © 2020-2023  润新知