文档流

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

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

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. js对象和继承总结

    创建对象方式: [工厂模式]:无法解决对象识别问题 [构造函数模式]:每个方法都要在每个实例上创建一遍 [原型模式]:原型上属性为引用类型的问题,见例子 [组合模式]:解决上述问题 [动态原型模式]: ...

  2. Visual Studio 生成事件命令

    Visual Studio在生成项目工程前后,有时我们需要做一些特殊的操作,比如:拷贝生成的dll到指定目标下面等. 结合VS可以添加预先生成事件和后期生成事件,采用命令或bat批处理. 1.Visu ...

  3. C#语言基础

    第一部分 了解C# C#是微软公司在2000年7月发布的一种全新且简单.安全.面向对象的程序设计语言,是专门为.NET的应用而开发的.体现了当今最新的程序设计技术的功能和精华..NET框架为C#提供了 ...

  4. TCP三次握手/四次挥手详解

    一. TCP/IP协议族 TCP/IP是一个协议族,通常分不同层次进行开发,每个层次负责不同的通信功能.包含以下四个层次: 1. 链路层,也称作数据链路层或者网络接口层,通常包括操作系统中的设备驱动程 ...

  5. web工程常用路径的获取方法

    此文章是基于 搭建SpringMVC+Spring+Hibernate平台 一. 利用 Spring 取得web工程根路径 1. web.xml 中添加如下: <context-param> ...

  6. 安装centos后无法引导启动windows7的解决方法

    在电脑Windows7系统上安装Centos7,安装后找不到Windows7引导菜单. 原因:因为CentOS 7已采用新式的grub2系统,所以需要进入/boot/grub2目录后使用vi编辑gru ...

  7. [python]python try异常处理机制

    #python的try语句有两种风格 #一:种是处理异常(try/except/else) #二:种是无论是否发生异常都将执行最后的代码(try/finally) try/except/else风格 ...

  8. 前端之JavaScript基础

    前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...

  9. codevs 1576 最长上升子序列的线段树优化

    题目:codevs 1576 最长严格上升子序列 链接:http://codevs.cn/problem/1576/ 优化的地方是 1到i-1 中最大的 f[j]值,并且A[j]<A[i] .根 ...

  10. orcle函数

    一.字符函数1.chr给出整数,返回对应的字符:SQL>select chr(54740) zhao,chr(65) chr65 from dual;ZHAO CHR65---- -----赵 ...