1、  CSS的定位机制有3种：普通流、浮动和定位。

2、  文档流：从上到下，从左到右，一个挨一个的简单或者叫正常布局。

3、  定位：（position）

Static：保持文档流。

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

Absolute：脱离文档流，不占空间且相对于其包含块来定位。

4、  浮动：（flaot）脱离文档流，不占空间。

5、  以前总是觉得position：static这个属性很多余，现在看来他的作用就是让元素保持文档流的！

以上都是我—“1号仔”，在学习的过程中发现的问题，欢迎有更多想法的童鞋们发表意见互相交流，以达到共同进步的效果。

来自：http://blog.sina.com.cn/s/blog_68150d100101229a.html

CSS和文档流的更多相关文章

  1. css绝对定位、相对定位和文档流的那些事

    前言 接触html.和css时间也不短了,但每次用div+css布局的时候心里还是有点儿虚,有时候干脆就直接用table算了,很多时候用div会出现些不可预料的问题,虽然花费一定时间能够解决,但总不是 ...

  2. CSS文档流与块级元素和内联元素

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

  3. CSS文档流与块级元素和内联元素（文档）

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不 少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指 南> ...

  4. CSS权威指南学习笔记系列(1)CSS和文档

    题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对, ...

  5. CSS文档流、块级元素、内联元素

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

  6. CSS文档流

    文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...

  7. css -html-文档流

    首先先考虑一下什么是普通流?普通流就是正常的文档流,在HTML里面的写法就是从上到下,从左到右的排版布局. 例: <div id="01"></div>&l ...

  8. css 文档流中块级非替换元素水平区域的计算规则(1)

    最近在读<Basic Visual Formatting in CSS>,结合以前看的<css权威指南>和css标准.今天就做个笔记. 以前在遇到一些宽度不明确指明的一些布局的 ...

  9. 前端学习笔记之CSS文档流

    先引用一段W3C的文档: 9.3 Positioning schemes In CSS 2.1, a box may be laid out according to three positionin ...

随机推荐

  1. IOS mac入门

    https://sarin.iteye.com/blog/1754920 注册Apple开发者平台账号 ## https://www.cnblogs.com/liuluoxing/p/6549725. ...

  2. Android Studio 常用应用

    1.在控制台的Logcat中输出测试语句 package com.example.lucky.helloworld; import android.support.v7.app.AppCompatAc ...

  3. Trailing Loves (or L'oeufs?)

    The number "zero" is called "love" (or "l'oeuf" to be precise, literal ...

  4. vim大法

    $Linux vi/vim编辑器常用命令与用法总结 (一)vi/vim是什么?Linux世界几乎所有的配置文件都是以纯文本形式存在的,而在所有的Linux发行版系统上都有vi编辑器,因此利用简单的文字 ...

  5. ThinkPHP5.0的助手函数汇总

    load_trait:快速导入Traits,PHP5.5以上无需调用 /** * 快速导入Traits PHP5.5以上无需调用 * @param string $class trait库 * @pa ...

  6. 青蛙的约会----POJ1061

    青蛙的约会 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 133905   Accepted: 29707 Descript ...

  7. 使用kafka bin目录中的zookeeper-shell.sh来查看kafka在zookeeper中的配置

    cd kafka_2.11-0.10.2.1\bin\windowsecho ls /brokers/ids |  zookeeper-shell.bat localhost:2181 使用kafka ...

  8. PIE SDK与Matlab结合说明文档

    1.功能简介 Matlab是三大数学软件之一,它在数学类科技应用软件中在数值计算方面首屈一指.Matlab可以进行矩阵运算.绘制函数和数据.实现算法.创建用户界面.连接其他编程语言的程序等,主要应用于 ...

  9. zabbix_agent 主动模式配置

    一,主动与被动模式 默认的模式就是被动模式由服务端发送执行指令,客户端再执行 主动模式则为客户机自己找服务器拿任务执行 二,主动模式配置 查看客户端配置文件 grep '^[a-Z]' /etc/za ...

  10. OpenGL Loading

    什么是 OpenGL loading? OpenGL是一份API规范,并不是一个库.记住这点非常重要!它意味着每一个API背后的具体实现都依赖于你的GPU硬件.操作系统以及显卡驱动. OpenGL规范 ...