iMooc-张鑫旭 absolute

absolute

absolute 和 float 关系

相同的特性表现：

包裹性：上了属性之后，宽度不在铺满整行，像是变成了 inline-block
破坏性：父级高度塌陷

不同的地方：

float 会脱离文档流，但是宽度会保持，文档流的对象会跟随
absolute 在没有top等定位属性的情况下，会悬在文档流之上，初始位置还在原来文档流的位置，只不过没了高度和宽度

absolute 和 relative

误区：设置 absolute 不用每次给父级加 relative

无依赖，不受 relative 限制，可以不用 left/right/top/bottom 等
三个图片并排，如果中间的一个设置成 absolute，那么，中间一个的位置不会变化，同时第三张图片会跑到第二张图片下面
absolute 脱离文档流无视父级的 overflow: hidden，relative 还在文档流中

配合 margin

小 tips : html中标签非要挨着的话可以用连接两个标签
利用 margin 把 absolute 用成相对定位

父级加上了 relative

爆裂拉伸：left/right/top/bottom 全部为0 可以覆盖父级
通常情况，如果父级没有高度，那么子级是不能用百分比的。
```
但是！！ absolute + left 可以
```

iMooc-张鑫旭 absolute相关推荐

CSS页面重构“鑫三无准则”之“无图片”准则——张鑫旭
一.再说关于"鑫三无准则" "鑫三无准则"这个概念貌似最早是在去年的去年一篇名叫"关于Google圆角高光高宽自适应按钮及其拓展"的文章中提 ...
IE6下png背景不透明——张鑫旭博客读书笔记
从今天开始跟着大牛张鑫旭的步伐,每天进步一点点问题:IE6不支持png背景透明或半透明一.可解决的方法补充:css滤镜主要是用来实现图像的各种特殊效果.(了解) css滤镜的标识符是" ...
:after伪类 content内容生成经典应用举例——张鑫旭
一.简单说说content内容生成 content内容生成就是通过content属性生成内容,content属性早在CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容. ...
张鑫旭html入门,学习张鑫旭前辈课程的有关笔记（二）
上一篇手记是第一部分,共5个属性,接下来的这篇,是另外5个属性. 同样,仅作为大家观看张鑫旭前辈视频的参考文档.作为查阅文档也是可以的. <深入理解vertical-align> vert ...
张鑫旭html入门,张鑫旭前端模板.html
基于HTML模板以及JSON数据的JavaScript交互 » 张鑫旭-鑫空间-鑫生活 body{overflow-x:hidden;} ul{padding:0; margin:0; list-st ...
css transparent张鑫旭,js/css 张鑫旭.md at master · baipu/js · GitHub
title tags grammar_cjkRuby css 张鑫旭新建,模板,小书匠 true [toc] 1.Relative 和absolute的搭配: 限制相对定位限制层级关系,abso ...
css 浮动 -张鑫旭博客笔记
原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 本文地址:http://www.zhangxinxu.com/wordpress/?p=594 1 ...
如何写好技术文章（看张鑫旭老师的直播总结
大家好,我是若川.持续组织了6个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列& ...
可缺省的CSS布局——张鑫旭
一.技术不难.意识很难有些东西的东西的实现,难的不是原料.技术:而是想不到,或者说意识不到. 例如下面这个简单而又神奇的魔术: 是吧.搞通了,才发现,哦~原来这么回事,很简单的嘛,我也可以实现的!其 ...
关于拜读张鑫旭文章，了解的新属性
昨天有幸拜读到张鑫旭写的就关于知乎10个问题的一篇文章(http://www.zhangxinxu.com/wordpress/2017/06/ten-question-about-frontend- ...

iMooc-张鑫旭 absolute

absolute

absolute 和 float 关系

absolute 和 relative

配合 margin

父级加上了 relative

iMooc-张鑫旭 absolute相关推荐

最新文章

热门文章