专栏首页鱼头的Web海洋【Hello CSS】第六章-文档流与排版

【Hello CSS】第六章-文档流与排版

  • 首发:krissarea.gitee.io
  • 作者:陈大鱼头
  • github: KRISACHAN

正常流

什么是“正常流”? 其实就是我们日常所说的“文档流”。 在W3C官方文档里对应的是“normal flow”。

正常流的盒子属于格式化上下文(FC),在CSS2.2中可以是表格内联。 在CSS3中引入了flexgrid,当然以后会引入得更多。

块级盒子(block-level boxes) 与创建 块级格式化上下文(BFC) 有关;

行内级盒子(inline-level boxes) 与创建 行内级格式化上下文(IFC) 有关。

BFC

鱼头注:在之前的文章中有介绍过如何生成一个BFC,本章便不再累述。

根据W3C上的解释:

浮动、绝对定位元素、块容器(例如inline-blocks、table-cells、and table-captions)都不是块盒子。除了 overflow以外的 visible(除非该值已经传播到了视口)为其内容建立新的BFC

表现是什么?

表现就是在包含块内一个盒子一个盒子不重叠地垂直排列,两个兄弟盒子直接的垂直距离由 margin决定。浮动也是如此(虽然有可能两个盒子的距离会因为 floats而变小),除非该盒子再创建一个新的BFC

简单来说,BFC就是一个独立不干扰外界也不受外界干扰的盒子啊(/ω\)

IFC

鱼头注:Mmmmm,BFC还是相对好理解,IFC比较复杂,W3C上所占的篇幅也比BFC多得多的。

简单来说,跟BFC表现不一样的盒子就是IFC了(*❦ω❦)。

BFC不一样,IFC内的盒子会从包含块的顶部一个接着一个地水平排列。这些盒子会考虑水平 marginborderpadding。垂直对齐的方式也略有复杂。然后,包含形成一条线的框的矩形区域称为线盒(line box)

线盒(line box)的宽度:由浮动情况跟它所在的包含块决定。

线盒(line box)的高度:由 line-height的计算结果决定。

基线(baseline)

线盒(line box) 的高度由 line-height的计算结果决定。

line-height的定义就是线盒(line box)内两基线(baseline)(W3C原文)的间距。

vertical-align的默认值就是基线。

字母x

你们还记得读书时用的英语作业本吗?

如上图所示,我们看到小写字母x的位置,它的上下边缘就是我们的基线(baseline),但下边缘才是我们日常使用的属性值。顺便一提,CSS单位 ex便是指的这个字母x的高度。

如何理解IFC

自从翻了CSS的发展史之后,了解了CSS的诞生背景之后,其实很多东西理解起来就轻松了。IFC之所以比BFC复杂,原因就在于很多非规律的成分,在西文了,我们可以简单粗暴的理解为英语作业本的表现,但是在writing-mode不同,文字表现不同的各个国家,IFC的表现也会有差异。

当然以上都是我的个人理解,如果有更科学更标准的理解方式或者不同的想法,可以加鱼头微信“krisChans95”来探讨。

层叠上下文与层叠顺序

我们首先来看一张很著名的图

上面便是在同样的上下文中,元素的层叠规则(CSS3以后的除外,那规则会比较复杂)。元素的 z-index 值只在父级层叠上下文中有意义。级层叠上下文被自动视为父级层叠上下文的一个独立单元。

文档中的层叠上下文由满足以下任意一个条件的元素形成:

  • 根元素 (HTML),
  • z-index 值不为 auto 的 绝对/相对定位,
  • 一个 z-index 值不为 auto 的 flex 项目 (flex item),即:父元素 display:flex|inline-flex
  • opacity 属性值小于 1 的元素,
  • transform 属性值不为 none 的元素,
  • mix-blend-mode 属性值不为 "normal"的元素,
  • filter值不为 none 的元素,
  • perspective值不为 none 的元素,
  • isolation 属性被设置为 isolate 的元素,
  • position:fixed
  • will-change 中指定了任意 CSS 属性,即便你没有直接指定这些属性的值
  • -webkit-overflow-scrolling 属性被设置 touch 的元素

新时代的布局

Flex

我想到如今,应该很少人会没写过或者没了解过 Flex (不知道的可以翻阅MDN)。

这个是 CSS 史上第一个以 start-end 来定义方向的属性,这是一个可伸缩的布局模型。

一个设有 display:flexdisplay:inline-flex 的元素是一个伸缩容器,伸缩容器的子元素被称为为伸缩项目,这些子元素使用伸缩布局模型来排版。

语法如下:

  1. display: flex/inline-flex;
  2. flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];

flex 属性可以指定1个,2个或3个值。

单值语法: 值必须为以下其中之一:

  • 一个无单位 数( <number>) : 它会被当作 <flex-grow>的值
  • 一个有效的 宽度(width) 值: 它会被当作 <flex-basis>的值
  • 关键字 noneauto, 或 initial

双值语法: 第一个值必须为一个无单位数,并且它会被当作 <flex-grow> 的值。第二个值必须为以下之一:

  • 一个无单位数:它会被当作 <flex-shrink> 的值。
  • 一个有效的宽度值: 它会被当作 <flex-basis> 的值。

三值语法:

  • 第一个值必须为一个无单位数,并且它会被当作 <flex-grow> 的值。
  • 第二个值必须为一个无单位数,并且它会被当作 <flex-shrink> 的值。
  • 第三个值必须为一个有效的宽度值, 并且它会被当作 <flex-basis> 的值。

Grid

我印象中第一次接触Grid布局的时候,开个Chrome的实验性功能也就只能能支持个 repeat(4,200px),但如今已经除了IE,其他浏览器差不多也是Full support了(如果你还不了解这个布局模型,可以翻阅MDN)。

在这里顺便提一下,Flex是一维布局,Grid是二维布局。意思就是Flex只能同时在一个方向进行作用,而Grid却可以在纵横两个方向同时工作。

语法如下:

  1. display: grid/inline-grid;
  2. gird: <'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>

我们来看看 grid 所支持的一些 “奇怪” 的特性:

命名空间

鱼头觉得 grid 布局中最有趣的功能就是命名空间了,我们可以看看以下示例:

首先是第一种 网格线命名

  1. <style>
  2. html,
  3. body,
  4. div {
  5. margin: 0;
  6. padding: 0;
  7. }
  8. .grid {
  9. display: grid;
  10. width: 420px;
  11. background: #e4d6ba;
  12. margin: 1em auto;
  13. }
  14. .g-namespace {
  15. height: 400px;
  16. grid-template-columns: [col1] 100px [col2] auto [col3] 100px;
  17. grid-template-rows: [rows1] 25% [rows2] 100px [rows3] auto [rows4] 60px
  18. }
  19. .grid > div {
  20. outline: 1px dotted;
  21. }
  22. </style>
  23. <body>
  24. <div class="grid g-namespace">
  25. <div></div>
  26. <div></div>
  27. <div></div>
  28. <div></div>
  29. <div></div>
  30. <div></div>
  31. <div></div>
  32. <div></div>
  33. <div></div>
  34. <div></div>
  35. <div></div>
  36. <div></div>
  37. </div>
  38. </body>

效果如下:

第二种 真命名空间布局

  1. <style>
  2. html,
  3. body,
  4. div {
  5. margin: 0;
  6. padding: 0;
  7. }
  8. .grid {
  9. display: grid;
  10. width: 400px;
  11. height: 400px;
  12. margin: 1em auto;
  13. }
  14. .g-namespace {
  15. grid-template-columns: 1fr 1fr 1fr;
  16. grid-template-rows: 1fr 1fr 1fr;
  17. grid-template-areas: "头部 头部 头部" "左边 中间 右边" "底部 底部 底部";
  18. }
  19. .头部 {
  20. grid-area: 头部 / 头部 / 头部 / 头部;
  21. background: #32CD32;
  22. }
  23. .底部 {
  24. grid-area: 底部 / 底部 / 底部 / 底部;
  25. background: #FFD700;
  26. }
  27. .左边 {
  28. grid-area: 左边 / 左边 / 左边 / 左边;
  29. background: #EE82EE;
  30. }
  31. .右边 {
  32. grid-area: 右边 / 右边 / 右边 / 右边;
  33. background: #FF7F50;
  34. }
  35. </style>
  36. <body>
  37. <div class="grid g-namespace">
  38. <div class="头部"></div>
  39. <div class="左边"></div>
  40. <div class="右边"></div>
  41. <div class="底部"></div>
  42. </div>
  43. </body>

效果如下:

通过上面两个示例,我们可以发现Grid布局的二维性可以满足我们日常很多的布局要求,当然,第一眼看语法不免有点懵,但是熟悉之后,基本日常需求中的二维布局我们都能依赖它来完成。

一些常用的灵活尺寸

属性

定义

fr

可伸缩长度单位,网格容器中可用空间的一等份。

auto

自由分配,由具体情况决定。

minmax()

定义了一个长宽范围的闭区间。

fit-content()

同等于min(maximum size, max(minimum size, argument))

以上属性对比结果如下:

源码在我codepen中,大家可以自行去对比: https://codepen.io/krischan77/pen/rborZG

后记

本章的内容要深究起来是非常庞大的,鱼头我在准备内容的时候有想过是不是要另外再开个布局的系列去分享,但是我想把本文当成是一个关键字集合来供自己以及有需要的人来做目录也是极好的。我认为 CSS中最难的部分就是布局了,虽然W3C本身提供了很多的属性以及规范来处理这些布局问题的,但是涉及到了现实的项目,更多时候是错综复杂的,但是随着 CSS 逻辑属性的变化,以及各类新布局系统的出现,相信以后的布局会简单得多。

本章内容就这么草草结束了,关于上面提到的,或者没有提到的与之相关的,以后有机会鱼头会新开个系列来分享。当然如果看到这里的你有任何布局上的见解或问题也欢迎来找鱼头探讨。

【Hello CSS】系列

【HelloCSS】是以 CSS基础概念为主题的系列文章,旨在帮助大家更深刻地了解并且提高 CSS在各位开发者心目中的地位。由于鱼头我水平有限,文笔有限,如果各位在文章中发现有任何不合理,不正确的地方,还烦不吝指出,我会非常感谢的;如果通过文章有任何想法或疑问,也希望各位能积极留言,我们互相探讨;如果通过本系列文章有所收获,这就让鱼头我喜不自胜了!

如果你也喜欢 CSS,喜欢探讨技术,或者对本文,本系列有任何的意见或建议,鱼头非常希望你能加入一个有趣的微信群 — “进击的CSS”。如果你有兴趣,请添加鱼头微信(krisChans95),添加时注明 “加群”,Mmmm,最后,如果觉得我的文章还不错,请加个关注跟点个“在看”呗!

本文分享自微信公众号 - 鱼头的Web海洋(krissarea),作者:陈大鱼头

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

原始发表时间:2019-04-28

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 深藏在CSS里的诗情画意(十个原创的CSS特效,不容错过)

    很多的碎碎念都用都用 HTML 跟 CSS 来记录在我的codepen https://codepen.io/krischan77 之上,眼见积累到了一些了,就...

    陈大鱼头
  • 面试官:你可以用纯 CSS 判断鼠标进入的方向吗?

    在之前某一个前端技术群里,有一个群友说他面试的时候遇到了一个问题,就是面试官让他用纯 CSS 来实现一个根据鼠标移动位置觉得物体移动方向的 DEMO。

    陈大鱼头
  • 从ES6到ES10的新特性万字大总结(不得不收藏)

    ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会)在标准ECMA-262中定义的脚本语言规范。这种语言在万维网上应用广泛,它往往被称为Jav...

    陈大鱼头
  • 性能专题:Locust工具实战之创建性能测试

    在前面的文章中,我们介绍了性能测试框架Locust是什么:性能专题:Locust工具实战之开篇哲学三问,以及如何安装它:性能专题:Locust工具实战之“蝗虫”...

    测试开发技术
  • CSS——loading动画

      由图可见,动画1中有三根竖线,在进行变长变短的高度变化以及线条的颜色变化,因此分为以下几个步骤:

    流眸
  • [silverlight] silverlight3新增功能2:WriteableBitmap

    使用 WriteableBitmap 类基于每个框架来更新和呈现位图。这对于拍摄正播放视频的快照、生成算法内容(如分形图像)和数据可视化(如音乐可视化应用程序...

    dino.c
  • 127个常用的JS代码片段,每段代码花30秒就能看懂(六)

    大家好,今天我继续给大家分享本系列文章的最后一部分,感谢你对本系列文章的持续关注,希望对你的日常工作有所帮助。

    前端达人
  • 腾讯携手人人都是产品经理,16位实战派专家汇聚中国硅谷 · 深圳,共话产品增长新趋势

    腾讯大讲堂
  • jQuery点击checkbox选择标签到指定的位置

    祖传代码的存在,这个项目自我进公司以来,就一直在改写加上维护,没有什么太厉害的技术,据说在我进公司之前,是经过两个Java后台来编写遗留下来的代码,公司觉得若是...

    祈澈菇凉
  • JVM | 使用HSDB探秘运行时数据区

    HSDB全称是HotSpotDebugger, HotSpot虚拟机的调试工具,在使用的时候,需要程序处在暂停的状态,可以直接使用Idea的debug工具. 使...

    微笑的小小刀

扫码关注云+社区

领取腾讯云代金券