分为三种：普通流、浮动、绝对定位

普通流：默认，html文档的排列顺序块级从上到下（垂直距离由margin-top、margin-bottom决定）；行内元素在一行中从左到右（由margin-left/right、padding-left/right调整水平距离） PS：相对定位属于其一部分

浮动：float元素存在占位，并未完全脱离文档流（普通流），脱离了父元素

绝对定位：彻底脱离普通流，所以它可以覆盖页面上的其他元素，可以通过设置Ｚ-Iindex属性来控制这些框的堆放次序。

float和absolute的区别：

1.absolute元素是可以通过top/bottom/left/right调整自己的位置，而float元素受其他元素的影响，通过其他元素确定自身的位置

2.float元素之间在占位上是相互影响的，而absolute元素即使处于同一层，在占位上是互不影响的（absolute同级会覆盖；float会平行排列）

css的基本定位机制的更多相关文章

  1. CSS中的定位机制

    CSS3 中有三种定位机制 : 普通文档流 (text)| 浮动(float) | 定位(position) 普通文档流 就是CSS中默认的文本文档 普通流中,元素位置由文档顺序和元素性质决定,块级元 ...

  2. CSS三种定位机制

    标准文档流 块级元素撑满整个页面div,ul,li,dl,dt,p 行级元素可以一行显示多个span,strong,img,input大部分 一般不设置盒子的高度,另其自动调整 margin属性的au ...

  3. 1.CSS中的定位机制

    标准文档流(Normal flow) 特点: 从上到下,从左到右,输出文档内容 由块级元素和行级元素组成 块级元素: 从左到右撑满页面,独占一行 触碰到页面边缘时,会自动换行 块级标签: div.ul ...

  4. CSS中定位机制的想法

    对于一个刚刚接触css的新手而言,CSS的定位机制可能是最让人头疼的一件事情了, 接下来我们了解一下CSS的定位机制. position:static | relative | absolute | ...

  5. CSS有三种基本的定位机制

    CSS有三种基本的定位机制:普通流,浮动和绝对定位. 普通流:在普通流中元素框的位置由元素在html中的位置决定, 1.元素position属性为static或继承来的static时就会按照普通流定位 ...

  6. CSS中的三种基本的定位机制

    CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 一.普通流 除非专门指定,否则所有框都在普通流中定位.普通流中元素框的位置由元素在(X)HTML中的位置决定.块级元素从上到下 ...

  7. CSS定位机制

    CSS中,存在3种定位机制:标准文档流(Normal flow) * 特点:从上到下,从左导游,输出文档内容 * 由块级元素和行级元素组成 浮动(Floats) * 能够实现横向多列布局 * 设置了浮 ...

  8. css的定位机制

    牛腩新闻发不系统中遇到了CSS(Cascading style sheets),第一次接触,比较陌生还!因为CSS很多关于元素定位的问题,并且很多情况下元素的位置以像素精度计.一个不小心就很头疼,为此 ...

  9. 【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)

    html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距 ...

随机推荐

  1. 阿里云人脸识别测试接口出错 返回Body：{ "errno": 1031, "err_msg": "Invalid Image URL.", "request_id": "cdbe2927-e1bb-4eb1-a603-8fcd4b0b7fc8" }

    错误信息如下 返回Body:{ "errno": 1031, "err_msg": "Invalid Image URL.", " ...

  2. 20165206 2017-2018-2 《Java程序设计》第五周学习总结

    20165206 2017-2018-2 <Java程序设计>第五周学习总结 教材学习内容总结 内部类:支持在一个类中定义另一个类的类. 外嵌类:包含内部类的类,称为内部类的外嵌类. 匿名 ...

  3. 解决AS gradle下载同步卡慢的问题

    国内因为GFW的原因,导致同步谷歌等服务器的插件源非常非常慢,几乎是龟爬,还好有阿里云的镜像源,据说速度很快,还不快试试: 1.build.gradle里的buildscript和allproject ...

  4. Hadoop Shell命令（基于linux操作系统上传下载文件到hdfs文件系统基本命令学习）

    Apache-->hadoop的官网文档命令学习:http://hadoop.apache.org/docs/r1.0.4/cn/hdfs_shell.html FS Shell 调用文件系统( ...

  5. CentOS6.9安装Kafka

    先设置jdk1.8 vi /etc/profile export JAVA_HOME=/usr/local/jdkexport JRE_HOME=/usr/local/jdk/jreexport CL ...

  6. 【bzoj4811】[Ynoi2017]由乃的OJ 树链剖分+线段树区间合并

    题解: 好像和noi那题并没有什么区别 只是加上了修改和变成树上 比较显然我们可以用树链剖分来维护

  7. [BZOJ1977][BeiJing2010组队]次小生成树

    题解: 首先要证明一个东西 没有重边的图上 次小生成树由任何一颗最小生成树替换一条边 但是我不会证啊啊啊啊啊啊啊 然后就很简单了 枚举每一条边看看能不能变 但有一个特殊情况就是,他和环上的最大值相等, ...

  8. [WC2014]紫荆花之恋

    题解: 首先考虑点分治 dis(i,u)+dis(i,v)<=value[u]+value[v] 移项就很容易发现用平衡树可以很简单的维护这个东西 但是有重复,需要在下一层的每个平衡树内减去这个 ...

  9. asp.net core 自定义401和异常显示内容（JWT认证、Cookie Base认证失败显示内容）

    asp.net core 2.0使用JWT认证园子里已经有挺多帖子了,但开发中发现认证未授权情况下返回的401状态码是没有任何信息的,业务中可能有需要返回一串错误的Json信息.在这里我分享一个自定义 ...

  10. Js计算时间差，天数，小时数，余数

    var begintime_ms = Date.parse(new Date(begintime.replace(/-/g, "/"))); //begintime 为开始时间 v ...