文档流

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

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

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. Bootstrap之选项卡

    <div class="container"> <!-- nav-tabs作为选项卡头部样式 --> <ul class="nav nav- ...

  2. jQuery选择器笔记

    1.$(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有段落 $(".test").hide() - 隐藏所有 class= ...

  3. 转载---javascript 定时器总结

    转载:http://www.jb51.net/article/40193.htm JS里设定延时: 使用SetInterval和设定延时函数setTimeout 很类似.setTimeout 运用在延 ...

  4. 日期关联取最近日期的SQL

    SQL怎么关联,如下图A表用日期加产品编号关联B表的时候,如果日期不存在,则取之前最近一个日期的值,比如A表2012-07-31 关联B表,B表没有对应日期的,就取2012-07-30的 A表     ...

  5. 苹果的MDM简介

    MDM(Mobile Device Management)移动设备管理,一般会用于企业管理其移动设备,鉴于iOS是比较封闭的系统很多的功能都难以实现,所以利用苹果的MDM可以达到远程控制设备,像远程定 ...

  6. Android 面试题--Activity

    1.什么是 Activity?Activity是Android组件中最基本也是最为常见用的四大组件(Activity,Service服务,Content Provider内容提供,BroadcastR ...

  7. 记录一次Quartz2D学习(五)

    (四)内主要讲了绘制状态的保存与恢复 本次主要讲述 缩放,旋转,平移等操作 5.附加操作 5.1 旋转 TIP: 旋转操作主要是对本次渲染的图层进行旋转,旋转的中心为左上角顶点 - (void)dra ...

  8. text-overflow

    text-overflow:clip | ellipsis 默认值:clip 适用于:所有元素 clip: 当对象内文本溢出时不显示省略标记(...),而是将溢出的部分裁切掉. ellipsis: 当 ...

  9. Hibernate 系列 08 - 对象识别机制

    目录导读: Hibernate 系列 学习笔记 目录 本篇目录: 为了区别不同的对象,有两种识别方法: 1. 内存地址识别(“==”号识别) 2. equals()和hashCode()识别 1. 以 ...

  10. Oracle数据库，数据的增、删、改、查

    oracle数据库中,数据的增.删.改.查,通过SQL语句实现 SQL:结构化查询语言: 特点:不区分大小写:字符串用单引号引起来:语句结束用分号表示结束: 行注释,在语句的最前面加"--& ...