一篇文章了解HTML文档流(normal flow)

题外话

因为之前在知乎上面写了几篇文章,后来发现知乎不适合写这种技术类文章,所以来到了这里,接下来的几篇都是搬运过来

Ps:排版真的很费时间啊。。。

文档流(normal flow)

要想了解什么是文档流,那就要知道流的概念。想象一下,什么是“流”?我们平常说的“水流”“流体”,我们就可以把像河流那样长长的东西作为流。

那这里所指的文档流指的是什么呢?由于这是显示在浏览器上面的,显示在电脑屏幕前的。如果我们将屏幕的两侧想象成河道,将屏幕的上面作为流的源头,将屏幕的底部作为流的结尾的话,那我们就抽象出来了文档流 !

像水流,流动的是水,电磁流流动的是电磁。那文档流流动的又是什么呢?那就是元素!可以将屏幕中显示的内容都可以一一对应为文档中的一个元素,在这里就引出两个概念: 内联元素块级元素

块级元素和内联元素

别被这两个东西吓到了,块级元素(block)内联元素(inline)。看过英文是不是很简单呢?

块级元素:四四方方的块,在文档中自己占一行。如



内联元素:(行内元素)多个内联元素,可以在一行显示。如

我们对块级元素和内联元素的初级印象已经掌握,但是还不够!

如何区分哪些是块级元素,哪些是内联元素?

如果我们是开发html的语言的人,你会把什么元素设计成块状(杜占一行)什么元素又设计成内联元素呢?以我的观点来看,将 展现宏观 的元素设置成块( 相对宏大 ) 将 修饰细节 的东西设置成行内元素(相对细微)。例如:

元素就是作为容器出道的,他肯定就是块级元素。而 这些修饰个别文字的样式,就是内联元素。当然这不是绝对,只是我yy的结果。

是不是还感觉到蒙蒙的状态呢?再来一剂提神醒脑的神药!

多说无意,请看代码:


        hello
        world
        
hello world

有两个内联元素,这一次再深刻的理解一下,在《CSS权威》中:内联元素是始终以“行布局”,意思是,始终以行的形式表现。不理解没关系,马上你就会知道了。

没加CSS样式的效果图:

接下来我们再加上边框效果,你会看的更清晰。

/*CSS样式表*/
.inline{
    border:1px solid #ccc;
}

.block{
    
    border:1px solid #ccc;
}

效果如图:

我们能看见:

  • 内联元素有两个框,并且在一行显示,而块级元素,虽然第一行的后面能“放下”它,但是却另起一行。(可以更加简单粗暴的理解为前后都加了一个换行符)
  • 内联元素的连接不是绝对的无缝连接,而是正好是一个空格单位的间隔。你可能会问会不会是元素的特殊性呢?

我们接下来继续测试。


        hello
        world
        hello
        
hello world

效果:

可见新加的元素也是一空格分隔。先别急着下结论,接着看:


        hello
        world
        hello
        
hello world

效果:

并没有以空格分隔。

关于空格问题的进一步思考:浏览器会有一个默认样式表,在没有指定样式的情况下会应用默认样式。有没有可能是这个样式表搞的鬼呢?

//将所有元素的内外边距均设置为0
*{
    padding:0px;
    margin:0px;
}

.inline {
    border:1px solid #ccc;
}

.block {
    border:1px solid #ccc;
}

效果图:

由此我们总结一下

嵌套的内联元素不会以空格分隔,而新的内联元素加进来,会以其他内联元素以空格分隔。这是确确实实存在的!

为了证明正确性,最后再来一次测试:将l嵌套成 元素。


        hello
        world
        
hello world

AMAZING!!还是没有变!即使加入 也没有变,证明猜想正确!

所以下面这张图说明了一切:

然而行内元素并非只有文本,图片元素仍然是一个头疼的问题,原因是:他的大小不一定啊,和文字不同。所以有必要再拿图片来测试一下。

        hello
        world
        hello
        
        
hello world

效果图:

好好观察有没有一点熟悉呢?像不像word里面的排版呢?让我们来看一下word中的排版。

图片描述

是不是容易理解多了呢?在图片后面添加内联元素,就和word中添加文字一样!按这样类比的话,块级元素就是多加了一个回车!!!

最后的结论就是:嵌套的内联元素不会以空格分隔,而新的内联元素加进来,会以其他内联元素以空格分隔。同时图片的显示和word中类似,下端与数字一齐,同时与其他元素会有空格分隔。

由此行内元素和块级元素已经总结完。

块级元素和行内元素的转换

类似于文档的排版,我可以把一个内联元素加两个回车,换成块级元素。在CSS中是如何实现这种转换的呢?

可以说是灰常的easy了,还记得开头的两个英文吗?块级元素(block) 行内元素(inline)

只要加上 display:block; 或者是 display:inline 就可以转换了!

举个栗子:

    
        hello
        world
        hello
        
        
hello world
/*CSS*/ .inline{ border:1px solid #ccc; display:block; } .block{ display:inline; border:1px solid #ccc; }

图片描述

还没有结束

关于内联元素的东西还有很多,进一步探究行内元素,必看!(很重要)(由于还没有所以先不放链接)

脱离文档流

但是仅有的两种排版,就满足了我们的需求吗?肯定是不够的!!应该有一种更加自由的变换,从而满足多样的世界。有三种方式脱离文档流:

position:absolute
position:fixed
float

回到文章开头的例子上面,将文档流比作是河流的话,水就相当于文档流里面的元素。而脱离文档流就相当于脱离水跑到水的上面飘着,就像河流上的小船。关于定位的内容,会在之后的文章中继续讲解。

总结

看到这里都不点个赞吗?

以上参杂了自己的一些理解,如有错误,欢迎指出,禁止转载。

更新记录

2017.11.21 第一版

2017.12.02 第二版:更新图片不清晰的问题,加入关于内联元素排列空格的问题。

2017.12.03 第三版:加入内敛元素不能更改width,,,等的说明。

2017.12.04 第四版:更新了第三版加入的错误。进一步探究。

SegmentFault责编内容来自:SegmentFault (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » 一篇文章了解HTML文档流(normal flow)

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录