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

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

  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. python图像处理模块Pillow--Image模块

    一.简介 PIL:Python Imaging Library,已经是Python平台事实上的图像处理标准库了.PIL功能非常强大,但API却非常简单易用 由于PIL仅支持到Python 2.7,加上 ...

  2. vue-cli，build 后，报错的解决办法

    报错如下图: 或: 解决办法:config / index.js 中,找到 build { assetsPublicPath: '/' },将其设置为:assetsPublicPath: './ ' ...

  3. WPF之Manipulation

    原文:WPF之Manipulation 需求:现,在窗口下有一个StackPanel控件. 1.可以拖动. 2.可以展开及收缩(不仅仅可以拖动还可以点击) 3.窗口向坐标轴一样分四个象限,在不同的区域 ...

  4. kali黑客渗透测试基础环境准备

    1.apt-get install python-nmap 2.apt-get install python-setuptools 正在读取软件包列表... 完成 正在分析软件包的依赖关系树      ...

  5. 用Spring.Services整合 thrift0.9.2生成的wcf中间代码-复杂的架构带来简单的代码和高可维护性

    最近一直在看关于thrift的相关文章,涉及到的内容的基本都是表层的.一旦具体要用到实际的项目中的时候就会遇到各种问题了! 比如说:thrift 的服务器端载体的选择.中间代码的生成options(a ...

  6. java批量爬取电影资源

    摘要 网上有很多个人站来分享电影资源,其实有时候我们自己也想做这个一个电影站来分享资源.但是这个时候就有一个问题,电影的资源应该从哪里来呢?难道要自己一条条手动去从网络上获取,这样无疑是缓慢而又效率低 ...

  7. 红黑树的删除详解与思路分析——不同于教科书上的算法（dart语言实现）

    对于红黑树的删除,看了数据结构的书,也看了很多网上的讲解和实现,但都不满意.很多讲解都是囫囵吞枣,知其然,不知其所以然,讲的晦涩难懂. 红黑树是平衡二叉树的一种,其删除算法是比较复杂的,因为删除后还要 ...

  8. SQL执行结果操作

    1. 返回执行结果中的一行 mysql_fetch_row() 返回执行结果的当前行的数值数组,执行这个函数后,结果指向下一行. e.g. $row = mysql_fetch_row($result ...

  9. PHP密码的六种加密方式

    1. MD5加密 string md5 ( string $str [, bool $raw_output = false ] ) 参数 str  --  原始字符串. raw_output  --  ...

  10. C# 词频统计 东北师范大学 软件项目管理 第一次作业

    一.作为杨老师的学生第一次听杨老师讲课,印象最深的就是:工程中所有步骤之间是乘法,如果任何一步为0,工程就做不出来了.以前所有老师讲到的都是不要太在乎结果,努力的过程很重要,但是这在软件工程中不合适了 ...