一、普通流
  普通流中元素框的位置由元素在HTML中的位置决定。块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。

二、定位
  1、相对定位
  被看作普通流定位模型的一部分,定位元素的位置相对于它在普通流中的位置进行移动。使用相对定位的元素不管它是否进行移动,元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框。相对定位不影响其父类元素和兄弟元素。
  2、绝对定位
  相对于已定位的最近的祖先元素(position 不为static的元素),如果没有已定位的最近的祖先元素,那么它的位置就相对于最初的包含块。绝对定位的框可以从它的包含块向上、下、左、右移动。
  绝对定位的框脱离普通流,所以它可以覆盖页面上的其他元素,可以通过设置Z-Iindex属性来控制这些框的堆放次序。
  3、固定定位
  相对于浏览器窗口,其余的特点类似于绝对定位,也就是在移动窗口的时候,元素位置不变。

三、浮动
  浮动的框可以在左右移动,直到它的外边框边缘碰到包含框或另一个浮动框的边缘。浮动的框脱离普通流。
  如果包含块太窄,无法容纳水平排列的浮动元素,那么其他浮动块向下移动,直到有足够多的空间。如果浮动元素的高度不同,那么当它们向下移动时可能会被其他浮动元素卡住。
  行内元素会围绕着浮动框排列。

CSS+DIV 布局三种定位方式的更多相关文章

  1. CSS文件的三种引入方式

    CSS的引入方式共有三种:行内样式.内部样式表.外部样式表. 一.行内样式 使用style属性引入CSS样式. 示例:<h1 style="color:red;">st ...

  2. android 三种定位方式

    http://www.cnblogs.com/oudi/archive/2012/03/22/2411509.html 最近在看android关于定位的方式,查了很多资料,也做了相关实验,在手机上做了 ...

  3. html(常用标签,标签分类),页面模板, CSS(css的三种引入方式),三种引入方式优先级

    HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...

  4. Python 45 css三种引入方式以及优先级

    一:css三种引入方式 三种方式为:行间式 | 内联式 | 外联式 行间式   1.在标签头部的style属性内  2.属性值满足的是css语法  3.属性值用key:value形式赋值,value具 ...

  5. css三种引入方式以及其优先级的说法

    css 三种引入方式 方式一:行间式 ​ 1.在标签头部的style属性内 ​ 2.属性值满足css语法 ​ 3.属性值用key:value形式赋值,value具有单位 ​ 4.属性值之间用 分号 : ...

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

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

  7. js介绍,js三种引入方式,js选择器,js四种调试方式,js操作页面文档DOM(修改文本,修改css样式,修改属性)

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  8. python 中增加css样式的三种方式

    增加css样式的三种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  9. CSS【03】:CSS 基础选择器与三种引入方式

    基础选择器 选择器:css 选择 html 标签的一个工具,是将 css 与 html 建立起联系,那么 css 就可以控制 html 样式 选择器其实就是给 html 标签起名字 标签选择器 作用: ...

随机推荐

  1. emacs_1

    --> 正在处理依赖关系 perl(VMS::Filespec),它被软件包 perl-PathTools-3.2701-1.el5.rf.x86_64 需要---> 软件包 perl-p ...

  2. 第一个C++

    输入:cin>>(相当于scanf)   #include <iostream> using namespace std; int main() { int number;   ...

  3. 代码分享:php判断数组是否有序

    发布:脚本学堂/PHP编程  编辑:JB02   2013-12-17 14:59:02  [大 中 小] 转自:http://www.jbxue.com/article/14723.html如何判断 ...

  4. unionId突然不能获取的踩坑记录

    昨天(2016-2-2日),突然发现系统的一个微信接口使用不了了.后来经查发现,是在网页授权获取用户基本信息的时候,unionid获取失败导致的. 在网页授权获取用户基本信息的介绍中(http://m ...

  5. Linux编辑器vi使用方法详细介绍

    vi编辑器是所有Unix及Linux系统下标准的编辑器,它的强大不逊色于任何最新的文本编辑器,这里只是简单地介绍一下它的用法和一小部分指令.由于对Unix及Linux系统的任何版本,vi编辑器是完全相 ...

  6. 在linux下配置Nginx+Java+PHP的环境

    Apache对Java的支持很灵活,它们的结合度也很高,例如Apache+Tomcat和Apache+resin等都可以实现对Java应用 的支持.Apache一般采用一个内置模块来和Java应用服务 ...

  7. Python时间和日期学习

    #coding=utf-8 __author__ = 'Administrator' #日期和时间模块学习 """ Python程序能用很多方式处理日期和时间,转换日期格 ...

  8. Android Studio 导入第三方jar包

    1.先将AS切换到Project 2.在app-main-src下建一个libs目录,将jar包拷到里面 3.右击jar,add as Library

  9. Oracle中的USEREVN()

    Oracle中的USEREVN() 1.USEREVN() 返回当前用户环境的信息,opt可以是: ENTRYID,SESSIONID,TERMINAL,ISDBA,LABLE,LANGUAGE,CL ...

  10. [转]popwindow用法

    [转]弹出窗口的两种实现方式 PopupWindow 和 Activity  链接:http://www.cnblogs.com/winxiang/archive/2012/11/20/2778729 ...