文档流

所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。脱离文档流即是元素打乱了这个排列，或是从排版中拿走。

当前所知的脱离文档流的方式有两种：浮动和定位。

css定位机制

普通流、浮动、绝对定位

css position属性

static：position默认值，保持文档流。

relative：相对本身的原始位置发生位移且保持文档流，占空间。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">

<head>

<title>相对定位</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="description" content="ouym" />

</head>

    <body>

        <div style="width: 100px; height: 100px; background-color:#00ff00;"> div1</div>

        <div style="width: 100px; height: 100px; background-color:#00ffff;position:relative;left:20px;top:-20px;"> div2</div>

        <div style="width: 100px; height: 100px; background-color:#ffff00;"> div3</div>

    </body>

</html>

效果如下：

absolute:脱离文档流，不占空间且相对于其包含块来定位(相对最近的非static块定位)。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">

<head>

<title>新建网页</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="description" content="ouym" />

</head>

    <body>

        <div style="width: 100px; height: 100px; background-color:#00ff00;"> div1</div>

        <div style="width: 100px; height: 100px; background-color:#00ffff;position:absolute;left:20px;top:20px;"> div2</div>

        <div style="width: 100px; height: 100px; background-color:#ffff00;"> div3</div>

    </body>

</html>

效果如下：

fixed：总是以body为定位时的对象，总是根据浏览器的窗口来进行元素的定位，一般页面上飘来飘去的，或者浮动在顶部或右下角的小模块都是用的fixed，脱离文档流。

浮动float

脱离文档流，不占空间。虽然普通块元素可以忽视浮动块，但是块元素中的文本不会，文本会围绕浮动块。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">

<head>

<title>浮动</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="description" content="ouym" />

</head>

    <body>

        <div style="width: 100px; height: 100px; background-color:#00ff00;"> div1</div>

        <div style="width: 100px; height: 100px; background-color:#00ffff;float:left;"> div2</div>

        <div style="width: 100px; height: 110px; background-color:#ffff00;"> div3</div>

    </body>

</html>

运行效果：

div2覆盖了div3的部分，但是把div3的文本挤下来了。clear可以清除浮动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">

<head>

<title>清除浮动</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="description" content="ouym" />

</head>

    <body>

        <div style="width: 100px; height: 100px; background-color:#00ff00;"> div1</div>

        <div style="width: 100px; height: 100px; background-color:#00ffff;float:left;"> div2</div>

        <div style="width: 100px; height: 110px; background-color:#ffff00;clear:both;"> div3</div>

    </body>

</html>

css定位的更多相关文章

  1. 常用的CSS定位，XPath定位和JPath定位

    CSS定位 举例 描述 div#menu id为menu的div元素 div.action-btn.ok-btn class为action-btn和ok-btn的div元素 table#emailLi ...

  2. div+css定位position详解

    div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...

  3. CSS 定位

    一.CSS 定位和浮动   它们代替了多年来的表格布局.   定位的思想很简单,相对于正常位置.相对于父元素.另一个元素甚至是浏览器窗口的位置.   浮动在 CSS1 中被首次提出.浮动不完全是定位, ...

  4. Selenium自动化中DOM，XPATH，CSS定位Web页面对象的优劣性分析

    加速IE浏览器自动化执行效率:Selenium自动化中DOM,XPATH,CSS定位Web页面对象的优劣性分析 1.技术背景       在Web应用中,用户通过键盘在输入框中输入值和鼠标点击按钮,链 ...

  5. CSS定位小技巧

    CSS定位Static 默认定位Relative 相对定位:left 和topposition: relative;/*相对定位*/ left:40px;/*在原来的位置向右移动*/ top:100p ...

  6. (七)CSS定位(Positioning)

    CSS定位属性允许对元素进行定位. 一切皆为框: div.h1或p元素常被称为块级元素,而span和strong等元素成为行内元素,但是可是使用 display 属性改变框的类型,将display设置 ...

  7. CSS定位（CSS定位概述、相对定位、绝对定位、浮动）

    CSS 定位属性 CSS 定位属性允许你对元素进行定位. 属性 描述 position 把元素放置到一个静态的.相对的.绝对的.或固定的位置中. top 定义了一个定位元素的上外边距边界与其包含块上边 ...

  8. CSS定位（postion）和移动(float)

    5.定位和移动:Positioning(定位)CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么. 元素可以使用的顶部,底部,左侧和右侧 ...

  9. CSS定位属性Position详解

    CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...

随机推荐

  1. AngularJS下对数组的比较

    Javascript不能直接用==或者===来判断两个数组是否相等,无论是相等还是全等都不行,以下两行JS代码都会返回false <script type="text/javascri ...

  2. iOS之判断字符串是否为空字符的方法

    -  (BOOL) isBlankString:(NSString *)string { if (string == nil || string == NULL) { return YES; } if ...

  3. 【搬砖】安卓入门（2）- Java开发编程基础--进制转换和运算符

    02.01_Java语言基础(常量的概述和使用)(掌握) A:什么是常量 在程序执行的过程中其值不可以发生改变 B:Java中常量的分类 字面值常量 自定义常量(面向对象部分讲) C:字面值常量的分类 ...

  4. webpack-dev-server轻量级js高速打包、热部署服务器

    webpack是一个打包web项目的工具 ,可以实现css,js,less,cass,html的混淆加密,minify,结合webpack-dev-server热部署,非常方便前端页面和Nodejs的 ...

  5. Android窗口机制分析与UI管理系统

    类图关系 在看Android的窗口机制之前,先看看其主要的类图关系以及层级之间的依赖与调用关系 1.window在当前的android系统的中的呈现形式是PhoneWindow (frameworks ...

  6. ASP.NET MVC 3 网站优化总结(六)压缩 HTML

    压缩 html 可以去除代码中无用的空格等,这样可提高网站的加载速度并节省带宽.今天就让我们看看在 ASP.NET MVC 3 怎么实现 html 压缩,我们可通过实现 ActionFilter 来完 ...

  7. JavaScript线程机制

    浏览器的内核是多线程的,它们在内核制控下相互配合以保持同步,一个浏览器至少实现三个常驻线程:JS引擎线程(用于处理JS).GUI渲染线程(用于页面渲染).浏览器事件触发线程(用于控制交互). 除此之外 ...

  8. RSS阅读器

    RSS阅读器(Really Simple Syndication)是一种软件/程序,实质都是为了方便地读取RSS和Atom文档.大概就是实现了订阅式阅读,推送用户感兴趣的新闻,博客等(比如等某位博主更 ...

  9. Webform（七）——内置对象（Session、Application）和Repeater的Command操作

    内置对象:用于页面之间的数据交互 为什么要使用这么内置对象?因为HTTP的无状态性. 一.内置对象 (一)Session 跟Cookies一样用来存储用户数据 1.Session.Cookies对比 ...

  10. MPI-2 并行IO的使用方法

    写的MPI程序需要用到并行IO来操作文件,但是搜遍了度娘都没有找到多少关于并行IO函数的使用方法.最后在知网搜到了一些有用的论文,看了一下,感觉豁然开朗. MPI-1对文件的操作是使用绑定语言的函数调 ...