文档流

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

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

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. Shiro安全框架入门篇（登录验证实例详解与源码）

    转载自http://blog.csdn.net/u013142781 一.Shiro框架简单介绍 Apache Shiro是Java的一个安全框架,旨在简化身份验证和授权.Shiro在JavaSE和J ...

  2. 沙盒解决方案解决SharePoint 2013 以其他身份登陆的问题

    众所周知,SharePoint 2013没有像SharePoint 2010那样有一个叫"以其他身份登录"的菜单项. 当然解决方案也很多,比如你可以直接修改Welcome.ascx ...

  3. ABAP游标的使用

    在Oracle,SQLServer中游标的使用是经常的,所以在ABAP不懂是不行的......     1.声明游标 OPEN CURSOR [WITH HOLD] <c> FOR SEL ...

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

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

  5. 在 Debian 上安装 SQL Server vNext CTP1

    微软在开源 .NET Framework 之后,相继推出了跨平台的编辑器 Visual Studio Code,跨平台的 SQL Server 数据库 SQL Server vNext,Visual ...

  6. Effective Java笔记一 创建和销毁对象

    Effective Java笔记一 创建和销毁对象 第1条 考虑用静态工厂方法代替构造器 第2条 遇到多个构造器参数时要考虑用构建器 第3条 用私有构造器或者枚举类型强化Singleton属性 第4条 ...

  7. jQuery 上传头像插件Jcrop的实例

    兼容:ie6+,FF,chrome等 示例图: CSS:     说明:图像比例为110:135     下载包里有 jquery.Jcrop.css          .jc-demo-box{po ...

  8. MySQL 导入数据

    MySQL中可以使用两种简单的方式来导入MySQL导出的数据. 使用 LOAD DATA 导入数据 MySQL 中提供了LOAD DATA INFILE语句来插入数据. 以下实例中将从当前目录中读取文 ...

  9. yii2 随笔

    view 1.添a标签 use yii\helpers\Html; //需要引用html组件 <?= Html::a('点击', ['sign/sign','id' => '01']) ? ...

  10. Akka初步介绍

    Akka可能很多人都没有用过,也不知道是什么,但如果说起Scala或Spark就有很多人都听说过或使用过 ,这里简单说下三者的关系Akka是使用Scala开发的,Spark中使用了Akka作为其消息的 ...