热门搜索 :
宠物故事
您的当前位置:首页正文

前端项目里里定位几种方式

2023-11-28 来源:微宠网

我们知道,在前端项目中,我们是通过定位属性position来进行定位的,那么具体它有哪几个几个属性值呢?常见的定位的方式有哪些?今天就给大家归纳总结一下。

值描述

absolute 生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。元素的位置通过"left", "top", "right" 以及 "bottom" 属性进行规定。

fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative 生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

inherit 规定应该从父元素继承 position 属性的值。

首先,我们这里用的是标准盒子模型来讲,所以大家在理的时候必需把它看成一个盒子或者一个框。我们先来学习第一个默认参数static。

static:静态定位是position的默认值,元素框正常生成,也就是没有定位时的正常显示。

absolute:绝对定位

元素从文档流删除,并相对于包含块定位。元素在原本的空间关闭。元素定位后生成一个块级框,不论它原来是行内元素还是块级元素。

这里的包含块是指:最近的position值不是static的祖先元素(块级或行内),一般会指定一个元素作为绝对定位元素的包含块,将其position设置为relative而且没有偏移。

fixed:固定定位

元素脱离文本流,从普通文本中删除,并相对于浏览器视窗定位,因此不随文档滚动而移动。元素在原本的空间关闭。元素定位后生成一个块级框,不论它原来是行内元素还是块级元素。与绝对定位的区别仅仅是包含块不同。

包含块:浏览器视窗。

relative:相对定位

相对定位,最常见的使用方式有如下两种:

使用方法一:元素相对自身的原位置偏移某个距离,但是原本的空间依旧保留,表现为空白。

使用方法二:把一个元素设置为position: relative; 可以使该元素的子元素相对该元素绝对定位。

absolute/fixed和float对比

相同之处:元素都会脱离文本流,从普通文本中删除,但是依旧会影响布局;都会生成一个块级框,无论原来是不是块级元素。

不同之处:float的包含块是最近的块级祖先元素。

设置偏移属性:top/right/bottom/left,初始值是auto。

采用position定位之后必须采用偏移属性定义偏移量,也就是相对包含块的偏移。在使用的时候需要注意的是:定义偏移量的元素应为position值不是static的元素。

有时也需要定义width和heigth,但是可能会和偏移属性的定义冲突,因为四个偏移属性实际上已经定义了元素的大小。此时,根据width和left属性定义左右,根据top和height属性定义上下。

CSS中的别一个属性。那就内容溢出:overflow.

通常内容溢出属性有如下几个值:

overflow: visible/ hidden/ scroll /auto/ inherit

overflow初始值是visible。

overflow就是咱们常用在:如果一个元素的大小固定,但是其内容放不下,就会导致溢出。overflow控制溢出部分的可见(visible)、不可见(hidden)、滚动可见(scroll)。

元素可见性visibility: visible/ hidden/ collapse/ inherit,初始值是visible。

相信看了这些案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

相关阅读:

让div宽度自适应教学

怎样不使用CSS改变鼠标悬停样式

怎么优化HTML网页

小编还为您整理了以下内容,可能对您也有帮助:

web定位有哪几种?

1.相对定位:

  position:relative;脱离文档流,相对于自身进行定位

2.绝对定位

  position:absolute;脱离文档流,根据最近的父级,父级有定位,则根据父级,否则根据body

1.相对定位:

  position:relative;脱离文档流,相对于自身进行定位

2.绝对定位

  position:absolute;脱离文档流,根据最近的父级,父级有定位,则根据父级,否则根据body

3.绝对定位

css中定位的三种方式

第一种:固定定位

第二种:绝对定位

第三种:相对定位

css中定位的三种方式

第一种:固定定位

第二种:绝对定位

第三种:相对定位

html中设置锚点定位的几种常见方法

1、方法一:

给锚点文本标签添加id,使用<a href="#"></a>来定位,当单击a链接时,就会跳到id为a01的p标签处;

如:

<div><a href="#a01"></a></div>

<p>练习</p><p>练习</p><p>练习</p><p>练习</p><p>练习</p>

<p id="a01">练习</p>

这样的定位可以针对任何标签来定位。  

2、方法二:

给a标签的文本添加锚点,单击链接可跳到name为a01的a标签处;

如:

<div><a href="#a01"></a></div>

<p>xxx</p><p>xxx</p><p>xxx</p><p>xxx</p><p>xxx</p>

<a name="a01" href=“#”>练习</a>

使用name属性只能针对a标签来定位,而对div等其他标签就不能起到定位作用。 

3、方法三:

使用js,如:

<li class="" onclick="javascript:document.getElementById('here').scrollIntoView()"></li>

扩展资料:

类似的html元素用法:

1、超链接对象

超链接是超级链接的简称。如果按照使用对象的不同,网页中的链接又可以分为:文本超链接,图像超链接,E-mail链接,锚点链接,多媒体文件链接,空链接等。

超链接是一种对象,它以特殊编码的文本或图形的形式来实现链接,如果单击该链接,则相当于指示浏览器移至同一网页内的某个位置,或打开一个新的网页,或打开某一个新的WWW网站中的网页。

2、动态静态

超链接还可以分为动态超链接和静态超链接。动态超链接指的是可以通过改变HTML代码来实现动态变化的超链接,例如可以实现将鼠标移动到某个文字链接上。而静态超链接,顾名思义,就是没有动态效果的超链接。

参考资料来源:百度百科-描点

参考资料来源:百度百科-超链接

前端框架如何实现定位

前端bug主要分为3个类别:HTML,CSS,Javascript三类问题

给个最大的区别方式方法:

出现样式的问题基本都是CSS的bug

出现文本的问题基本都是html的bug

出现交互类的问题基本都是Javascript的bug

现在以淘宝的前端人员工作为例进行相关bug定位的剖析

判断前后台问题的区分方法:

FF, 打开错误控制台

区分前后台交互:查看网络请求

a) Html中如果有链接,有相应的情况下,基本可以定位到是属于前端的问题

b) 如果为空,或者有出现error错误信息,我们就可以定位到属于后台开发的问题

TMS对应的VM模板,出现的一些截断控制,转换功能都属于前端的问题

一、HTML

最常见的HTML的问题—就是标签的问题了,最常见的排查和解决办法就是查看页面源代码,然后通过检查标签的工具,现在暂时提供idea.exe进行检查,有其他更好的工具再进行推荐。

常见问题类别:

标签闭合—表象,页面中出现大范围的混乱,就是少了标签的情况,导致标签未闭合

标签浮出—例如鼠标移动到文本位置,浮出全名的这种浮出形式都属于标签浮出的问题

标签在不同的浏览器的一种解析方式的不同导致的前端bug例如如下结构

该部分可以看做为一个大的框即是标签<a> 内嵌标题的标签<p>,里面再有这些个内容<ing>,那么在不同的浏览器中,可能ie和FF的解析会产生不同,假设IE解析 为<a><p><ing></ing></a></p>的一种形式,但在FF 下可能解析为

<a><ing></ing></a>

<p></p>

的两行的形式从而导致前端在复古鞋/板鞋这块ing里面的格式产生混乱

结构可看为:

页面定点的问题:最明显的前端功能,在于点击某个链接将页面位置定位到对应的位置

a) 我们可以通过右键,查看元素的工具进行定位到毛点所定位到的位置,如果出现问题这种问题很直观,并且能通过这种方法直接定位到问题

页面的跳转,也属于html的问题,大家在出现点击未跳转或者跳转方式不正确的问题,直接可以定位到跳转属性的问题,找到对应的跳转对应的块提供给开发人员即可

二、CSS,产生样式问题。例如:排版,布局,颜色,背景等

css的bug主要分为:兼容型bug 、业务性bug 和 内容型bug

兼容型bug

a) 表现:仅在少数几个浏览器上出现

b) 原因:浏览器的解析不一致

c) 解决:根据实际情况进行前端代码的通用性

d) 类别:

脚本兼容型问题:在出现对应交互的问题就基本可以定位到脚本兼容型bug,例如DIV的显示和层结构。实际可以参考聚划算的几个商品鼠标移动到小图的时候,对应大图展示的功能。

页面样式兼容型问题:直接表象在样式上,都是基于框架的页面展示错误,很容易定位

业务性bug

a) 表现:在所有浏览器下都有该问题

b) 原因:对业务不熟悉

c) 解决:根据需求进行修改达到业务要求

该类型的定位,主要在和实现的要求不一致,最直接表现在页面的友好型,用户的可用性的bug,可以定位为该类型

内容型bug

a) 表现: 前端自测正确,但在填入内容后,出现的错误,内容消失等

b) 原因: 扩展性未考虑周全

c) 解决: 进行overflow test

输入内容的长度等功能可定位为内容型bug

三、Javascript

最直接的判断方法,刷新页面,出现滞后显示的一些模块基本都为脚本的输出块。该部分的一些问题可以参照兼容型bug中类别的脚本兼容型bug。

有产生交互类的问题,大多数都可以定位到是属于javascript产生的问题,该部分大多不会报错

有错误提示类的。页面左下方有出现javascript的错误提示;有弹出错误信息提示的bug;浏览器返回的一些错误弹出框都属于javascript的bug

微宠网还为您提供以下相关内容希望对您有帮助:

CSS里的定位主要有几种方法?

定位方案有四种:静态定位、相对定位、绝对定位和固定定位。你可以使用CSS 3中的「position」属性来决定要使用的定位方式。在这四种方案中,静态和相对定位不会影响整个文档的布局,而绝对和固定定位会与文档分开,因此页面不会...

前端框架如何实现定位

页面定点的问题:最明显的前端功能,在于点击某个链接将页面位置定位到对应的位置 a) 我们可以通过右键,查看元素的工具进行定位到毛点所定位到的位置,如果出现问题这种问题很直观,并且能通过这种方法直接定位到问题 页面的跳...

html中设置锚点定位的几种常见方法

1、方法一:给锚点文本标签添加id,使用来定位,当单击a链接时,就会跳到id为a01的p标签处;如: 练习练习练习练习练习 练习 这样的定位可以针对任何标签来定位。2、方法二:给a标签的文本添加锚点,单击链接可跳到name为...

web前端职业方向定位

在我看来,做WEB前端技术能够找到的职业方向有以下几种:(1)资深WEB前端工程师这个方向算是一个WEB前端最基本的选择了,在国外,很多老外都能够把自己的专业做到极致,能一辈子就在一个专业领域不断学习和积累。主要在于内因...

Web前端开发的职业方向定位有哪几种

技术研发方向:Web前端工程师、移动前端工程师、全栈工程师、技术总监、高级架构师 产品运营方向 交互设计师、产品工程师、产品经理、产品总监

jquery几种页面元素定位及操作的方法

这两种方式还可以联合起来混合使用。我们来试着在我们的test.html代码中选择并修改第一个ordered list.一开始,我们需要选择这个list本身,这个list有一个ID叫“orderedlist”,通常的javascript写法是document.getElementById("...

划线定位方式有四种

划线定位方式有四种,定位布局共有四种方式:(1)固定定位(fixed);(2)相对定位(relative);(3)绝对定位(absolute);(4)静态定位(static)。1、固定定位当元素的position属性设置为fixed时,这个元素就被固定了,...

常用的定位方式有哪几种

一般常见的定位方式包括三种:GPS定位、基站定位、还有就是混合定位。一、GPS定位 简单理解就是卫星在天上转,手机的GPS可以接收卫星发出的信号,通过种种方式去计算出当前所在经纬度及高度。一般来说,在平原,在空旷处,GPS...

项目市场定位包括哪些

问题二:市场定位的方式有哪些 【项目管理师考讯】市场定位作为一种竞争战略,显示了一种产品或一家企业同类似的产品或企业之间的竞争关系。主要有三种定位方式:1)避强定位。这是一种避开强有力的竞争对手的市场定位。其优点是能够迅速在...

项目定位的项目定位的方法

何为三层面呢?根据图上所示,以房地产业为例,三层面是指地块——市场——竞争态势。下面我仍用重庆的另一个项目举例说明:一、地块研究的目的就是研究地块适合做什么?结合地块研究的内容我们进行逐步分析:1、地块与城市...

Top