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

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

  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. 20155238 《JAVA程序设计》实验三（敏捷开发与XP实践）实验报告

    实验内容 敏捷开发与XP实践 XP基础 XP核心实践 相关工具 实验要求 1.没有Linux基础的同学建议先学习<Linux基础入门(新版)><Vim编辑器> 课程 2.完成实 ...

  2. flask 与 vue.js 2.0 实现 todo list

    实现了后端与前端分离,后端提供 RESTful api. 后端 flask 与前端 vue 的数据传输都是 json. 本文使用 vue.js 2.0 对前一个例子:flask, SQLAlchemy ...

  3. MSBUILD : error MSB3428: 未能加载 Visual C++ 组件“VCBuild.exe”

    问题 MSBUILD : error MSB3428: 未能加载 Visual C++ 组件"VCBuild.exe".要解决此问题,1) 安装 .NET Framework 2. ...

  4. C#集合与泛型集合

    看到这个标题,大家应该就知道有泛型集合,就有非泛型集合 既然都是集合,咱们今儿就简单的来对比讲解下 需要记住的不算太多,理解记忆.理解记忆 2017-11-0411:39:09 C# 泛型集合之非泛型 ...

  5. HTML-JS 循环 函数 递归

    [循环结构的执行步骤] 1.声明循环变量 2.判断循环条件 3.执行循环体操作 4.更新循环变量 然后,循环执行2-4,直到条件不成立时,跳出循环. while循环()中的表达式,运算结果可以是各种类 ...

  6. camscanner(扫描全能王)功能解析与复现

    早就在用camscanner(扫描全能王)这个软件,感觉很不错. 主要功能: 1.页面截取校正 2.增强处理(灰度与颜色) 刚好最近工作与此相关,静心做点仿真,看看其中的操作原理,也做个demo玩玩. ...

  7. 简单的RNN和BP多层网络之间的区别

    先来个简单的多层网络 RNN的原理和出现的原因,解决什么场景的什么问题 关于RNN出现的原因,RNN详细的原理,已经有很多博文讲解的非常棒了. 如下: http://ai.51cto.com/art/ ...

  8. EOS开发基础之六：使用cleos命令行客户端操作EOS——智能合约之eosio.msig和eosio.system

    上一节我们搞了老半天,也没整明白Exchange这个合约到底干啥用的.就它官方提供的说法,是用于货币的创造和交易.我没整明白,所以去看了下代码,发现代码头文件里面有下面这段话: This contra ...

  9. PAT甲题题解-1032. Sharing (25)-链表水题

    #include <iostream> #include <cstdio> #include <algorithm> #include <string.h&g ...

  10. tomcat运行JSP时产生的错误：”javax.servlet.servletexception: java.lang.nosuchmethoderror”

    这个错误其实是多次重复编译JAVA文件导致的,需要clean操作,简单的来说就是删除tomcat下work文件夹中工作空间,也可以理解为自己的虚拟路径,比如我运行的jsp的路径:localhost:8 ...