【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海洋”,随时与鱼头互动。欢迎!衷心希望可以遇见你。
【Hello CSS】第六章-文档流与排版相关推荐
- [css] 什么是脱离文档流?有什么办法可以让元素脱离标准的文档流?
[css] 什么是脱离文档流?有什么办法可以让元素脱离标准的文档流? 文档流就是指元素在 HTML 文档中位置顺序决定排布的过程.HTML 元素有块级元素和行内元素,块级元素一个占一行,行内元素在一行 ...
- css三种定位都脱离文档流了吗,CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别...
1.代码 (1)示例代码1 CSS布局之脱离文档流详解--浮动.绝对定位脱离文档流的区别 .left { width: 300px; height: 500px; background: red; f ...
- CSS之布局(文档流)
文档流: <!DOCTYPE html> <html><head><meta charset="utf-8" /><title ...
- css盒子模型、文档流、相对与绝对定位、浮动与清除模型
一.CSS中的盒子模型 标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在混杂模式下,页面以一种比较宽松的向后兼容的方式显示.混杂模式通常模拟老式浏览器的行为以防止老站点无法工作. h ...
- 前端基础-CSS如何布局以及文档流,对于新手来说,特别有用
一. 网页布局方式 1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式 比如word,nodpad++等等 而网页的布局方式指的就是浏览器这款工具是如何对网页中的 ...
- (前端)html与css css 15、标准文档流
标准文档流 常用的Word文档就是一个经典的标准文档流,内容必须是从上往下,从左往右书写的,有一个光标控制,前面的大小或者内容发生变化,后面的内容会跟着发生一些位置变化. 制作的html网页就是一个标 ...
- css样式脱离标准文档流
标准文档流指的是元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排列方式.并最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素. 元素脱离标注文档流之后,将不再在标准流中占据空间, ...
- CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别
准确的说,float浮动属于半脱离文档流,1.float浮动跟position:absolute一样拥有脱离文档流的功能,但是float虽然脱离了文档流但是仍然会占据位置,其他的文本内容会按照顺序继续 ...
- css 图片换行_好程序员web前端学习路线分享CSS浮动-文档流篇
1.纯文本的排列. 文档流就像我们的文本内容一样,所有的文字都会紧挨着,一个个排列下来,如果到了边界,就会换一行排列.当然如果敲回车或者按下空格键一般都会认为是一个词间距,因为英文中每个单词之间是有距 ...
最新文章
- win2012服务器硬盘分区,Windows Server 2008/2012更改磁盘分区大小教程
- linux suse10虚拟机在静态IP局域网中如何设置桥接上网
- 2021年Q2:全球超大规模数据中心数量增至659个
- redis插件连接集群 shiro_Shiro经过Redis管理会话实现集群(转载)
- 在java中补零的作用是什么_浅谈Java中的补零扩展和补符号位扩展
- zigbee物联网模块标准:LTE标准Cat.1和nbiot无线通信模块差异
- 移动conda文件夹
- Python ——告白小程序,添加微信号(快来设置你的freestyle吧)
- android底部导航栏软件,三步搞定android应用底部导航栏
- iphone储存空间系统怎么清理_iPhone 储存空间里的“系统”项占用过多怎么办?...
- string的各种函数(系统学习)
- javaScript常见的五种数组去重(转载)
- 排序算法(天勤数据结构高分笔记)
- jdk1.8的新特性之--Rhion变为Nashorn
- Python实现快速大文件比较代码解析
- java 调用kettle ktr_java调用kettle数据库类型资源库中的ktr
- C#语言实例源码系列-异或算法加密解密
- 【项目】出库流程记录
- 【9种优化算法比较】CGO、SCA、GWO、CSA、SSA、HHO、WOA、PSO、TSO智能优化算法比较(Matlab代码实现)
- JDK 8 的安装报javac不是外部或内部命令
热门文章
- h5前端有php,【前端】为什么有些网站的页面地址,没有加上html或者php或者jsp的后辍名?...
- 国开大学计算机应用基础作业二,国家开放大学《计算机应用基础》形考作业二答案解析 (2)...
- php暂停循环,在特定数量的递归循环后,PHP停止执行
- leetcode414. 第三大的数
- redis——内存概述
- IOS内购流程从0-1手把手教会
- Python(3)-Pycharm基本使用技巧
- 《Python Cookbook 3rd》笔记(3.5):字节到大整数的打包与解包
- arm 开发工具比较(ADS vs RealviewMDK vs RVDS)
- 为什么年事已高的我还在编程?