tofacebook.com -专业IT技术社区 CSS布局学习(三) - Normal Flow 正常布局流(官网直译) Web程序【tofacebook.com】 - tofacebook.com-专业IT技术社区
87°

CSS布局学习(三) - Normal Flow 正常布局流(官网直译) Web程序【tofacebook.com】

标签:现在   影响   bubuko   垂直   空间   情况   相同   line   add   

 

默认情况下,元素是如何布局?

首先,取得元素的内容,加上内边距(padding),边框(border),外边距(margin)放在一个盒子中 - 这就是我们之前看到的盒子模型

默认情况下,块级元素的内容宽度是其父元素宽度的100%,高度与其父元素相同。行内元素的高度与高度对应其内容的宽度与高度。不能设置行内元素的width与height - 它们位于块级元素的内容区。如果你想要设置行内元素的尺寸,需要将其设置为块级元素相类似的元素,可以以设置display:block这种方式实现(或者dispaly:inline-block;inline-block混合了inline与block的特性)

这解释了独立元素的布局,但是元素之间如何相互影响呢?正常布局流是一套在浏览器可视区域内放置排列元素的系统。默认情况下,块级元素是按照块出现在文档书写模式的方向放置 - 每一个块级元素出现在上一个块级元素的下一行,它们会自身设置好的margin分隔。因此,在英语,其它水平的,自上而下的书写模式中,块级元素都是垂直排列的。

 

行内元素的表现有所不同 - 它们不会另起一行;只要它们的父级块级元素的宽度足够,它们会与其它行内元素,相邻的文本内容出现在同一行。如果空间不够,那么溢出的文本或者行内元素就会移到新的一行。

如果相邻的两个元素都设置了margin并且两个margin有重叠,那么更大的margin被保留,小的消失 - 这种现象叫做外边距叠加

技术分享图片

 

CSS布局学习(三) - Normal Flow 正常布局流(官网直译)

标签:现在   影响   bubuko   垂直   空间   情况   相同   line   add   

原文地址:https://www.cnblogs.com/xiaochengzi/p/9968451.html


本文由百家号/熊掌号作者上传并发布,百家号仅提供信息发布平台。文章仅代表作者个人观点,不代表百度立场。

已有 0 条评论

    我有话说: