首页 > 前端开发 > 正文

web前端开发中绝对定位 web前端什么情况会发生margin塌陷?

2023-10-06 00:07:55 | 我爱编程网

web前端开发中绝对定位 web前端什么情况会发生margin塌陷?很多朋友对这方面很关心,我爱编程网整理了相关文章,供大家参考,一起来看一下吧!

web前端开发中绝对定位 web前端什么情况会发生margin塌陷?

IPTV机顶盒:web前端开发

近期接触了iptv机顶盒的页面开发,记录下问题和经验。

1. 布局用position:absolute 定位。方便了布局,更重要的是电视上遥控的焦点跳转,在使用传统布局时,如ul,li...,会出现跳转位置与预想不符的情况,所以直接用绝对定位开发。

2. 使用jQuery 进行开发,诸如vue等没有实际使用在IPTV项目,但根据机顶盒内嵌浏览器的兼容性来说,使用jQuery应该是 最不会出现不明bug或兼容问题的开发工具。

3. 使用es5。es6及以上的语句表达方式就不要出现了,因为浏览器识别不到。诸如:=>,let...;

4. 可直接用1280*720的标准图进行开发(px),我是用了rem自适应。

5. 所有需要被聚焦的html元素,都需要被a标签包裹,如:<a href="javascript:dosomething();"><span></span></a>。

6. 每个页面都需要设定一个初始的聚焦点。$('.').focus()。

7. iptv的web开发,在视频播放方面有较大局限性,只能通过给定的API进行定位,播放等操作,所以开发中出现一些奇奇怪怪的问题,有时候也只能曲线救国的去解决了。

8. 聚焦时样式 :focus{}

X. 在机顶盒配置自己服务器地址,设置跳转入口进行测试。

web前端开发中绝对定位 web前端什么情况会发生margin塌陷?

web前端什么情况会发生margin塌陷?

在 Web 前端开发中,margin 塌陷是指当元素的内外边距同时为 0 时,会发生 margin 塌陷。这种情况通常发生在以下情况下:

  • 父元素的高度为 0,且子元素的宽度自适应父元素高度。

  • 子元素与父元素的 margin-top 或 margin-bottom 为 0,且父元素的高度为 0。

  • 两个元素之间的 margin 为 0,且它们之间没有其它元素。

为了避免 margin 塌陷,可以使用绝对定位或伪元素来使元素自适应父元素高度,或者可以使用 CSS 的 overflow 属性来使元素的高度自适应内容。同时,在编写 CSS 样式时,应该尽量避免使用 margin 属性,而是使用 padding 属性来代替,这样可以减少 margin 塌陷的发生。

web前端开发中绝对定位 web前端什么情况会发生margin塌陷?

html怎么定位的?

以我七年web前端页面重构经验来回答:

一句话总结,本身如果是绝对定位,那么他的位置受限于包裹她最近的相对或者绝对定位

分两种情况:

1、不管父元素使用相对还是绝对定位,子元素直接受限于父元素

2、如果子元素想受限于祖先元素,那么父元素就不能加定位

我爱编程网

以上就是我爱编程网为大家带来的web前端开发中绝对定位 web前端什么情况会发生margin塌陷?,希望能帮助到大家!
与“web前端开发中绝对定位 web前端什么情况会发生margin塌陷?”相关推荐
web前端开发的margin web前端什么情况会发生margin塌陷?
web前端开发的margin web前端什么情况会发生margin塌陷?

请教前端排版技巧,margin和position的区别margin是外边距,就好比你家的房子与周围其他房子之间的距离,也就是说margin是受周围其他元素影响的。position则是定位,根据参数的不同会有不同的定位方式。position:relative是相对定位,是以元素的当前位置来作为定位的参照物,比如left:10px;top:-5px,就是把元素往左挪10像素,往上挪5像素

2023-09-11 19:21:58
web前端开发界面居中对齐 怎么让一个DIV绝对定位到页面的正中间
web前端开发界面居中对齐 怎么让一个DIV绝对定位到页面的正中间

怎么让一个DIV绝对定位到页面的正中间1、首先,新建一个html文件。2、在html文件上找&lt;body&gt;标签,在&lt;body&gt;标签中创建&lt;div&gt;标签并设置class类:&lt;div&gt;fixed浮动居中&lt;/div&gt;3、对div设置基本属性。html文件找到&lt;title&gt;标签,在这个标签后新建一个

2023-09-30 20:21:22
web前端开发怎么居中 怎么让一个DIV绝对定位到页面的正中间
web前端开发怎么居中 怎么让一个DIV绝对定位到页面的正中间

html如何让段落居中,然后段落里头的文字是左对齐的? &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;    &lt;meta charset="UTF-8"&gt;    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;  

2023-09-18 12:23:13
web前端开发绝对定位 web前端的就业方向有哪些
web前端开发绝对定位 web前端的就业方向有哪些

web前端开发需要掌握哪些知识1.HTML知识要点:web工作原理、HTML4及HTML5、常见标签、相对路径与绝对路径、HTML5标签2.CSS+布局知识要点:CSS基本语法、基本选择器、复合选择器、背景图片、盒子模型、精灵图、常见网页布局、浮动定位、Flex布局、响应式布局、移动端适配、网页动画、CSS3新特性、Less预处理器3.ECMA基础知识要点:ECMA基本语

2023-09-11 04:31:05
web前端开发绝对定位 web前端开发需要掌握哪些知识
web前端开发绝对定位 web前端开发需要掌握哪些知识

web前端的就业方向有哪些Web前端的就业方向是非常广泛的,只要你精通技术,那么根本不愁找不到工作。web前端的就业方向有web架构师、web前端工程师、网页设计师web前端工程师这个方向是目前从事Web前端开发的主要就业方向Web架构师薪资普遍比较高,技术要求高,掌握多种技能,包括:后端技术、DBA、Platform等等,甚至包括网站优化SEO技术。数据方向

2023-09-11 04:31:19
web前端开发相对定位 WEB前端是什么?
web前端开发相对定位 WEB前端是什么?

Web前端是干嘛的前端是在浏览浏览器的时候,它是网络前台的部分,运行在pc端。移动端等浏览器上展示给用户浏览的页面,利用完美的动态设计,能够给用户带来极高的用户体验。前端前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站上面的视觉设计,前端开发则是网站的前台代码实现。前端开发又最基本的三个核心,这也是必须掌握的三个重要的核心,分别是HTML、CSS、JavaScr

2023-08-30 05:28:18
web前端开发padding 前端网页开发中用*{margin:0; padding:0}有什么缺陷么?有没有比这个更好的办法
web前端开发padding 前端网页开发中用*{margin:0; padding:0}有什么缺陷么?有没有比这个更好的办法

前端工程师用什么软件?问题一:前端工程师要学哪些软件啊1、Dreamweaver/Flash/Fireworks/PS前三个软件肯定要会,现在很多公司都要求会PS,所以PS最好会一些!2、html+css(div+css)要会3、javascript要会剩下要用到的知识就靠自己去学习了问题二:中国的前端工程师都用什么开发软件开发工具SublimeText?Eclipse/A

2023-09-08 18:28:48
武汉的web前端开发岗位情况 武汉Web前端开发有前途吗
武汉的web前端开发岗位情况 武汉Web前端开发有前途吗

本文目录一览:1、前端开发的就业现状及前景2、武汉Web前端开发有前途吗3、web前端开发都有哪些职位前端开发的就业现状及前景前端开发的就业现状及前景如下:1、web前端技术岗位需求量大据各大招聘平台数据统计,企业对于web前端技术岗位的需求是非常大的,未来五年我国信息化人才总需求高达1500万-2000万人。其中“网络工程”“UI设计”“Web前端”等人才的缺口最为突出,所以

2023-10-18 04:21:34