【 CSS 】定位

不要因为小小的失败而放弃大大的梦想,每一次坚持都是通向成功的一步。- 马克·吐温

1. 定位

1.1 为何使用定位

我们先来看一个效果,同时思考一下用标准流或浮动能否实现类似的效果

场景1: 某个元素可以自由的在一个盒子内移动位置,并且压住其他盒子.

场景2:当我们滚动窗口的时候,盒子是固定屏幕某个位置的。

结论:要实现以上效果,标准流 或 浮动都无法快速实现

所以:

  1. 浮动可以让多个块级盒子一行没有缝隙排列显示, 经常用于横向排列盒子。
  2. 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子。

1.2 定位组成

定位:将盒子在某一个位置,所以定位也是在摆放盒子, 按照定位的方式移动盒子

定位也是用来布局的,它有两部分组成:

定位 = 定位模式 + 边偏移

定位模式 用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

1.2.1 边偏移(方位名词)

边偏移 就是定位的盒子移动到最终位置。有 topbottomleftright 4 个属性。

边偏移属性示例描述
toptop: 60px顶端偏移量,定义元素相对于父元素上边线的距离
bottombottom: 60px底部偏移量,定义元素相对于父元素下边线的距离
leftleft: 60px左侧偏移量,定义元素相对于父元素左边线的距离
rightright: 60px右侧偏移量,定义元素相对于父元素右边线的距离

定位的盒子有了边偏移才有价值。 一般情况下,凡是有定位地方必定有边偏移。

1.2.2 定位模式 (position)

在 CSS 中,通过 position 属性定义元素的定位模式,语法如下:

选择器 { position: 属性值; 
}

定位模式是有不同分类的,在不同情况下,我们用到不同的定位模式。
定位模式决定元素的定位方式 ,它通过 CSS 的 position 属性来设置,其值可以分为四个:

语义
static静态定位
relative相对定位
absolute绝对定位
fixed固定定位

1.3 定位模式介绍

1.3.1 静态定位(static) - 了解

  • 静态定位是元素的默认定位方式,无定位的意思。它相当于 border 里面的none,静态定位static,不要定位的时候用。

  • 语法:

    选择器 { position: static; 
    }
    
  • 静态定位 按照标准流特性摆放位置,它没有边偏移。

  • 静态定位在布局时我们几乎不用的

1.3.2. 相对定位(relative) - 重要

  • 相对定位是元素在移动位置的时候,是相对于它自己原来的位置来说的(自恋型)。
  • 语法:
选择器 { position: relative; 
}
  • 相对定位的特点:(务必记住)

    • 1.它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)。

    • 2.原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它。

      因此,相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。。

1.3.3. 绝对定位(absolute) - 重要

1.3.3.1 绝对定位的介绍
  • 绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的(拼爹型)。

  • 语法:

     选择器 { position: absolute; }
    
  1. 完全脱标 —— 完全不占位置;

  2. 父元素没有定位,则以浏览器为准定位(Document 文档)。

  3. 父元素要有定位

    • 元素将依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位。
  • 绝对定位的特点总结:(务必记住)

    1.如果没有祖先元素或者祖先元素没有定位,则以浏览器为基准定位(Document 文档)。

    2.如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素为参考点移动位置。

    3.绝对定位不再占有原先的位置。所以绝对定位是脱离标准流的。(脱标)

1.3.3.2 定位口诀 —— 子绝父相

这个 “子绝父相” 太重要了,是我们学习定位的口诀,是定位中最常用的一种方式这句话的意思是:子级是绝对定位的话,父级要用相对定位。

因为绝对定位的盒子是拼爹的,所以要和父级搭配一起来使用。

  1. 子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子。
  2. 父盒子需要加定位限制子盒子在父盒子内显示。
  3. 父盒子布局时,需要占有位置,因此父亲只能是相对定位。

总结: 因为父级需要占有位置,因此是相对定位, 子盒子不需要占有位置,则是绝对定位
当然,子绝父相不是永远不变的,如果父元素不需要占有位置,子绝父绝也会遇到。

1.3.4 固定定位(fixed) - 重要

  • 固定定位是元素固定于浏览器可视区的位置。(认死理型) 主要使用场景: 可以在浏览器页面滚动时元素的位置不会改变。

  • 语法:

     选择器 { position: fixed; }
    
  • 固定定位的特点:(务必记住):

    1.以浏览器的可视窗口为参照点移动元素。

    • 跟父元素没有任何关系
    • 不随滚动条滚动。

    2.固定定位不在占有原先的位置

  • 固定定位也是脱标的,其实固定定位也可以看做是一种特殊的绝对定位。(认死理型)

    • 完全脱标—— 完全不占位置;
    • 只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置;
      • 跟父元素没有任何关系;单独使用的
      • 不随滚动条滚动。

1.3.5 粘性定位(sticky) - 了解

  • 粘性定位可以被认为是相对定位和固定定位的混合。 Sticky 粘性的

  • 语法:

     选择器 { position: sticky; top: 10px; }
  • 粘性定位的特点:

    1.以浏览器的可视窗口为参照点移动元素(固定定位特点)

    2.粘性定位占有原先的位置(相对定位特点)

    3.必须添加 top 、left、right、bottom 其中一个才有效

    跟页面滚动搭配使用。 兼容性较差,IE 不支持。

1.3.6 定位总结

定位模式是否脱标移动位置是否常用
static 静态定位不能使用边偏移很少
relative 相对定位否 (占有位置)相对于自身位置移动基本单独使用
absolute绝对定位是(不占有位置)带有定位的父级要和定位父级元素搭配使用
fixed 固定定位是(不占有位置)浏览器可视区单独使用,不需要父级
sticky 粘性定位否 (占有位置)浏览器可视区当前阶段少
  • 一定记住 相对定位、固定定位、绝对定位 两个大的特点: 1. 是否占有位置(脱标否) 2. 以谁为基准点移动位置。
  • 学习定位重点学会子绝父相。
  • 注意:
  1. 边偏移需要和定位模式联合使用,单独使用无效
  2. topbottom 不要同时使用;
  3. leftright 不要同时使用。

2. 定位(position)的应用

2.1 堆叠顺序(z-index)

  • 在使用定位布局时,可能会出现盒子重叠的情况。此时,可以使用 z-index 来控制盒子的前后次序 (z轴)

  • 语法:

    选择器 { z-index: 1; 
    }
    
  • z-index 的特性如下:

  1. 属性值正整数负整数0,默认值是 0,数值越大,盒子越靠上;
  2. 如果属性值相同,则按照书写顺序,后来居上
  3. 数字后面不能加单位

注意z-index 只能应用于相对定位绝对定位固定定位的元素,其他标准流浮动静态定位无效。

3. 定位(position)的拓展

注意:加了绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中

但是可以通过以下计算方法实现水平和垂直居中,可以按照下图的方法:

在这里插入图片描述

  1. left: 50%;:让盒子的左侧移动到父级元素的水平中心位置
  2. margin-left: -100px;:让盒子向左移动自身宽度的一半

3.1 定位特殊特性

1.行内元素添加绝对或者固定定位,可以直接设置高度和宽度。
2.块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小。

display 是 显示模式, 可以改变显示模式有以下方式:

  • 可以用inline-block 转换为行内块
  • 可以用浮动 float 默认转换为行内块(类似,并不完全一样,因为浮动是脱标的)
  • 绝对定位和固定定位也和浮动类似, 默认转换的特性 转换为行内块。

所以说, 一个行内的盒子,如果加了浮动固定定位绝对定位,不用转换,就可以给这个盒子直接设置宽度和高度等。

3.2 脱标的盒子不会触发外边距塌陷

浮动元素、**绝对定位(固定定位)**元素的都不会触发外边距合并的问题。 (我们以前是用padding border overflow解决的)

3.3 绝对定位(固定定位)会完全压住盒子

浮动元素不同,只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字(图片)

但是绝对定位(固定定位) 会压住下面标准流所有的内容。

浮动之所以不会压住文字,因为浮动产生的目的最初是为了做文字环绕效果的。 文字会围绕浮动元素

4. 网页布局总结

通过盒子模型,清楚知道大部分html标签是一个盒子。

通过CSS浮动、定位 可以让每个盒子排列成为网页。

一个完整的网页,是标准流、浮动、定位一起完成布局的,每个都有自己的专门用法。

4.1 标准流

可以让盒子上下排列或者左右排列,垂直的块级盒子显示就用标准流布局

4.2 浮动

可以让多个块级元素一行显示或者左右对齐盒子,多个块级盒子水平显示就用浮动布局

4.3 定位

定位最大的特点是有层叠的概念,就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。

5. 元素的显示与隐藏

  • 目的(本质)

    ​ 让一个元素在页面中消失或者显示出来

  • 场景

    ​ 类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现!

5.1. display 显示(重点)

  • display 设置或检索对象是否及如何显示。

    display: none 隐藏对象display:block 除了转换为块级元素之外,同时还有显示元素的意思。
    
  • 特点: display 隐藏元素后,不再占有原来的位置。

  • 后面应用及其广泛,搭配 JS 可以做很多的网页特效。实际开发场景:

    配合后面js做特效,比如下拉菜单,原先没有,鼠标经过,显示下拉菜单, 应用极为广泛

5.2 visibility 可见性(了解)

  • visibility 属性用于指定一个元素应可见还是隐藏。

    visibility:visible ;  元素可视visibility:hidden;    元素隐藏
    
  • 特点:visibility 隐藏元素后,继续占有原来的位置。(停职留薪)

  • 如果隐藏元素想要原来位置, 就用 visibility:hidden

  • 如果隐藏元素不想要原来位置, 就用 display:none (用处更多 重点)

5.3 overflow 溢出(重点)

  • overflow 属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度) 时,会发生什么。
属性值描述
visible不剪切内容也不添加滚动条
hidden不显示超过对象尺寸的内容,超出的部分隐藏掉
scroll不管超出内容否,总是显示滚动条
auto超出自动显示滚动条,不超出不显示滚动条
  • 一般情况下,我们都不想让溢出的内容显示出来,因为溢出的部分会影响布局。
  • 但是如果有定位的盒子, 请慎用overflow:hidden 因为它会隐藏多余的部分。

5.4 显示与隐藏总结

属性区别用途
display 显示 (重点)隐藏对象,不保留位置配合后面js做特效,比如下拉菜单,原先没有,鼠标经过,显示下拉菜单, 应用极为广泛
visibility 可见性 (了解)隐藏对象,保留位置使用较少
overflow 溢出(重点)只是隐藏超出大小的部分1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/423227.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【算法与数据结构】377、LeetCode组合总和 Ⅳ

文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引,可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析:本题明面上说是组合,实际上指的是排列。动态规划排列组合背包问题需要考虑遍历顺序。 d p …

快速了解工业交换机

工业交换机是专门为工业环境设计的数据通信设备。该设备的主要作用是满足工业控制系统对数据通信的要求,实现不同设备之间的数据传输和网络连接。工业交换机在适应恶劣环境、抗干扰和稳定性等方面表现更出色,相较于传统的商用交换机。 它的基本原理是利用…

打开json文件,读取里边的每一行数据,每一行数据是一个字典,使用matplotlib画图

这段代码的目的是读取 JSON 文件,提取关键信息,然后使用 Matplotlib 绘制四个子图,分别显示不同的指标随着 iter 变化的情况。这种图形化分析有助于直观地了解模型的性能。 画图结果如下: json文件格式如下:下面只粘贴…

centos7.9MINI系统安装后无法挂载磁盘

1、执行mount 无效,尝试"mount /dev/sdb /data" yum -y install ntfs-3g yum install ntfsprogs yum list ntfs* 执行挂载: mount ntfs-3g -t /dev/sdb /data/ 仍然无效2、考虑重新分区 查看要分区的盘符 fdisk -l yum install gdisk …

51单片机LED点阵屏

LED点阵屏 LED点阵屏是一种由许多小型LED灯组成的矩阵式显示屏。这些LED灯可以是单色、双色或全彩的,它们排列成行和列的网格,可以根据需要点亮来显示图像、文字或动画等内容。LED点阵屏广泛应用于户外广告牌、室内显示、交通信号灯、电子价格标签和其他…

three.js从入门到精通系列教程004 - three.js透视相机(PerspectiveCamera)滚动浏览全景大图

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>three.js从入门到精通系列教程004 - three.js透视相机&#xff08;PerspectiveCamera&#xff09;滚动浏览全景大图</title><script src"js/three.js"&g…

链路聚合原理与配置

链路聚合原理 随着网络规模不断扩大&#xff0c;用户对骨干链路的带宽和可靠性提出了越来越高的要求。在传统技术中&#xff0c;常用更换高速率的接口板或更换支持高速率接口板的设备的方式来增加带宽&#xff0c;但这种方案需要付出高额的费用&#xff0c;而且不够灵活。采用…

Xcode查看APP文件目录

一、连接真机到MAC电脑上 二、打开Devices 点击window -> Devices and Simulatores 三、选中设备、选择app 四、选择下载内容 五、查看文件内容 得到的文件 右键显示包内容&#xff0c;获得APP内数据 六、分发证书无法下载 使用分发的证书无法下载文件内容&#xf…

大模型的学习路线图推荐—多维度深度分析【云驻共创】

&#x1f432;本文背景 近年来&#xff0c;随着深度学习技术的迅猛发展&#xff0c;大模型已经成为学术界和工业界的热门话题。大模型具有数亿到数十亿的参数&#xff0c;这使得它们在处理复杂任务时表现得更为出色&#xff0c;但同时也对计算资源和数据量提出了更高的要求。 …

性能优化-HVX 指令介绍

「发表于知乎专栏《移动端算法优化》」 本文主要介绍了 HVX 指令相关的知识&#xff0c;包括 HVX 寄存器相关内容&#xff0c;指令的背景依赖&#xff0c;部分常用 intrinsic HVX 指令。具体指令的详细内容及使用还需阅读 HVX 的指令文档&#xff0c;以及细致的实践操作。 &…

ML:2-2-2 sigmoid 函数的替代方案

文章目录 1. sigmoid function的替代方案2. 如何选择activation function3. 为什么模型需要activation function 【吴恩达p62-64】 1. sigmoid function的替代方案 来看上周的例子&#xff0c;预测一个商品是否能成为消冠。这里的awareness可能是binary的。人们要么知道/不知道…

kafka参数配置参考和优化建议 —— 筑梦之路

对于Kafka的优化&#xff0c;可以从以下几个方面进行思考和优化&#xff1a; 硬件优化&#xff1a;使用高性能的硬件设备&#xff0c;包括高速磁盘、大内存和高性能网络设备&#xff0c;以提高Kafka集群的整体性能。 配置优化&#xff1a;调整Kafka的配置参数&#xff0c;包括…