css-关于absolute和relative的一些笔记
根据张鑫旭老师的博客,一些笔记留作备忘
1、position:absolute
具有包裹性——包裹性换种说法就是让元素inline-block化,例如一个div标签默认宽度是100%显示的,但是一旦被absolute属性缠上,则100%默认宽度就会变成自适应内部元素的宽度。float也是典型的inline-block化元素,这种元素的inline-block化适用于任何水平的标签。
具有破坏性,会使父元素高宽塌陷。
有评论说absolute不会使宽度塌陷,实验后确实如此。
absolute不利于扩展维护,尽量少用。
2、absolute可用于实现左右分栏等高的效果
div元素absolute后不在文档流中,设置足够高的高度,边界可用于分栏的中线。
父元素要overflow hidden。
3、现代浏览器下block水平元素absolute化后不支持图片混排
4、relative影响最小化
将需要绝对定位的元素单独放在
relative
属性的标签下,于是,relative
相对定位就不会影响任何其他元素,仅仅是其内部的绝对定位元素。定位这个东西,如果要使用相对定位属性或是绝对定位属性,我个人比较推荐如下组合:
absolute+margin
(左上角元素定位,作用于当前元素)、float+relative
(右上角元素定位,作用于当前元素)和relative+absolute
(右下角元素定位,直接父标签+当前定位元素)。而目前web届大肆使用的外层div层设置relative属性,里面一些absolute元素定位的方法是不推荐的。
css-关于absolute和relative的一些笔记的更多相关文章
- css position: absolute、relative详解
CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置 ...
- css 布局absolute与relative的区别
absolute:当使用时,表示在文档流中没有实际存在位置(浮动),在不设置任何方位值时,只能按兵不动,当设置了方位值之后,会紧接着去寻找距离最近的能够将它包含住的父级元素,然后进行定位. relat ...
- CSS position: absolute、relative定位问题详解
CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位,而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的 ...
- css absolute与relative的区别
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Div CSS absolute与relative的区别小结
absolute:绝对定位,CSS 写法“ position: absolute; ”,它的定位分两种情况,如下: 1. 没有设定 Top.Right.Bottom.Left 的情况,默认依据父级的“ ...
- CSS+DIV定位分析(relative,absolute,static,fixed)
在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所 ...
- CSS+DIV布局中absolute和relative区别
原文:http://developer.51cto.com/art/201009/225201.htm 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定 ...
- CSS之定位,relative/absolute/fixed的用法
其实position的值有四个,static/relative/absolute/fixed,而static是默认值,不算具有有定位属性,这里就不讲了. 定位其实就是跟元素设置定位属性,然后设置其对位 ...
- CSS相对|绝对(relative/absolute)定位
1.破坏性和包裹性 position:absolute与float:left,两者有两大共性:包裹性,破坏性. 包裹性 包裹性换种说法就是让元素inline-block化,例如一个div标签默认宽度是 ...
随机推荐
- Meet Python: little notes
Source: http://www.liaoxuefeng.com/ ❤ Escape character: '\' - '\n': newline; - '\t': tab; - '\\': \; ...
- ssh 免密码设置失败原因总结
先复习一下设置ssh免密码操作的步骤: 进入主目录 cd 生成公钥 ssh-keygen -t rsa -P '' (注:最后是二个单引号,表示不设置密码) 然后分发公钥到目标机器 ssh-copy- ...
- 解决 docker on windows下网络不通
问题:公司有一台闭置的windows服务器,于是想利用起来,但是在启动容器后始终无法通信成功. 研究: 1. 发现安装包中包含virtualbox, 于是怀疑windows下的docker是在virt ...
- tkinter 类继承的三种方式
tkinter class继承有三种方式. 提醒注意这几种继承的运行方式 一.继承 object 1.铺tk.Frame给parent: 说明: self.rootframe = tk.Frame(p ...
- Java的性能优化
http://www.toutiao.com/i6368345864624144897/?tt_from=mobile_qq&utm_campaign=client_share&app ...
- js 数组去重
这是一道常见的面试题,最近在做[搜索历史记录]功能也用到,开始用了 indexOf 方法,该方法在 ECMA5才有支持,对于 IE8- 就不支持了. 我们可以自己写一个函数(Array对象的方法都是定 ...
- NLog日志管理工具
Nlog是一个很不错的.NET日志记录组件,它可以将日志输出到控件台,保存到文本,也可以很方便的记录到数据库中,或者发送Emial到指定账户. 可以在官网 这里下载Nlog:http://nlog-p ...
- 构建Spark的Eclipse开发环境
前言 无论Windows 或Linux 操作系统,构建Spark 开发环境的思路一致,基于Eclipse 或Idea,通过Java.Scala 或Python 语言进行开发.安装之前需要提前准备好JD ...
- matlab 绘制条形图
Matlab使用bar和barh函数来绘制二维条形图.分别是绘制二维垂直条形图和二维水平条形图. 转自:http://jingyan.baidu.com/article/64d05a02524e63d ...
- JavaScript学习笔记-简单的计时钟表
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...