[深入CSS|青训营笔记]

在了解 CSS 基本原理后，本节课进一步深入讨论，通过具体案例对于选择器的特异度展开讲解，在此基础上进一步引出 CSS 继承与布局的话题，对其定义及相关技术分别作出介绍。

• CSS 选择器的特异度
• CSS 继承
• CSS 求值过程解析
• CSS 布局方式及相关技术

CSS 选择器的特异度

普通按钮 主要按钮

.btn { display: inline-block; padding: .36em .8em; margin-right: .5em; line-height: 1.5; text-align: center; cursor: pointer; border-radius: .3em; border: none; background: #e6e6e6; color: #333; } .btn.primary { color:#fff; background:#218de6;}

CSS 继承

某些属性会自动继承其父元素的计算值，除非显示指定一个值(文本类属性大多可继承，盒子模型类属性大多不可继承）

例子：

This is a testof inherit

body {font-size: 20px;} p{color: blue;} em{color: red;}

• box-sizing:inherit显式继承关键词
• background-color:initial显式重置关键词（重置为初始值）

CSS 求值过程解析

DOM树、样式规则->flitering-声明值>cascading-层叠值>defaulting-指定值>resolving-计算值>formatting-使用值>constraining->实际值

CSS 布局方式及相关技术

• 确定内容的大小和位置的算法
• 依据元素、容器、兄弟节点和内容等信息来计算

常规流

• 行级、块级、表格布局、FlexBox、Grid布局。
• 盒模型：margin外边距，border边框，padding内边距。
• width：指定content box宽度；取值为长度、百分数、auto；auto由浏览器根据其他属性确定；百分数相对于容器的content box宽度。
• height：指定content box高度；取值为长度、百分数、auto；auto由浏览器根据其他属性确定；百分数相对于容器的content box高度；容器有指定的高度时，百分数才生效。
• padding：指定四个方向（上右下左）的内边距；百分比相对于容器宽度。
• border：指定容器边框样式、粗细和颜色。
• margin：指定元素四个方向的外边距；取值可以是长度、百分比、auto；百分比相对于容器宽度。（margin：auto水平居中）

浮动定位

• 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
• 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

绝对定位

• 绝对定位使元素的位置与文档流无关，因此不占据空间。
• 这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。