CSS Grid布局:独立源与网格的层叠顺序

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

最近一直在学习CSS Grid布局相关的知识与使用,虽然目前浏览器对其支持度还并不十分的友好,但我始终相信有一天,浏览器会支持,Web人员也迟早有一天能在自己的布局中使用上CSS Grid。前几天花了几节内容,介绍了CSS Grid布局中的概念测试环境创建单元格合并单元网格线创建网格区域相关的内容。可以说这些内容都是CSS Grid布局最基础和最常用的相关知识,当然,除了这些之外,还会有其他相关的知识,今天要与大家一起探讨的就是有关于CSS Grid Layout中的独立源与网格层叠顺序。

浏览器渲染原理

Web在浏览器中的渲染是非常复杂的,如果需要整明白浏览器是如何渲染Web页面,那需要对浏览器的渲染原理有足够的了解。如果你不了解浏览器是如何渲染Web页面,个人建议您先阅读Tali GarsielPaul Irish共同为大家写的一篇教程《浏览器的工作原理:新式网络浏览器幕后揭秘》。如果觉得这篇文章实在太长了,看得有点晕呼,你也可以阅读itwriter博客园中发表的一篇读后感《浏览器的渲染原理简介》,帮助你更好的理解。

当然,有关于浏览器渲染原理并不是本文的重点,我们回到要讲的内容上来。先说说CSS Grid布局中的独立源。

网格布局中的独立源

这里说的独立源,指的并不是源码。而是Web页面中的内容源。大家都知道,在Web中所说的源基本上指的是内容源,但对于我们来说并不关注他的内容是什么,而更关注的是他的HTML结构是什么?说得简单点,源指就是HTML结构。

在Web页面中,HTML结构是按照一种类似于树形结构的方向,根据从上到下,从前到后的顺序,依次出现。那么把这些HTML的标签元素称为源,而这些源的出现的顺序被称为内容流。

或许理论上说,有点晕呼,我们来看一个简单的示例,然后配合一些图片来说明这个问题,或许大家更易理解与接受。一图胜千言万语。

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css3/source-independence-and-layering-items.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部