前言
学习和理解的过程越发觉得CSS的理解需要一个体系
知道什么是BFC之后，越发疑惑为什么要设计这个，过去也在在疑问，但是没能解决，看一些博客的时候也只是从现象级来说如何使用，没有从逻辑设计角度，CSS体系的角度进行思考和解释的。
CSS的内部设计也是不断在发展的，1 -> 2 -> 2.1 ... -> 3
感觉是逐渐完善和容易理解的
下面整理一下再次回顾的时候，可能更为合理的学习逻辑
理解逻辑
Visual Formatting Model
User agent就是我们的查看媒介，连续媒体，分页媒体，而 Virtual Formatting Model 就是在描述如何在上面进行展示
以下的Context以Web浏览器为主
浏览器解析HTML CSS 形成DOM && CSSOM，合成布局树,这个到布局树的过 -> 混淆了实现和Model
需要针对每个element来generates zero or more boxes according to the box model. The layout of these boxes is governed by:
- Box dimensions and type.
- Positioning scheme (normal flow, float, and absolute positioning).
- Relationships between elements in the document tree.
- External information (e.g., viewport size, intrinsic dimensions of images, etc.).
需要特别说的是
对于 In continuous media, the viewport is the viewing area of the browser window.
当要显示的内容小于viewport的时候
If the viewport is smaller than the size of the document then the user agent needs to offer a way to scroll to the parts of the document that are not displayed.
盒子
再者是盒子的产生，盒子的类型由display 进行决定
有以下几个重要概念
- priciple box 主盒子
- anonymous box
An anonymous box is created when there is not an HTML element to use for the box.
- inner box outer box
two-value syntax中
display:
The <display-outside> keywords specify the element’s outer display type, which is essentially its role in flow layout.
对于所在context 的呈现（不考虑 run-in）
就两个 block inline
The <display-inside> defines the type of formatting context that lays out its contents (assuming it is a non-replaced element).
对内部内容的flow管理和内容呈现(width/height marging padding ..实际上作用于这个盒子)
节选《CSS世界》
Positioning scheme
在盒子中的inner box就在决定如何布局，即把子元素放在什么样的context中
Introduction to formatting contexts
不仅有老生常谈的BFC，还有IFC，FFC，GFC
FC表示Fortmatting Context，对FC的理解可以看作是一个进行特定布局的单位，不同FC之间是不会进行影响的
前面的字母表示几种<display-inside>
Block Inline Flex Grid
其中 flow 对应Block，但是没有新的FC产生
flow-root对应产生新的FC的布局方式
还有个要说的 initial formatting context 整个网页默认开始是放在BFC中的，根html元素是最外层BFC的container box
注意在IFC中提到的行盒 Line box
在上述FC中的文档流，就是处于正常的文档流之中
一个元素如何呈现，从文档流的角度来看
- 和使用什么样的FC -> 使用什么样的flow组织元素
- 处于文档流的元素之间会相互影响
从文档流和FC的角度来看对元素的调整，我们有三种处理方式
- 让他在文档流中
- 让他跳出文档流，但存在于当前FC中
- 跳出文档流 && FC
1不多说，除了2 、3都是1
2 特别的是在说float
3 以absolute为例子，从文档流拿出，跳出当前FC
定位依据是nearest positioned ancestor(not static)，一直拿不到的话，就用html 这个 IFC
这里需要提一下containing block
fixed 就是 absolute的无脑版本 -> viewport（也要考虑一些except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec）
更多细节参考 postion
The stacking context
基于上面的方案，二维平面上的布局问题基本已经cover，那么z-axis上的呢？
The stacking context is a three-dimensional conceptualization of HTML elements along an imaginary z-axis relative to the user, who is assumed to be facing the viewport or the webpage. HTML elements occupy this space in priority order based on element attributes.
如果一个元素具有了stacking context，这个元素会作为一个层叠处理的独立单元，来管理其子元素的层叠关系
这个概念可以类比BFC理解，BFC处理的是排版问题
这个处理的是层叠问题
啥时候会创建呢？这里简单记录一些好记的
- Root element of the document (
<html>). - Element with a
positionvalueabsoluteorrelativeandz-indexvalue other thanauto. - Element with a
positionvaluefixedorsticky(sticky for all mobile browsers, but not older desktop). - Element that is a child of a flex container, with
z-indexvalue other thanauto.
这里例子简单易懂
In this example, every positioned element creates its own stacking context, because of their positioning and z-index values. The hierarchy of stacking contexts is organized as follows:
- Root
- DIV #1
- DIV #2
- DIV #3
- DIV #4
- DIV #5
- DIV #6
CSS如何学习 - 大漠
而且经历两年的发展，有了CSS2.0版本，在这之后，还经历了CSS 2.1和CSS 2.2版本的迭代。同时CSS 2.1规范指导Web开发者写CSS很多年。直到后面，也就是大约2015年，W3C规划的CSS工作小组发现CSS发展的越来越快，有关于CSS方面的特性增加了不少，而且不同的特性推进速度都有所不同。也就这个时候，W3C的CSS工作小组为了能更好的维护和管理CSS的特性，该组织决定不在以CSS的版本号，比如我们熟悉的CSS1.0、CSS2.0、CSS2.1这样的方式来管理CSS。而是将每个CSS功能特性拆分成独立的功能模块，并且以Level 1, Level2，Level 3等方式来管理CSS规范中的特性：
客户端渲染页面时，除了选择器权重会影响元素样式规则之外，还有样式来源也会影响元素样式规则。就CSS规则的来源而言，规则主要来自三个地方：
- 编写者规则（Author） ：这是HTML文档声明的CSS。也就是我们前端开发人员编写的，根据文档语言（比如HTML）约定给源文档指定样式表。这也是我们能够控制的唯一来源
- 用户（User） ：这是由浏览器的用户定义和控制的。不是每个人都会有一个，但是当人们添加一个时，通常是为了覆盖样式和增加网站的可访问性。比如，用户可以指定一个售有样式表的文件，或者用户代理可能会提供一个用来生成用户样式（或者表现得像这样做了一样）的界面
- 用户代理（User-Agent） ：这些是浏览器为元素提供的默认样式。这就是为什么
input在不同的浏览器上看起来略有不同，这也是人们喜欢使用CSS重置样式，以确保重写用户代理样式的原因之一
?想法
对于一个较为复杂的知识，在整个知识体系中理出一条逻辑，知识学习的过程就像在脑海中形成的知识树不断添加一样，他们之间是相互解释和促进的。
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！