CSS定位的三种机制:普通流、绝对定位和浮动
1.普通流:
- position : static – 元素框正常生成。即上述不对元素进行任何样式设置的默认形态。
- position : relative (此时设置top, right, bottom, left生效) – 相对于它的原点定位,元素仍保持其未定位前的形状,它原本所占的空间仍保留。
例如:
定位前:
定位后:
可以看出,div1相对于之前的位置,距离top偏移了40px,距离left偏移了60px。
注:top:40px指的是距上偏移40px,而不是向上偏移40px。
2.绝对定位:
- position : absolute – 将该元素从文档流中删除,原来的占位不再存在,并相对于其最近的已定位祖先元素定位(如果不存在已定位的祖先元素,则相对于其根祖先元素定位,即或<</span>canvas>)。不论该元素为块级元素还是内联级元素,定位后该元素将以块级元素的形式显示。
例如:
定位前:
定位后:
- position : fixed – 与absolute 大致相同,只是相对于当前视窗定位(即滚动条滑动时当前元素位置不会随之改变)。
注1:绝对定位的元素不在文档流中,因此会覆盖其他元素。
注2:设置当前元素position : absolute时,应将其父元素position : relative。
3.浮动:
- l float : left 或float : right –- 将元素从原来的占位中删除,向左或向右漂浮,直到碰到包含块的边框,或另一浮动元素的边框为止。不论该元素为块级元素还是内联级元素,定位后该元素将以块级元素的形式显示。
注:只有在position为static或relative,或继承了父元素的static或relative时,浮动才生效。
浮动场景:
- 浮动框总体宽度超过容器:浮动框块下移,直到有足够的空间
- 各浮动框高度不同:下移的浮动框有可能被“卡住”
CSS定位的三种机制:普通流、绝对定位和浮动的更多相关文章
- CSS布局的三种机制
浮动元素之间没有缝隙,这和行内块还是不一样的,有点区别的! 2) 浮动元素与兄弟盒子之间的关系 注意:解决浮动的四种办法,后三种都是针对浮动元素的父元素的.
- CSS中的三种基本的定位机制(普通流、定位、浮动)
一.普通流 普通流中元素框的位置由元素在XHTML中的位置决定.块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到.行内元素在一行中水平布置. 普通流就是html文档中的元素如块 ...
- css中的三种基本定位机制
css中的三种基本定位机制 a.普通文档流 b.定位:相对定位 绝对定位 固定定位 c.浮动 1.普通流中,元素位置由文档顺序和元素性质决定,块级元素从上到下依次排列,框之间的垂直距离由框的垂直mar ...
- 【转】css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?
摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响? 一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...
- 前端js,css文件合并三种方式,bat命令
前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...
- python 中增加css样式的三种方式
增加css样式的三种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- CSS中的三种基本的定位机制
CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 一.普通流 除非专门指定,否则所有框都在普通流中定位.普通流中元素框的位置由元素在(X)HTML中的位置决定.块级元素从上到下 ...
- 你不知道的css高级应用三种方法——实现多行省略
前言 这是个老掉牙的需求啦,不过仍然有很多人在网上找解决方案,特别是搜索结果排名靠前的那些,都是些只会介绍兼容性不好的使用-webkit-line-clamp的方案. 如果你看到这篇文章,可能代表你正 ...
- 《转载》CSS中的三种样式来源:创作人员、读者和用户代理
CSS中的样式一共有三种来源:创作人员.读者和用户代理,来源的不同会影响到样式的层叠方式,很多第一次学习CSS的朋友,对这三种来源可能会存在一些困惑,下面我写一下自己的理解,若有错误的地方还请指正. ...
随机推荐
- Select查询执行顺序
链接:http://blog.jobbole.com/55086/ 很多程序员视 SQL 为洪水猛兽.SQL 是一种为数不多的声明性语言,它的运行方式完全不同于我们所熟知的命令行语言.面向对象的程序语 ...
- Sublime3学习笔记
学习笔记: 学习内容:sublime 3 学习时间:2015-10-20 预计学习时长:1 hour/3 day 学习工具&资料: 官网:http://www.sublimetext.com/ ...
- pointers on c (day 1,chapter2)
交叉编译器(cross complier)就是在一台机器上运行,但它所产生的可执行代码运行在不同类型的机器上. 翻译阶段由几个步骤组成,组成一个程序的每一(有可能有多个)源文件通过编译过程分别转换成目 ...
- js直接打印pdf文件内容
(1)需求:是网页上打开一个pdf文件,然后直接打开打印机,就是直接打印,不用用户再次点击打印按钮,这样用户体验好 (2)经历: 我在网上找了资料就是使用window.print(),但是这个只是打印 ...
- Linux CentOS下安装Oracle
1 .在安装oracle之前首先安装以下组件包,直接输入下列语句安装. yum install binutils* -y yum install compat-lib* -y yum install ...
- JS:事件对象1
一,this关键字和上下文 var box = document.getElementById("box");. 普通的函数如果没有给他传递参数,函数本身是没有参数的. test( ...
- trie字典树详解及应用
原文链接 http://www.cnblogs.com/freewater/archive/2012/09/11/2680480.html Trie树详解及其应用 一.知识简介 ...
- android surfaceView 黑屏
最近在做一个viewpager + fragment 切换的页面, 其中一个fragment 打开摄像头,需要surfaceView,但是当切换到这个fragment的前一个个时,这个fragment ...
- javascript平时小例子⑦(鼠标跟随的div)
<!doctype html><html> <head> <meta charset="utf-8"> <title>无 ...
- Unity_Shader(1)
Shader需要作用在Material中才能起作用. 例子1: (1)创建Shader 将shader替换为以下代码: Shader"MyDir/FirstShader" { Su ...