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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • pycharm中安装第三方库出现错误_pycharm常用第三方库

    pycharm中安装第三方库出现错误_pycharm常用第三方库我在命令行窗口用pipinstall库名的时候,ModuleNotFoundError:Nomodulenamed‘pip._internal.cli.main’这是在pycharm里报的错Traceback(mostrecentcalllast):File“f:\python\lib\runpy.py”,line193,in_run_module_as_main“main”,mod_spec)File“f:\python\lib\ru

    2022年8月26日
    3
  • viewstate解密

    viewstate解密看完之后,觉得能不用viewstate就不用,再者像这样viewstate[“a”]=”b”;这种简单的赋值是没有什么关系的,它生成的树是很小的,altas一定是用js修改了viewstate的,但方法肯定是加密再加密的,效率也应该很低. ViewState是.Net中提出的状态保存的一种新途径(实际上也是老瓶装新酒);我们知道,传统的Web程序保存状态的方式有这样几种: 1、Appli

    2022年7月21日
    22
  • 分子模拟软件amber_Gromacs联用GAFF力场处理水溶剂下小分子动力学

    分子模拟软件amber_Gromacs联用GAFF力场处理水溶剂下小分子动力学与GROMACS偏重生物大分子模拟的力场不同,AMBER支持很多方便处理有机小分子的力场(详见http://sobereva.com/115),如GAFF力场,简单而又有不错的精度,适合处理有机小分子;这里将介绍用Gaussian计算RESP电荷,交由Amber生成GAFF力场下的拓扑文件,最后用GROMACS模拟的过程。软件版本:AmberTools18,Gromacs2019-beta-1…

    2022年5月25日
    100
  • 微信公众号推广_微信公众号评论点赞

    微信公众号推广_微信公众号评论点赞原标题:微信公众号分享集赞吸粉方案,人人可复制分享集赞这种方式很早就有了,不仅在微信公众号运营圈子里面盛行,很多做微商、代购的都很喜欢用这种方式吸粉,其优点是操作简单,可行性佳,获粉成本低。小编在自己博客分享了一些吸粉的文章,但很多同学反馈大多数方法操作难度大,需要很大的工作量,其中80%的朋友还觉得不擅长去做这些事情,需要对这些领域有一定的认识,并且不知道这些事情做了之后有没有效果,其实有这种担…

    2022年9月6日
    5
  • mysql截取_mysql截取字符串的方法[通俗易懂]

    mysql截取_mysql截取字符串的方法[通俗易懂]1、从左开始截取字符串left(str,length)说明:left(被截取字段,截取长度)例:selectleft(content,200)asabstractfrommy_content_t2、从右开始截取字符串right(str,length)说明:right(被截取字段,截取长度)例:selectright(content,200)asabstractfrommy_…

    2022年6月11日
    32
  • 如何在pycharm中安装selenium「建议收藏」

    如何在pycharm中安装selenium「建议收藏」发现问题:出现未解析引用解决问题:打开设置中的项目,可以看到没有安装selenium库点击+号搜索selenium并安装包

    2022年8月28日
    4

发表回复

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

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