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. Oj 24260: Lilypad Pond (神奇广搜题，状态搜索）

    题目 为了让奶牛们娱乐和锻炼,约翰建造了一个美丽的池塘.这个池塘是矩形的,可以分成M×N个方格.一些格子是坚固得令人惊讶的莲花,还有一些是岩石,其余的只是美丽,纯净,湛蓝的水.贝西正在练习芭蕾舞,她站 ...

  2. UVA - 10635 LIS LCS转换

    白书例题,元素互不相同通过哈希转换为LIS求LCS #include<iostream> #include<algorithm> #include<cstdio> ...

  3. 自动生成缓存Key值的CacheKeyHelper

    /// <summary> /// CacheKeyHelper /// </summary> public class CacheKeyHelper { /// <su ...

  4. springboot(六)-使用shiro

    前提 写之前纠结了一番,这一节放在shiro里面还是springboot里面.后来想了下,还是放springboot里吧,因为这里没有shiro的新东西,只有springboot添加了新东西的使用. ...

  5. vue之element-ui文件上传

    vue之element-ui文件上传 文件上传需求 ​ 对于文件上传,实际项目中我们的需求一般分两种: 对于单个的文件上传,比如拖动上传个图片之类的,或者是文件. 和表单一起实现上传(这种情况一般都是 ...

  6. 如何实现一个简单的MVVM框架

    接触过web开发的同学想必都接触过MVVM,业界著名的MVVM框架就有AngelaJS.今天闲来无事,决定自己实现一个简单的MVVM框架玩一玩.所谓简单,就是仅仅实现一个骨架,仅表其意,不摹其形. 分 ...

  7. Java中forEach, 用来遍历数组

    这里的for是Java中forEach, 用来遍历数组的.for(int i : d) 就是遍历int型数组d的 每一次访问数组d的时候读取的数据放入int型的i中.和for(int i=0;i< ...

  8. 阿里云Centos 7上面安装mysql教程

    1 软件的基本安装过程 1 卸载已有的mysql 1.查看系统是否安装了mysql软件 rpm -qa|grep -i mysql 2.将已经安装过的软件卸载掉.注意:这样的卸载是不彻底,不过这里够用 ...

  9. Composite Design Pattern in Java--转

    https://dzone.com/articles/composite-design-pattern-in-java-1 The composite pattern is meant to &quo ...

  10. bzoj 5298: [Cqoi2018]交错序列

    Description 我们称一个仅由0.1构成的序列为"交错序列",当且仅当序列中没有相邻的1(可以有相邻的0).例如,000,001 ,101,都是交错序列,而110则不是.对 ...