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

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

  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. 20155209林虹宇 Exp6 信息搜集与漏洞扫描

    Exp6 信息搜集与漏洞扫描 1.信息收集 1.1通过DNS和IP挖掘目标网站的信息 whois查询 进行whois查询时去掉www等前缀,因为注册域名时通常会注册一个上层域名,子域名由自身的域名服务 ...

  2. 20155229《网络对抗技术》Exp2：后门原理与实践

    实验预习 后门: 指绕过安全控制而获取对程序或系统访问权的方法.最主要目的就是方便以后再次秘密进入或者控制系统. 木马与后门的区别: 木马:通过欺骗用户的方法(包含捆绑,利用网页等)让用户不知不觉的安 ...

  3. 20155234 昝昕明 《网络对抗技术》实验一 PC平台逆向破解

    实践内容: 手工修改可执行文件,改变程序执行流程,直接跳转到getShell函数. 利用foo函数的Bof漏洞,构造一个攻击输入字符串,覆盖返回地址,触发getShell函数. 注入一个自己制作的sh ...

  4. WPF编程 ，TextBlock 显示百分数值的一种简单方法。

    原文:WPF编程 ,TextBlock 显示百分数值的一种简单方法. 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_43307934/article/ ...

  5. 欧几里得算法（及扩展）&&快速幂（二分+位运算）

    最近在二中苦逼地上课,天天听数论(当然听不懂) 但是,简单的还是懂一点的 1.欧几里得算法 说得这么高级干什么,gcd入门一个月的人都会吧,还需要BB? 证明可参照其他博客(不会),主要就是gcd(a ...

  6. 总结：C# 委托的全面理解

    在说事件之前得先了解委托. 委托,外表看来和C/C++中函数指针没什么区别,但是本质上你才发现他其实就是个类!也就是说理解委托得从 这个两个方面去理解(单从一个方面去理解感觉就怪怪的呵呵!) 理解委托 ...

  7. Hadoop日记Day14---MapReduce源代码回顾总结

    一.回顾单词统计源码 package counter; import java.net.URI; import org.apache.hadoop.conf.Configuration; import ...

  8. ubuntu12.04安装OVS

    1.下载openVswitch ovs官网 2.运行如下脚本 #!/bin/bash cd /home/sdn/ovs/openvswitch- rm /usr/local/etc/openvswit ...

  9. R绘图 第五篇：绘制散点图（ggplot2）

    ggplot2包中绘制点图的函数有两个:geom_point和 geom_dotplot,当使用geom_dotplot绘图时,point的形状是dot,不能改变点的形状,因此,geom_dotplo ...

  10. BaseProxy:异步http/https中间人

    BaseProxy 异步http/https代理,可拦截并修改报文,可以作为中间人工具.仅支持py3.5+.项目地址:BaseProxy. 意义 BaseProxy项目的本意是为了使HTTP/HTTP ...