文档流

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

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

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的变量提升和函数提升

    一.变量提升 在ES6之前,JavaScript没有块级作用域(一对花括号{}即为一个块级作用域),只有全局作用域和函数作用域.变量提升即将变量声明提升到它所在作用域的最开始的部分.上个简历的例子如: ...

  2. Shiro安全框架入门篇（登录验证实例详解与源码）

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

  3. css知识点整理

    CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 一.css引入的方式 1.行内样式:行内式是在标记的style ...

  4. CentOS7安装NodeJS6.9

    1.下载 wget https://nodejs.org/dist/v6.9.2/node-v6.9.2-linux-x64.tar.xz 2.解压 tar -xJf node-v6.9.2-linu ...

  5. 事件分发时候的onTouchEvent，onInterceptTouchEvent，dispatchTouchEvent调用顺序

    一直想弄清楚onTouchEvent,onInterceptTouchEvent,dispatchTouchEvent的执行顺序,以及内部使用switch (event.getAction())中的执 ...

  6. GitLab CI持续集成配置方案

    目录 1. 持续集成介绍 1.1 概念 1.2 持续集成的好处 2. GitLab持续集成(CI) 2.1 简介 2.2 GitLab简单原理图 2.3 GitLab持续集成所需环境 2.4 需要了解 ...

  7. 【译】Spring 4 @PropertySource和@Value注解示例

    前言 译文链接:http://websystique.com/spring/spring-propertysource-value-annotations-example/ 本篇文章将展示如何通过@P ...

  8. [Erlang 0126] 我们读过的Erlang论文

    我在Erlang Resources 豆瓣小站上发起了一个征集活动 [链接] ,"[征集] 我们读过的Erlang论文",希望大家来参加.发起这样一个活动的目的是因为Erlang相 ...

  9. 你该知道的-SQL里的这些新语法-函数

    前言 最近帮客户做数据库优化的时候发现客户系统使用了很多函数,自己竟然不知道是干啥的,好歹做过好几年开发的我必然不能忍!于是翻了翻资料自己学习了一下随便也分享给群友. 巧用函数的霸气作用———我做开发 ...

  10. mysql初级命令

    修改本地mysql root密码 #mysqladmin -uroot -p原密码 password  现密码 #mysqladmin -uroot -p passwd  password nowwd ...