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慕课 张鑫旭老师

个人留坑 留作笔记

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • oracle触发器示例,Oracle触发器简单示例

    oracle触发器示例,Oracle触发器简单示例首先创建两张测试表:CREATETABLEtest(t_idNUMBER(4),t_nameVARCHAR2(20),t_ageNUMBER(2),t_sexCHAR);CREATETABLEtest_log(caozuoVARCHAR2(20),tdatedate);然后创建触发器并且进行测试:CREATEORREPLACETRIGGERtest_t…

  • java nio_(一) Java NIO 概述[通俗易懂]

    java nio_(一) Java NIO 概述[通俗易懂]一、阻塞IO与非阻塞IO阻塞IO:通常在进行同步I/O操作时,如果读取数据,代码会阻塞直至有可供读取的数据。同样,写入调用将会阻塞直至数据能够写入。传统的Server/Client模式会基于TPR(ThreadperRequest),服务器会为每个客户端请求建立一个线程,由该线程单独负责处理一个客户请求。这种模式带来的一个问题就是线程数量的剧增,大量的线程会增大服务器的开销。大多数的实现为了…

  • php如何替换字符串中的指定字符

    php如何替换字符串中的指定字符常用的函数有:str_replace()和preg_replace()。str_replace()函数使用一个字符串替换字符串中的另一些字符。str_replace(find,replace,string,count)参数描述find必需。规定要查找的值。replace必需。规定替换find中的值的值。string必需。规定被搜索的字符串。count可选。一个变量,对替换数进行计数。str_replace(“raykaeso”,“leixuesong”,“raykaeso

  • ffmpeg的安装和使用教程_Anaconda安装ffmpeg

    ffmpeg的安装和使用教程_Anaconda安装ffmpeg一、ffmpeg的简介FFmpeg是一个自由软件,可以运行音频和视频多种格式的录影、转换、流功能,包含了libavcodec——这是一个用于多个项目中音频和视频的解码器库,以及libavformat——一个音频与视频格式转换库。主要参数-i——设置输入档名。-f——设置输出格式。-y——若输出文件已存在时则覆盖文件。-fs——超过指定的文件大小时则结束转换。-t——指定…

  • 什么是Deeplink?以及Deeplink的原理

    什么是Deeplink?以及Deeplink的原理先说一个日常场景帮大家理解。最近双十一、双十二,不知道大家有没有被亲友们发的某宝、某东、或拼夕夕的各类信息轮番轰炸?小编的亲友群、闺蜜群里常年有这类链接挂着,小红薯的笔记分享,某宝的化妆品、衣服链接分享等等,这一个个的分享链接织成一张张网,真可谓是增加亲友亲密度,快速获取优质好物的利器。这背后有个特别容易忽视却又极其重要的知识点。比如你在社交媒体上分享给翠花一个某App上的精选好店,翠花想要查看有几种操作方式:l如果翠花已经安装了该App,那她只要点开链接就可以跳转到App;l如果…

  • bindingnavigator如何与datagridview绑定

    bindingnavigator如何与datagridview绑定2019独角兽企业重金招聘Python工程师标准>>>…

发表回复

您的电子邮箱地址不会被公开。

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