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

  • 作者：陈大鱼头
  • github： KRISACHAN

正常流

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

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

块级盒子(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内的盒子会从包含块的顶部一个接着一个地水平排列。这些盒子会考虑水平margin，border跟padding。垂直对齐的方式也略有复杂。然后，包含形成一条线的框的矩形区域称为线盒（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:flex 或 display:inline-flex 的元素是一个伸缩容器，伸缩容器的子元素被称为为伸缩项目，这些子元素使用伸缩布局模型来排版。

语法如下：

display: flex/inline-flex;
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];
复制代码

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

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

  • 一个无单位 数(<number>) : 它会被当作<flex-grow>的值。
  • 一个有效的 宽度(width) 值: 它会被当作 <flex-basis>的值。
  • 关键字 none、 auto, 或 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却可以在纵横两个方向同时工作。

语法如下：

display: grid/inline-grid;
gird: <'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
复制代码

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

命名空间：

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

首先是第一种 网格线命名：

<style>html,body,div {margin: 0;padding: 0;}.grid {display: grid;width: 420px;background: #e4d6ba;margin: 1em auto;}.g-namespace {height: 400px;grid-template-columns: [col1] 100px [col2] auto [col3] 100px;grid-template-rows: [rows1] 25% [rows2] 100px [rows3] auto [rows4] 60px}.grid > div {outline: 1px dotted;}
</style>
<body><div class="grid g-namespace"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
</body>
复制代码

效果如下：

第二种 真命名空间布局：

<style>html,body,div {margin: 0;padding: 0;}.grid {display: grid;width: 400px;height: 400px;margin: 1em auto;}.g-namespace {grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 1fr 1fr 1fr;grid-template-areas: "头部 头部 头部" "左边 中间 右边" "底部 底部 底部";}.头部 {grid-area: 头部 / 头部 / 头部 / 头部;background: #32CD32;}.底部 {grid-area: 底部 / 底部 / 底部 / 底部;background: #FFD700;}.左边 {grid-area: 左边 / 左边 / 左边 / 左边;background: #EE82EE;}.右边 {grid-area: 右边 / 右边 / 右边 / 右边;background: #FF7F50;}
</style>
<body><div class="grid g-namespace"><div class="头部"></div><div class="左边"></div><div class="右边"></div><div class="底部"></div></div>
</body>
复制代码

效果如下：

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

一些常用的灵活尺寸

属性定义
fr可伸缩长度单位，网格容器中可用空间的一等份。
auto自由分配，由具体情况决定。
minmax()定义了一个长宽范围的闭区间。
fit-content()同等于min(maximum size, max(minimum size, argument))

以上属性对比结果如下：

源码在我codepen中，大家可以自行去对比： codepen.io/krischan77/…

后记

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

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

参考资料：

聊聊CSS中的层叠相关概念

CSS Conf -《新时代CSS布局》学习总结

新时代CSS布局

CSS世界

CSS Display Module Level 3

CSS Flexible Box Layout Module Level 1

CSS Grid Layout Module Level 1

CSS Box Alignment Module Level 3

写给自己看的display: grid布局教程

写给自己看的display: flex布局教程

CSS深入理解流体特性和BFC特性下多栏自适应布局

块格式化上下文

Normal flow

css中的IFC

【Hello CSS】系列

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



如果你也喜欢CSS，喜欢探讨技术，或者对本文，本系列有任何的意见或建议，你可以扫描下方二维码，关注微信公众号“鱼头的Web海洋”，随时与鱼头互动。欢迎！衷心希望可以遇见你。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/448810.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

创建型模式---工厂模式

创建型模式---工厂模式

工厂模式 在工厂设计模式中&#xff0c;客户端可以请求一个对象&#xff0c;而无需要知道这个对象来自哪里&#xff0c;也就是使用哪个类来生成这个对象。工厂背后的思想是简化对象的创建。与客户端自己基于类实例化直接创建对象相比&#xff0c;基于一个中心化函数来实现&…
阅读更多...
OpenCL memory object 之 Global memory (2)

OpenCL memory object 之 Global memory (2)

当我们用clCreateBuffer, clCreateImage创建OpenCL memory object时候&#xff0c;我们需要输入一个flag参数&#xff0c;这个参数决定memory object的位置。 cl_mem clCreateBuffer (cl_context context, cl_mem_flags flags, size_t size, void *host_ptr, cl_int *errc…
阅读更多...
数据结构进阶篇-跳表

数据结构进阶篇-跳表

大家想必都知道&#xff0c;数组和链表的搜索操作的时间复杂度都是O(N)的&#xff0c;在数据量大的时候是非常耗时的。对于数组来说&#xff0c;我们可以先排序&#xff0c;然后使用二分搜索&#xff0c;就能够将时间复杂度降低到O(logN)&#xff0c;但是有序数组的插入是一个O…
阅读更多...
查看本机ssh公钥，生成公钥

查看本机ssh公钥，生成公钥

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 查看ssh公钥方法&#xff1a; 1.通过命令窗口&#xff1a;打开你的git bash 窗口&#xff0c;进入.ssh目录&#xff1a;cd ~/.ssh&…
阅读更多...
如何实现动态水球图 --》 echars结合echarts-liquidfill实现

如何实现动态水球图 --》 echars结合echarts-liquidfill实现

1&#xff09;项目中作为项目依赖&#xff0c;安装到项目当中(注意必须要结合echars) npm install echarts vue-echarts --save npm install echarts-liquidfill --save 2&#xff09;在需要使用水晶球的组件里引入liquidFill.js import echarts-liquidfill/src/liquidFill.js;…
阅读更多...
OpenCL memory object 之选择传输path

OpenCL memory object 之选择传输path

对应用程序来说&#xff0c;选择合适的memory object传输path可以有效提高程序性能。 下面先看一写buffer bandwidth的例子&#xff1a; 1. clEnqueueWriteBuffer()以及clEnqueueReadBuffer() 如果应用程序已经通过malloc 或者mmap分配内存&#xff0c;CL_MEM_USE_HOST_PTR是个…
阅读更多...
struts入门超详细

struts入门超详细

https://blog.csdn.net/yerenyuan_pku/article/details/52652262转载于:https://www.cnblogs.com/liuna369-4369/p/10870873.html
阅读更多...
RabbitMQ 从入门到精通 （一）

RabbitMQ 从入门到精通 （一）

目录 1. 初识RabbitMQ2. AMQP3.RabbitMQ的极速入门4. Exchange(交换机)详解4.1 Direct Exchange4.2 Topic Exchange4.3 Fanout Exchange5. Message 消息1. 初识RabbitMQ RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用来通过普通协议在完全不同的应用之间共享数据&a…
阅读更多...
接收并解析消息体传参、解析 json 参数

接收并解析消息体传参、解析 json 参数

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1.场景&#xff1a;postman 发送了一个 post 请求&#xff0c;如下&#xff1a; 2. 解析方式为用一个 vo 对象来接收 json。把 json 中的…
阅读更多...
OpenCL memory object 之 传输优化

OpenCL memory object 之 传输优化

首先我们了解一些优化时候的术语及其定义&#xff1a; 1、deferred allocation&#xff08;延迟分配&#xff09;&#xff0c; 在第一次使用memory object传输数据时&#xff0c;runtime才对memory object真正分配空间。 这样减少了资源浪费&#xff0c;但第一次使用时要慢一些…
阅读更多...
VBS使文本框的光标位于所有字符后

VBS使文本框的光标位于所有字符后

有时候在文本框里会显示一部分提示信息&#xff0c;用户在这些提示信息后面输入文本&#xff0c;但是将焦点设置于文本框后&#xff0c;光标总是在文本框的最前面&#xff0c; 用户输入的时候需要按"-->"键将光标移到最后才能输入&#xff0c;这样的操作很不爽。我…
阅读更多...
记录ionic 最小化应用时所遇的问题

记录ionic 最小化应用时所遇的问题

ionic3与ionic4最小化插件安装不一样&#xff1a; ionic3安装方法&#xff1a; $ ionic cordova plugin add cordova-plugin-appminimize $ npm install --save ionic-native/app-minimize4 并在app.module.ts中 注入依赖&#xff1a; import { AppMinimize } from ionic-nativ…
阅读更多...
解决 --- Docker 启动时报错：iptables:No chain/target/match by the name

解决 --- Docker 启动时报错：iptables:No chain/target/match by the name

问题&#xff1a;jenkins的docker containner启动失败&#xff0c;报错&#xff1a;failed programming external connectivity … iptables: No chain/target/match by that name” docker 服务启动的时候&#xff0c;docker服务会向iptables注册一个链&#xff0c;以便让dock…
阅读更多...
AMD OpenCL 大学课程

AMD OpenCL 大学课程

AMD OpenCL大学课程是非常好的入门级OpenCL教程&#xff0c;通过看教程中的PPT&#xff0c;我们能够很快的了解OpenCL机制以及编程方法。下载地址&#xff1a;http://developer.amd.com/zones/OpenCLZone/universities/Pages/default.aspx 教程中的英文很简单&#xff0c;我相信…
阅读更多...
第一篇 计算机基础

第一篇 计算机基础

1.什么是编程语言 python和中文、英语一样、都是一门语言&#xff0c;只要是语言&#xff0c;其实就库看成是一种事物与另一种事物沟通的介质。python属于编程语言&#xff0c;编程语言是程序员与计算机之间沟通的介质&#xff1b;中文和英文则是人与人之间沟通的介质。 2.什么…
阅读更多...
47.QT-QChart之曲线图,饼状图,条形图使用

47.QT-QChart之曲线图,饼状图,条形图使用

1.使用准备 在pro中, 添加QT charts 然后在界面头文件中添加头文件并声明命名空间,添加: #include <QtCharts> QT_CHARTS_USE_NAMESPACE 2.QChart之曲线图 绘制曲线图需要用到3个类 QSplineSeries: 用于创建有由一系列数据组成的曲线.类似的还有QPieSeries(饼图数据). Q…
阅读更多...
Docker 部署应用、jar 工程 docker 方式部署

Docker 部署应用、jar 工程 docker 方式部署

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. 把要部署的工程打成一个jar包。&#xff08;我的工程叫 gentle &#xff09; 打 jar 的方法&#xff1a;超简单方法&#xff1a; Int…
阅读更多...
流浪不是我的初衷 ... ...

流浪不是我的初衷 ... ...

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 或许&#xff0c;我从来就是一个习惯沉默的人 ... 或许&#xff0c;我从来就不善于倾述 ... 会有难过的时候&#xff0c;会有觉得累的…
阅读更多...
第二阶段冲刺（2）

第二阶段冲刺（2）

1、整个项目预期的任务量 &#xff08;任务量 所有工作的预期时间&#xff09;和 目前已经花的时间 &#xff08;所有记录的 ‘已经花费的时间’&#xff09;&#xff0c;还剩余的时间&#xff08;所有工作的 ‘剩余时间’&#xff09; &#xff1b; 所有工作的预期时间&#…
阅读更多...
VS2008+OpenCL环境配置

VS2008+OpenCL环境配置

1. 配置.cl文件支持: 1.1. 打开VS2008&#xff0c; 工具->选项->文本编辑器->文件扩展名&#xff0c;添加一个新的扩展名&#xff0c;指定编辑器为Microsoft Visual C 。这样在OpenCL文件中就能显示C的语法高亮了。 1.2. 配置OpenCL语法高亮 - 打开目录~\NVIDIA Corpo…
阅读更多...
最新文章

Copyright @ 2022~2023