CSS深入理解absolute

CSS深入理解absolute1.图片目标来覆盖,无依赖,真不赖;2.如何定位下拉框,最佳实践来分享;3.对其居中或边缘,定位实现有脸面;4.星号时有时没有,破坏队形不用愁;5.图文对其兼容差,绝对定位来开挂;6.文字溢

大家好,又见面了,我是你们的朋友全栈君。

1.图片目标来覆盖,无依赖,真不赖;

2.如何定位下拉框,最佳实践来分享;

3.对其居中或边缘,定位实现有脸面;

4.星号时有时没有,破坏队形不用愁;

5.图文对其兼容差,绝对定位来开挂;

6.文字溢出不够放,不值一提就小样!

 

z-index无依赖

1.如果只有一个绝对定位元素,自然不需要z-index,自动覆盖普通元素;

2.如果两个绝对定位,控制DOM流的前后顺序达到需要的覆盖效果,依然无z-index;

3.如果多个绝对定位交错,非常非常少见,z-index:1  控制;

4.如果非弹框类的绝对定位元素z-index>2,必定z-index冗余,请优化!

 

 

折翼天使absolute 真不是闹着玩的

 

 

斩断情欲大天使-定位

 

藕断丝连半天使

7.left/top/right/bottom与width/height异曲同工与特殊表现

相互替代性:绝对定位方向是对立的(如:left vs right,top vs bottom)的时候,结果不是瞬间位移,而是身体的爆裂拉伸

相互合作性:同时存在时 width/height 大于天使拉伸 

当尺寸限制,拉伸以及码marigin:auto同时出现的时候,就会有绝对定位元素的绝对居中效果!ie8+支持

8.absolute网页整体布局 (适合移动web的布局策略)

<span role="heading" aria-level="2">CSS深入理解absolute<span role="heading" aria-level="2">CSS深入理解absolute<span role="heading" aria-level="2">CSS深入理解absolute<span role="heading" aria-level="2">CSS深入理解absolute

absolute 和 float 相似兄弟

 

 

 

 

from慕课 张鑫旭老师

个人留坑 留作笔记

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/155246.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 前端面试选择题_vue最新面试题

    前端面试选择题_vue最新面试题面试题集合1、v-model是什么?vue中标签怎么绑定事件?答:v-model这个指令只能用在表单元素上,可以用他进行双向数据绑定。绑定事件:&lt;input@click=doLog()/&gt;2、mvvm框架是什么?说说对双向数据绑定的理解?它和其它框架(jquery)的区别是什么?哪些场景适合?答:mvvm的m模型就是用来定义驱动的数据、v经过数据改变后的html、vm就是连接数据…

    2022年9月3日
  • fsync

    fsync转载:https://www.jb51.net/article/101062.htm脏页:linux内核中的概念,因为硬盘的读写速度远赶不上内存的速度,系统就把读写比较频繁的数据事先放到内存中,以提高读写速度,这就叫高速缓存,linux是以页作为高速缓存的单位,当进程修改了高速缓存里的数据时,该页就被内核标记为脏页,内核将会在合适的时间把脏页的数据写到磁盘中去,以保持高速缓存中的数据和磁盘中的数…

    2022年5月31日
  • Latex中的空格

    两个quad空格a\qquadb两个m的宽度quad空格a\quadb一个m的宽度大空格a\b1/3m宽度中等空格a\;b2/7m宽度小空格a\,b1/6m宽度没有空格ab

    2022年4月3日
  • 成麻结账程序_成麻5元40满怎么算账

    成麻结账程序_成麻5元40满怎么算账1.0版预览地址:http://hudong.miaos.me/majiang/index.html2.0博客直通车:https://www.cnblogs.com/qinyulin/p/13566

    2022年8月2日
  • CCS6.2超详细使用方法

    CCS6.2超详细使用方法本文介绍了如何安装CCS6.2、一步一步的建立工程、以及建立工程以后编译、调试、如何方便快捷有效率的使用CCS6.2。

    2022年4月7日
  • 大数据开发步骤和流程「建议收藏」

    大数据项目开发步骤:第一步:需求:数据的输入和数据的产出;第二步:数据量、处理效率、可靠性、可维护性、简洁性;第三步:数据建模;第四步:架构设计:数据怎么进来,输出怎么展示,最最重要的是处理流出数据的架构;第五步:再次思考大数据系统和企业IT系统的交互;第六步:最终确定选择、规范等;第七步:基于数据建模写基础服务代码;第八步:正式编写第一个模块;第九步:实现其它…

    2022年4月8日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号