为了账号安全,请及时绑定邮箱和手机立即绑定
  • 可以这样理解 absolute把元素从 文档流里拉了出来,这样div就没东西包了, 所有 这个时候 其实div是“空”的 也就是没有东西包了自然就变成了这个样子了~
  • absolute 有个隐藏属性 就是 将元素转换为 内联块元素 这里给图片的包裹容器div加上absolute的话 容器就变成了内联块元素 没有宽度的时候内容撑开宽度 而不是原来的默认独占一行
  • 使用注释节点避免相邻节点间插入空格,受教
    07:29
    看视频
  • 可以这样理解,absolute 把元素从 文档流 里拉了出来,这样div 就没有东西包了,所以这个时候 其实div 是 “空” 的,也就是没有东西包了,自然就变成这个样子了~~
  • 一、释义   无依赖绝对定位:不受relative限制的absolute定位,行为表现上是不使用top/right/bottom/left任何一个属性或使用auto做为值。 二、无依赖绝对定位的特性:   1. 去浮动(可作为一种清除浮动的方法)   2. 位置跟随(脱离文档流后仍处于原位置)   3. 超越overflow(不受overflow的影响) 三、注意:   IE7下存在Bug,需为绝对定位的inline-block元素套上一个块元素标签(eg:div)
  • 1. absolute的破坏性是对图片的absolute化。图片设置absolute后,图片就从标准文档流中脱离出来,没有东西可以继续支撑容器的高度,容器自然就坍塌了。好像把房子的柱子挪到房子外边,房子果断就塌了 2. absolute的包裹性是对容器的absolute化。容器设置absolute后,容器变为了 inline-block,容器本身没有设置宽度和高度的话,那么容器的宽高就等于内容的宽高,表现结果就是容器把内容包裹起来。
  • 对于positiono为absolute或fixed的元素,同时设置left和right和width,即可margin:auto水平居中;同理可以设置top,bottom,height垂直居中。
  • 绝对定位是什么? absolute与float关系 具有相同的特性 1.包裹性 2.破坏性 absolute与relative关系 对立、分离 无依赖absolute是什么? 不影响其他布局的绝对定位下的相对定位之王 父级无relative,自身无top、right、bottom、left 1.脱离文档流 2.去浮动 3.位置跟随 absolute 的元素是inline/ inline-block 位置不变,依然inline显示 注:chrome浏览器的特殊性:chrome浏览器对于absolute的元素,页面渲染完成后,再次修改display 属性,浏览器是不会再进行渲染的,所以这种情况下,先默认给图片设置display:block; 注:IE7浏览器中,任何元素绝对定位后都会变成inline-block水平,可以在元素外套一层空div解决 4.可以不受overflow限制 现在父级设置overflow:hidden时,按钮超出部分也不会被隐藏 无依赖绝对定位实践 配合margin的精确定位 1.支持负值定位 2.兼容IE6 图片图标定位实践 无依赖绝对定位,本身设置margin来定位 注:位置跟随,可以用注释消除行内元素换行所带来的空格 下拉框定位实践 居中、边缘定位实践 居中:利用跟随性,前面元素里有一个 并且text-align:center。 边缘:使用fixed(特殊的绝对定位),具有跟随性。 星号出现位置和溢出实践 脱离文档流 动画尽量作用在绝对定位元素上 具有层级关系 1.只有一个绝对定位元素,不用z-index,自动覆盖普通元素 2.有两个绝对定位元素,不用z-index,控制DOM流顺序(后来居上)决定 3.有多个,需要z-index:1控制 4.非弹框类的绝对定位元素的z-index>2,z-index会冗余
  • absolute 和 float 具有相同的 特性 : 包裹性wrap(包含内容,不占据整行)破坏性broken(出现塌陷现象), 页面布局可以相互替代: float:left; position:absolute;
  • text-align控制的是nbsp的位置,然后 absolute利用了跟随性,让图片显示在nbsp的后面,在微调margin-left的值让图片正确显示在中间(margin-left等于负自身宽度的一半);display-inline也是很有用的,不然div还得另起一行
    06:46
    看视频
  • absolute的破坏性是对图片的absolute化。图片设置absolute后,图片就从标准文档流中脱离出来,没有东西可以继续支撑容器的高度,容器自然就坍塌了。好像把房子的柱子挪到房子外边,房子果断就塌了 absolute的包裹性是对容器的absolute化。容器设置absolute后,容器变为了 inline-block,容器本身没有设置宽度和高度的话,那么容器的宽高就等于内容的宽高,表现结果就是容器把内容包裹起来。
  • 没有宽度和高度声明实现的全屏自适应效果 .overlay { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: #000; opacity: .5; filter: alpha(opacity=50); }
  • 实现右下角浮窗: 1.父元素div设置text-align:right 2.浮窗div设置 display:inline(为了不换行在一行显示) position:fixed和bottom:200px(为了和body底部保持固定距离) margin-left:20px(为了美观好看)
  • CSS3实例教程:详解calc()函数功能 http://www.missyuan.net/school/web_2012/web_8338.html
  • 不错的方案,居然纯CSS实现了
    05:43
    看视频
首页上一页1234567下一页尾页

举报

0/150
提交
取消
课程须知
虽说是深入,实际更适合鲜肉小伙伴
老师告诉你能学到什么?
absolute基本特性的感性认知。absolute可能的理解误区纠正。absolute诸多高级技巧的应用实例。absolute在移动web布局中的大放异彩。
意见反馈 帮助中心 APP下载
官方微信