文档流
文档流处在网页的最底层，它表示的是一个页面中的位置，
我们所创建的元素默认都处在文档流中

元素在文档流中的特点
块元素

  1. 块元素在文档流中会独占一行，块元素会自上向下排列。
  2. 块元素在文档流中默认宽度是父元素的100%。
  3. 块元素在文档流中的高度默认被内容撑开。

内联元素
　　1.内联元素在文档流中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右。
　　2.在文档流中，内联元素的宽度和高度默认都被内容撑开。

当元素的宽度的值为auto时，此时指定内边距不会影响可见框的大小，而是会自动修改宽度，以适应内边距。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            span {

                background-color: yellowgreen;

            }

            .outdiv {

                background-color: #bfa;

            }

            .innerdiv {

                height: 50px;

            }

            .div3 {

                width: 100px;

                height: 100px;

                background-color: #ff0;

            }

        </style>

    </head>

    <body>

        <div class="outdiv">

            <div class="innerdiv"></div>

        </div>

        <div class="div3">

        </div>

        <span>操行有常贤，仕宦无常遇</span>

        <span>操行有常贤，仕宦无常遇</span>

        <span>操行有常贤，仕宦无常遇</span>

        <span>操行有常贤，仕宦无常遇</span>

        <span>操行有常贤，仕宦无常遇</span>

        <span>操行有常贤，仕宦无常遇</span>

    </body>

</html>

效果：

前端学习 -- Css -- 文档流的更多相关文章

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

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

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

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

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

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

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

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

  5. CSS文档流

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

  6. 前端-CSS-7-标准文档流&行内元素和块级元素转换

    1.什么是标准文档流 <!--  什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别 web 网页的制作 是个“流” 从上而下 ,像 “织毛衣” 而设计软件 ,想往哪里画东 ...

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

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

  8. 从文档流来看内联元素和块元素的css排版

    veda原创[抄录]讲得很好存自己这里看 从文档流来看内联元素和块元素的css排版 CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的 ...

  9. Html文档流和文档对象模型DOM理解

    前言 在理解浮动和定位时,触碰到文档流概念.为了更好理解浮动和定位,学习了文档流和DOM(文档对象模型). 正文 DOM(文档对象模型)简单理解就是编写的html页面所有内容构成的树形结构.例如: 根 ...

随机推荐

  1. go语言之行--文件操作、命令行参数、序列化与反序列化详解

    一.简介 文件操作对于我们来说也是非常常用的,在python中使用open函数来对文件进行操作,而在go语言中我们使用os.File对文件进行操作. 二.终端读写 操作终端句柄常量 os.Stdin: ...

  2. go语言之行--结构体(struct)详解、链表

    一.struct简介 go语言中没有像类的概念,但是可以通过结构体struct实现oop(面向对象编程).struct的成员(也叫属性或字段)可以是任何类型,如普通类型.复合类型.函数.map.int ...

  3. [BZOJ3123][Sdoi2013]森林 主席树+启发式合并

    3123: [Sdoi2013]森林 Time Limit: 20 Sec  Memory Limit: 512 MB Description Input 第一行包含一个正整数testcase,表示当 ...

  4. html点击链接打开新窗口

    html标记中格式为<a href="url"> text </a> 此时,内容在原来窗口呈现,如果想新开窗口,可以采用下列方式. 1. <a hre ...

  5. Grid布局20行代码快速生成瀑布流

    网格布局 Grid 布局,好用又简单,至少比 Flex 要人性化一点,美中不足就是浏览器支持度差点. DOM结构 中间夹层为了后续拓展. CSS .grid { display: grid; grid ...

  6. Jmeter目录文件讲解

    1.bin:核心可执行文件,包含配置 2.windows启动文件:jmeter.bat mac或linux启动文件:jmeter jmeter-server:mac或linux分布式压测启动文件 jm ...

  7. Unity3d-通过简单示例来理解Time.deltaTime

    转载文章: Unity3d-通过简单示例来理解Time.deltaTime 2018年04月21日 18:04:14 Black_Window 阅读数:926 标签: UnityTime 更多 个人分 ...

  8. Linux_02

    1.vim编辑器 vim操作命令 --在命令模式下进行 pageup 往上翻页 pagedown 往下翻页 H 移动到屏幕首行 gg 移动光标到文档的首行 前面加数字n表示移动到n行内容 G 移动到文 ...

  9. unity上传app store遇到的一些问题

    记录ios发布时遇到的一些问题 注:如果你是用mac开发,那就在Unity里直接BuildAndRun就直接可以导到XCode里,如果是win,那就先打包成ios包,在传导Xcode里打开,不过可能会 ...

  10. 团队作业Week6：规格说明书编写

    (1)请分析你们团队项目的典型用户和场景,并写一个团队博客发布你们团队项目的功能规格说明书. (2)再写一个博客团队博客发布你们项目的设计文档(技术规格说明书). 截止时间:2015-11-03