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. [BZOJ 4850][Jsoi2016]灯塔

    传送门 #include <bits/stdc++.h> using namespace std; #define rep(i,a,b) for(int i=a;i<=b;++i) ...

  2. 【算法笔记】B1031 查验身份证

    1031 查验身份证 (15 分) 一个合法的身份证号码由17位地区.日期编号和顺序编号加1位校验码组成.校验码的计算规则如下: 首先对前17位数字加权求和,权重分配为:{7,9,10,5,8,4,2 ...

  3. POJ_1984 Navigation Nightmare 【并查集】

    一.题面 POJ1984 二.分析 这题还是比较有意思的一题. 首先需要清楚的是,这题与普通并查集的区别在于它的节点之间的权值是二维的,因为是曼哈顿距离,肯定不能直接存距离,这样将不利于后面的路径压缩 ...

  4. 洛谷 P2056 [ZJOI2007]捉迷藏 题解【点分治】【堆】【图论】

    动态点分治入 门 题? 题目描述 Jiajia和Wind是一对恩爱的夫妻,并且他们有很多孩子.某天,Jiajia.Wind和孩子们决定在家里玩捉迷藏游戏.他们的家很大且构造很奇特,由 \(N\) 个屋 ...

  5. CF E2 - Array and Segments (Hard version) （线段树）

    题意给定一个长度为n的序列,和m个区间.对一个区间的操作是:对整个区间的数-1可以选择任意个区间(可以为0个.每个区间最多被选择一次)进行操作后,要求最大化的序列极差(极差即最大值 - 最小值).ea ...

  6. POJ - 1061 扩展gcd

    题意:求\((n-m)t+Lk=x-y\)的解\(t\) #include<iostream> #include<algorithm> #include<cstdio&g ...

  7. Oracle Date Function 讲解和事例

    1 year=1*12 months 1 day=24 hours=24*(1*60mins)=24*60*(1*60 seconds) 1 week =7 days 注意: 黑色字体是 oracle ...

  8. Java 不可变对象

    不可变对象(immutable objects):一旦对象被创建,它们的状态就不能被改变(包括基本数据类型的值不能改变,引用类型的变量不能指向其他的对象,引用类型指向的对象的状态也不能改变),每次对他 ...

  9. 墨菲定律&吉德林法则&吉尔伯特定律&沃尔森法则&福克兰定律

    一.墨菲定律:越害怕什么,就越会发生什么 二.吉德林法则:把问题清楚地写下来,就已经解决一半了 三.吉尔伯特定律:工作中的最大问题就是没人跟你说该如何去做 四.沃尔森法则:把信息和情报排在第一位,金钱 ...

  10. 解决Resharper在Core项目中无法执行单元测试的问题

    项目升级core了,resharper最近升级到2018.1版本,但是安装后还是无法直接运行单元测试,昨天小姐姐发了解决方法,贼有用.所以记录一下,给自己以后或者其他遇到此问题的小伙伴用.  解决Re ...