ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

定位的概念(HTML)

2021-07-31 11:59:16  阅读:161  来源: 互联网

标签:定位 盒子 元素 概念 HTML 偏移 position 选择器


文章目录


前言

HTML中为什么需要定位?

1、浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子

2、定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子

一、定位

1.定位的组成


定位=定位模式+边偏移

     定位模式:定位模式用于指定一个元素在文档中的定位方式。

    边偏移:边偏移则决定了该元素的最终位置。

代码如下(示例):

2.定位模式

1、static 静态定位 (默认)

书写规范:

选择器 { position:static;}

2、relative 相对定位

书写规范:

选择器 {position :relative;}

3、absolute 绝对定位

书写规范:

选择器 {position:absolute;}

4、fixed 固定定位

书写规范:

选择器 {position:fixed;}

5、粘性定位sticky (了解)

书写规范:

选择器 {position:sticky;}

在这里插入图片描述



3.边偏移


有四个值:

top         顶端 偏移量,定义元素相对于其父元素 上边线 的距离

bottom   底部 偏移量,定义元素相对于其父元素 下边线 的距离

left         左侧 偏移量,定义元素相对于其父元素 左边线 的距离

right       右侧 偏移量,定义元素相对于其父元素 右边线 的距离



4.定位的叠放顺序

书写规范:

选择器 { z-index : 1;}
  • 数值可以是正整数、负整数或0,默认是auto,数值越大,盒子越考上
  • 如果相同属性值相同,则按照书写顺序,后来居上
  • 数字后面不能加单位
  • 只有定位的盒子才有 z-index 属性

二、定位的扩展

1、绝对定位盒子的居中算法

加了绝对定位i的盒子不能通过 margin:0 auto;水平居中,但是可以通过以下计算方法实现水平和垂直居中。
(1)left:50%; :让盒子的左侧移动到父级元素的水平中心位置。
(2)margin-left : -100px; : 让盒子向左移动自身宽度的一半。

2、定位的特殊性

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

标签:定位,盒子,元素,概念,HTML,偏移,position,选择器
来源: https://blog.csdn.net/weixin_58131487/article/details/119255203

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有