CSS之 absoulte 属性
特性:
absoulte 与 float 具有相同的特性:包裹性,与破坏性
absoulte 与 float 可以交替使用
不受 relative 限制的 absoulte 定位,行为表现上可以不使用 left/right/top/button/auto 等属性
行为表现
脱离文档流
去浮动( float 与 absoulte 元素不能同时出现)
位置跟随(还在原来的位置)
问题: IE7使用 absoulte 的元素永远是 inline-block 元素
解决: 外层套一层无设置属性的标签
可以配合margin 精确定位
支持负值定位
兼容性强 IE6
自适应强,维护性好,具有健壮性
动画尽量作用与绝对定位元素上,多个 absoulte 元素会重叠,后者居上
z-index 无依赖
如只有一个 absoulte 元素,不需要设置
如两个 absoulte 元素,控制DOM流的顺序,也可不需要
多个定位交错, z-index: 1 控制
非弹框类的 absoulte 元素, z-index <= 2 若冗余,需优化
left/right/top/bottom与width/height可相互替代
left:0;right:0; 等于 width:100%; top:0;bottom:0; 等于 height:100%; 以上IE7+支持 具有相互合作性:left:0;right:0;width:50%;margin:auto;可居中
absoulte整体布局
<header></header> <article> <aside></aside> <main></main> </article> <footer></footer>
;; } ; } ; } ;;; } ; left: 200px; overflow: auto;}
CSS之 absoulte 属性的更多相关文章
- css中position属性(absolute|relative|static|fixed)概述及应用
position属性的相关定义: static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流 fixed:对象脱离正常文档流 我们先来 ...
- 【转】CSS中position属性( absolute | relative | static | fixed )详解
我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...
- CSS中position属性( absolute | relative | static | fixed )详解
我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...
- CSS之cursor属性
CSS之cursor属性 今天学习了CSS的cursor属性,第一篇博客就用来总结它吧. cursor属性用于控制光标的显示样式,可取的值有这些: cursor:url()*|{auto|defaul ...
- CSS样式常用属性整理
web工程师是最近5年刚刚兴起的一门高薪职业,人们的专注度越来越高. 那么前端除了学习html标签之外还需要掌握什么知识点呢? 为大家整理了一个和HTML标签密不可分的知识要点--<CSS样式常 ...
- CSS中box-sizing属性的理解与部分用法
今天看了一些关于box-sizing的一些资料,在这里整理一下,希望也能对大家有所帮助. box-sizing是CSS的一个属性,很好的解决了盒模型的相关问题.CSS中的盒模型(Box model)分 ...
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- CSS Counters 计数属性
CSS Counters其实就是一计数器,早期在CSS中计数器仅存在于ul和ol元素.如果要使用在div这样的元素上,只能通过list-style-image或者是元素的backgroud-image ...
- 利用CSS的@font-face属性 在网页中嵌入字体
字体使用是网页设计中不可或缺的一部分.网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计. 美工设计师最常做的办 ...
随机推荐
- 【Beta】阶段 第四次Daily Scrum Meeting
每日任务 1.本次会议为第四次 Meeting会议: 2.本次会议在周四下午16:40,课间休息时间在陆大楼召开,召开本次会议为10分钟. 一.今日站立式会议照片 二.每个人的工作 (有work it ...
- 201521123073 《Java程序设计》第7周学习总结
1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 参考资料: 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 源代码: ...
- 201521123060 《Java程序设计》第5周学习总结
1.本周学习总结 2.书面作业 Q1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪句会出现错误?试改正该错误.并分析输出结果. 答:不能 ...
- SSH框架搭建最终版【测试、log4j、baseDao】
最详细搭建SSH框架环境 本博文主要是讲解如何搭建一个比较规范的SSH开发环境,以及对它测试[在前面的搭建中,只是整合了SSH框架,能够使用SSH实现功能],而这次是相对规范的. 导入开发包 在Str ...
- 详解go语言的array和slice 【二】
上一篇已经讲解过,array和slice的一些基本用法,使用array和slice时需要注意的地方,特别是slice需要注意的地方比较多.上一篇的最后讲解到创建新的slice时使用第三个索引来限制sl ...
- 中文转unicode,中文转bytes,unicode转bytes java实现
utf-8 utf-8格式的中文由三位字节组成. UTF-8的编码规则很简单,只有二条: 1)对于单字节的符号,字节的第一位设为0,后面7位为这个符号的unicode码.因此对于英语字母,UTF-8编 ...
- JVM菜鸟进阶高手之路三
转载请注明原创出处,谢谢! 笨神大大分享: 小程序里面搜索:JVMPocket,这个小程序是笨神大大提供的,里面可以搜索相关JVM参数,用法. -XX:MaxTenuringThreshold,这个参 ...
- Web 项目更改项目名
简单的记录web开发中基本的操作. 更改项目名 直接修改 找到原项目中的.project 文件,更改中项目名称.然后在同目录下找到.mymetadata 文件 并更改name.context-root ...
- zookeeper环境搭建及使用
本文只讲解搭建步骤,先不讲原理相关知识 一.zookeeper下载地址 本文使用版本为zookeeper-3.4.10.tar.gz 地址:http://mirrors.shuosc.org/apac ...
- 第一次安装jshint,jshint新手使用记录
刚刚出来工作的渣渣,第一次进入这样比较正规的公司,各个开发流程都比较严格,代码也是要经过jshint的检测才能上传到svn才能成功打包项目.所以我这种技术都半桶水的职场开发小白,也是第一次用jshin ...