CSS解析规则
- CSS对空格不敏感,因此每个样式后面都要加一个分号,不然会把写在后面的样式当成一个整体来解析,知道遇到分号为止。
- 最后一个属性的分号不是必须的
- 当浏览器遇见不认识的属性或值时,将忽略掉这个属性,继续解析后面的属性,这也是前端需要做浏览器兼容的原因之一
- 对于复合属性,只要其中一个值是错误的,整个属性都将不解析而被丢弃
- 最后一个CSS规则的大括号可以不闭合,注意,是对整个CSS模块而言的最后的一个大括号。
- 后代选择器中间必须加空格
- 换行会被解析为一个空格
- 关键字不可以用引号,否则被忽略
- 在多组选择器中,只要有一个选择器是错误的,其他的也不会执行
- 使用@import规则导入的外部样式表必须放在其他样式规则前面,否则@import会被忽略
替换元素与非替换元素
- 元素可分为替换元素和非替换元素
- 替换元素:是指浏览器根据元素的标签和属性来决定元素的具体内容,比如image中的src
- 非替换元素:其内容直接显示在客户端的元素称为非替换元素
属性值的计算规则
- 浏览器解析文档并构建文档树之后,会给文档中每一个元素的属性分配一个属性值,这个属性值会经过4个阶段才最终被确定。这四个阶段别分是:(1)指定值;(2)计算值;(3)使用值;(4)实际值。
- 继承:子元素的某些元素的属性值会继承父元素中对应属性的值
- 使用inherit继承:可继承或不可继承的属性都可以通过inherit来继承父元素的某个属性
可视化格式模型
- 盒子模型
- 可视化格式模型:把产生的所有盒子按照一定的规则摆放到页面上,即规定每个盒子该怎么去布局。
- 可视化格式模型规则了浏览器在媒介中应该如何去处理文档树
可视化格式模型中元素的布局
每个元素都会产生0个或多个矩形框(有写在占用原来位置的矩形框的同时漂浮到其他位置),影响这些矩形框的布局的因素有如下:
1. 框的大小以及框的类型:框的类型由display指定。我们常见块级元素和行内元素记忆行内块元素
2. 定位类型:定位类型无非3种,常规流、浮动和定位
3. 矩形框之间相互影响
4. 外部因素:注入可视区域的大小等
视口 (viewport)
- 视口也叫可视窗口,HTML默认宽度就是可视窗口的宽度
- 当可视窗口的尺寸小于文档渲染的页面大小时,客户端应该提供滚动机制
- 每个页面只有一个可视窗口,但一个可视窗口可以渲染多个页面(比如iframe嵌入的页面)
包含块
- 有时一个元素的位置和大小的计算都相对于一个矩阵,这个矩阵被称为“包含快”。包含块是一个相对概念,是所含子元素的父参照。
- 包含块不限制它里面元素的大小,也即允许包含的元素比自己大,超出的部分会溢出,而溢出的处理可以通过overflow属性来控制。
- 根目录的包含块是初始包含块,由客户端决定。
包含块的创建
从包含块的角度理解盒子的定位类型,可以理解为包谁创建了包含块,盒子(子元素)就当谁是参照。
1. 当定位值为fixed时,则包含块由视口创建
2. 当定位值为relative、static或没有设置定位属性,则包含块由最近的父元素或祖先元素创建
3. 当定位值为absolute时,则包含块由最近的定位值relative/absolute/fixed创建。如果没有定位的祖先元素,则包含块为初始包含块(具体由客户端或浏览器决定)
4. 当祖先元素是行内元素时,那么包含块取决于父元素或祖先元素的direction属性
控制框
块级元素和块框:
- 块级元素是在视觉上被格式化为块的元素。另外通过display也可以将一个元素转变成块元素,其中产生块元素的值为block/list-item/run-in/table
- 块级元素除了table以外都会形成一个主块框,这个主块框之包含一种类型的框,要么是块框要么是行内框。主块框会为子孙元素建立包含块,从而生成内容。
- 主块框参与块级格式化上下文(Block Formatting Context,简称BFC)
匿名块框
行内元素和行内框
行内元素是指那些不生成新的内容块是元素,内容在行内显示,通过display也可以将一个元素转变为一个行内元素。其中可以产生行内元素的值为inline/inline-table/run-in,行内元素会生成一个行内框。
匿名行内框
插入框(run-in)
插入框所在的元素会根据其后面的元素来确定它的类型应该是什么
1. 如果后面的元素是行内元素或行内块元素,则生成一个块框
2. 如果后面的元素是块级元素,则生成一个行内框
格式化上下文BFC、IFC
格式化上下文分为块格式化上下文和行内格式化上下文。块框参与块格式化上下文,行内框参与行内格式化上下文。
块格式化上下文BFC
子元素item浮动了会导致父元素无法自适应子元素的高度,当给父元素加了 /* overflow: hidden; */后,父元素的高度就是item的高度。
<style>
.box{
/* overflow: hidden; */
}
.item {
float: left;
width: 100px;
height: 100px;
background-color: azure;
}
</style>
<html>
<head>
<title>测试</title>
</head>
<body>
<div class="box">
<div class="item">hello world</div>
</div>
</body>
</html>
- overflow的原理:overflow是这样处理的,如果元素没有设置宽和高,那么就将盒子里所有元素加起的高度作为父盒子的高度。
- BFC的特点(主要)
- 同一个块格式化上下文中,块框垂直排列,margin被合并
- 一个块格式化上下文中,包含块里面的所有元素,但不包含创建了新块格式化上下文元素
- 当一个框创建了一个块格式化上下文,它将包括浮动元素
- 何时创建块格式化上下文
- 根元素(html)——— body呢?
- 浮动float不为none的元素
- 绝对定位元素postion为absolute、fixed的元素
- display不为block的元素
- overflow不为visible的元素
- 弹性盒子display为flex/inline-flex的元素
- 其他
折叠外边距
- 根元素html的外边距不折叠
- 不是兄弟元素,子元素和父元素垂直方向的外边距也会折叠
- 水平外边距不折叠
- 当有多个子元素时,第一个的margin-top和最后一个的margin-bottom会和父元素外边距折叠
- 其他