专栏首页技术探究-前端、Python、爬虫、数据分析、工具【前端攻略--HTML/CSS】html 文档流的理解

【前端攻略--HTML/CSS】html 文档流的理解

理解好文档流,有助于我们对css中定位和浮动的理解。什么是文档流呢,经过我看过的一些文章,加入自己的理解。我得出文档流的定义如下:

  1. 从左至右,从上至上的布局。
  2. 符合html中标签本身含义的布局,比如某些标签独占一行。有些标签属于行内元素等。

下面来讲一个css中的定位机制,共三种:

  1. 正常的文档流
  2. float
  3. postion

在这几种定位机制中,有几种方式是脱离文档流的。什么是脱离文档流呢?可以这样理解,本来这个标签是属于文档流管理的,那么它应该按照文档流的正常布局方式从左至右从上之下,并且符合标签本身的含义。

脱离文档流是指,这个标签脱离了文档流的管理。不受文档流的布局约束了,并且更重要的一点是,这个标签在原文档流中所占的空间也被清楚掉了。

那么,这几种脱离文档的的定位机制包括哪些呢?

  1. float
  2. position:absolute

文档流

写html,css的同学应该需要清楚什么是文档流。

文档流:将窗体自上而下分成一行一行,并在每行中按从左至右的挨次排放元素,即为文档流。

每个非浮动块级元素都独有一行, 浮动元素则按规则浮在行的一端. 若当时行容不下, 则另起新行再浮动。内联元素也不会独有一行. 一切元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素。有三种状况将使得元素离开文档流而存在,分别是浮动、绝对定位、固定定位.

然则在IE中浮动元素也存在于文档流中。

浮动元素不占任何正常文档流空间,而浮动元素的定位照样基于正常的文档流,然后从文档流中抽出并尽能够远的挪动至左侧或许右侧。当一个元素脱离正常文档流后,依然在文档流中的其他元素将忽略该元素并填补其原先的空间。

基于文档流,理解以下的定位形式:

相对定位:元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。

绝对定位:即完全离开文档流, 相关于position属性非static值的比来父级元素进行偏移。

固定定位:即完全离开文档流,相关于视区进行偏移。

文档流是文档中可显示对象在排列时所占用的位置。比如网页的div标签它默认占用的宽度位置是一整行,p标签默认占用宽度也是一整行,因为div标签和p标签是块状对象。

网页中大部分对象默认是占用文档流,也有一些对象是不占文档流的,比如表单中隐藏域。当然我们也可以让占用文档流的元素转换成不占文档流,这就要用到CSS中属性position来控制。

看看CSS 2.0对position的定义:检索对象的定位方式。共有4种取值。

absolute:绝对定位。将对象从文档流中拖出,使用left,right,top,bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义。当对象定位在浏览器窗口以外,浏览器因此显示滚动条。

fixed:固定定位。对象定位遵从绝对(absolute)方式。但是要遵守一些规范。当对象定位在浏览器窗口以外,浏览器不会因此显示滚动条,而当滚动条滚动时,对象始终固定在原来位置。

relative:相对定位。对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置。当对象定位在浏览器窗口以外,浏览器因此显示滚动条。

static:元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。

inherit:继承值,对象将继承其父对象相应的值。

要很好的理解上面这段话,可以用排除法。CSS的定位机制有3种:普通流、浮动(float:left/right/none)和定位 (position:static/relative/absolute/)。

普通流就是正常的文档流,在HTML里面的写法就是从上到下,从左到右的排版布局。

例:

<div id=”01”></div><div id=”02”></div><div></div>

很显然这是最普通的文档流,从左到右,一个挨一个按照顺序01先,02其次,03最后排列。

一旦给其中的某个DIV进行FLOAT属性或者absolute定位(不包括static/relative,这两个依然保持正常的文档流),则它完全脱离文档流,不占空间。

例:

为了能更好辨认,我分别给01绿色,02灰色,03黄色。然后再给01左浮动。结果,01脱离了文档流,完全不占空间,所以02顺势顶替了01原来的位置,结果02被01盖住了。

同理,absolute定位跟FLOAT一样,脱离了文档流,不再占原来文档流的空间了。再举一个大家在日常经常遇到的问题来印证—高度自适应

反复想一想,高度自适应的原理其实就是这个:

<div id=”a”>


  <div id=”b”>这是b</div>


  <div id=”c”>这是c</div>


</div>

这个结构是a包住b和c,颜色不变,a的高度为自动,b的高度为100,C的高度为500。b和c都为左浮动

很明显a没有被撑开了。原因是它们浮动了就不再占空间了。既然没有空间可占,那就等于容器里没有东西,所以不撑开。解决办法是在黄色DIV的后面加个DIV,然后清除浮动。让他有空间可占,自然就撑开了。试试!

总结:

1、 CSS的定位机制有3种:普通流、浮动和定位。

2、 文档流:从上到下,从左到右,一个挨一个的简单或者叫正常布局。

3、 定位:(position)

  Static:保持文档流。

  Relative:相对本身的原始位置发生位移且保持文档流,占空间。

  Absolute:脱离文档流,不占空间且相对于其包含块来定位。

4、 浮动:(flaot)脱离文档流,不占空间。

5、 以前总是觉得position:static这个属性很多余,现在看来他的作用就是让元素保持文档流的!

- End -

本文分享自微信公众号 - 离不开的网(Gy_dxj)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-06-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【前端攻略--HTML/CSS】边框、文字效果与字体图标实例介绍

    字体:实际上是长得像图标的字体,占用的空间小,消耗的带宽小,能够更快的显示页面。字体是矢量的,所以不会失真,可以按照字体一样设置字体颜色和大小。

    小Gy
  • 一个案例让你入门爬虫之Q房网爬虫实例

    目标网站的确认,本次爬取网站为深圳Q房网( https://shenzhen.qfang.com/),要爬取的是深圳市Q房网所有二手房的信息。

    小Gy
  • 爬虫系列(17)Scrapy 框架-分布式Scrapy-Redis以及Scrapyd的安装使用。

    > 一个三方的基于redis的分布式爬虫框架,配合scrapy使用,让爬虫具有了分布式爬取的功能。

    小Gy
  • 这个小程序,即使马化腾也要等 8 年 | 亲儿子

    知晓君
  • golang语言的办公工作流的包

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

    hotqin888
  • 基于贝叶斯算法的文本分类算法

    1、基本定义: 分类是把一个事物分到某个类别中。一个事物具有很多属性,把它的众多属性看作一个向量,即x=(x1,x2,x3,…,xn),用x这个向量来代表这个...

    机器学习AI算法工程
  • 教程 | Python 实现 Word 文档操作...

    我们在Word中输入文字时,一般会先使用鼠标点击需要输入文字的位置,这个过程是获得了光标焦点。

    昱良
  • 走进AI时代的文档识别技术 之文档重建

    ? 导读:作者系腾讯QQ研发中心——CV应用研究组的totoralin。本文主要介绍基于深度学习的文档重建框架,通过文档校正、版面分析、字体识别和阅读排序将纸...

    腾讯技术工程官方号
  • 带你熟悉CSS浮动

      浮动:顾名思义先浮后动,浮动的对象会先漂浮起来,离开自己原来的位置(也就是所谓的脱离文档流),后动的意思是,它的后面的元素会向它原来的位置动起来。

    阿豪聊干货
  • 5步搭建一个测试文档管理网站

    前阵子在看到一个公众号的哥们使用readthedoc模板搭建了一个个人的文档站点,因为之前也看到过,一直想弄却被拖延了,刚好最近项目组有需求就顺手搭了一个。

    上帝De助手

扫码关注云+社区

领取腾讯云代金券