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

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

  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. Django Rest Framework源码剖析(三)-----频率控制

    一.简介 承接上篇文章Django Rest Framework源码剖析(二)-----权限,当服务的接口被频繁调用,导致资源紧张怎么办呢?当然或许有很多解决办法,比如:负载均衡.提高服务器配置.通过 ...

  2. 20155210 EXP6 信息搜集与漏洞扫描

    20155210 EXP6 信息搜集与漏洞扫描 信息搜集 外围信息搜集 通过DNS和IP挖掘目标网站的信息 whois 域名注册信息查询 我们通过输入whois qq.com可查询到3R注册信息,包括 ...

  3. 课程设计个人报告——基于ARM实验箱的Android交友软件的设计与实现

    个人贡献 熟悉试验箱各元件功能以及连接组装试验箱 一.实验内容 研究实验箱串口.USB线的调通连接 二.实践步骤 1.打开实验箱,首先了解各元件功能 这个是LTE模块,也叫4G模块,具体的作用是硬件将 ...

  4. 2017-2018-1 20155331 嵌入式C语言

    2017-2018-1 20155331 嵌入式C语言 作业要求: 在作业本上完成附图作业,要认真看题目要求. 提交作业截图 作弊本学期成绩清零(有雷同的,不管是给别人传答案,还是找别人要答案都清零) ...

  5. Nuget包CommonServiceLocator从1.0.3升级到2.0.4时MvvmLight的ViewModelLocator初始化SimpleIoc.Default格式不匹配问题

    原文:Nuget包CommonServiceLocator从1.0.3升级到2.0.4时MvvmLight的ViewModelLocator初始化SimpleIoc.Default格式不匹配问题 把旧 ...

  6. 浅谈Objeact.clone克隆（纯个人理解，如有错误请指正）

    现在先来看一下jdk给出的Object.clone源码和注释 /** * Creates and returns a copy of this object. The precise meaning ...

  7. exchange 2010 的两个错误

    最近公司要搭建邮件服务器 过程中 碰到两个问题,记录下来. 引以为戒 . 1,登陆界面能出来 但是无论输入什么都显示 乱码.问题原因 身份验证有问题. 如图所示:  改成这个,然后 重启 iis 就可 ...

  8. 《HTTP权威指南》读书笔记：缓存

    缓存的定义 Web缓存是可以自动保存常见文档副本的HTTP设备(包括浏览器?) 缓存的作用 减少冗余数据传输 缓解带宽瓶颈(很多网络为本地网络客户端提供的带宽比为远程服务器提供的带宽要宽) 缓解瞬时拥 ...

  9. kubernetes 网络故障遇见的坑

    1.记录一下自己搭建kubernetes 集群遇见的坑. 过程是我学技术以来最大的bug,处处都是坑,稍微写成一点, 就完全起不来, 起不来之后, 还找不到故障点, 郁闷之极. 后续会慢慢分享给大家. ...

  10. pthon自动化之路-编写登录接口

    # Author:Lixiang Zoulock = "F:/Users/admin/PycharmProjects/day1/account.txt"account = &quo ...