CSS选择器特异度
选择器特殊的程度，越特殊优先级越高
计算id，类，标签，优先级依次递减
CSS继承
- 某些属性会自动继承其父元素的计算值，除非显式制定一个值 宽度不可继承，字体颜色可以继承
- 显式继承（用于不可继承的属性） 一开始在最前面输入* 例子：*{ box-sizing:inherit; } 初始值 每个属性都有一个初始值
- background-color的初始值为transparent
- margin-left的初始值为0 可以使用initial 关键字显式重置为初始值
- background-color:initial 过程
- 根据DOM树和样式规则进行筛选，用以下条件进行筛选：选择器匹配、属性有效、符合当前media，得到声明值（1个元素的某属性可能有0到多个声明值）
- Cascading:按照来源、！important 、选择器特异性、书写顺序等选择出优先级最高的一个属性值，得到层叠值
- 当层叠值为空时，使用继承或初始值（defaulting)
- 经过cascading、defaulting 之后，保证指定值一定不为空
- 转换：将一些相对值或关键字化为绝对值，如‘em转为px ，相对路径转为绝对路径，得到计算值
- 计算值进一步转换，比如关键字、百分比转为绝对值，得到使用值
- 将小数像素值转为整数，得到实际值（渲染时实际生效的值） 布局
- 确定内容的大小和位置的算法
- 依据元素、容器、兄弟节点和内容等信息计算 相关技术
- 常规流：行级、块级、表格布局、Flexbox、Grid布局
- 浮动
- 绝对定位 width
- 指定content box宽度
- 取值为长度、百分数、auto
- auto由浏览器其他属性确定
- 百分数相对于容器的content box宽度
height
- 指定content box 高度
- 取值为长度、百分数、auto
- auto取值由内容计算而来
- 百分数相对于容器的content box高度
- 容器有指定高度时，百分数才生效 peddling
- 指定元素四个方向的内边距
- 百分数相对于容器宽度 Border
- 指定容器边框样式、粗细、颜色
- 三种属性（width、style、color）四个方向（top、right、bottom、left） margin
- 指定元素四个方向的外边距
- 取值可以是长度、
- 百分数相对于容器宽度
- 使用margin:auto水平居中 块级VS行级 块级
- 不和其他盒子并列摆放
- 适用所有的盒模型属性
- 块级元素生成块级盒子：body,article,div,main,section,h1-6,p,ul,li等
- display：block 行级
- 和其他行级盒子一起放在一行或拆开成多行
- 盒模型中的width 、height不适用
- 生成行级盒子；内容分散在多个行盒中：span,em,strong,cite,code
- display：inline Display属性
block块级盒子
In-line行级盒子
In-line-block本身是行级，可以放在行盒中;可以设置宽高；作为一个整体不会被拆分成多行 None排版时完全被忽略
常规流
- 根元素、浮动和绝对定位的元素会脱离常规流
- 其他元素都在常规流之内
- 常规流中的盒子在某种排版上下文中参与布局
行级排版上下文
- 只包含行级盒子的容器会创建一个IFC
- 排版规则：1.盒子在一行内水平摆放 2.一行放不下时，换行显示 3.text-align 决定一行内盒子水平对齐 4.vertical-align决定一个盒子在行内的垂直对齐 5.避开浮动元素
块级排版上下文 某些容器会创建一个BFC 规则
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会与外面的合并
- BFC不会与浮动元素重叠 FLex Box 一种新的排版上下文 可以控制子级盒子
- 摆放流向、顺序
- 盒子宽度和高度
- 水平和垂直方向对齐
- 是否允许折行 Flexibility
- 可以设置子项的弹性 ：容器有剩余空间，会伸展；空间不够会收缩
- Flex-grow有剩余空间的伸展能力
- Flex-shrink容器空间不足收缩的能力
- Flex-basis没有伸展或收缩的基础长度 display :grid 使元素生成一个块级的grid容器
划分网格 Columns列，rows行
float浮动
文字环绕的效果
Position属性
static默认值，非定位元素
relative相对自身原本位置偏移，不脱离文档流
absolute绝对定位，相对非static祖先元素定位
fixed相对于视口绝对定位
- 在常规流里布局
- 相对于自己本应该在的位置偏移
- 使用top,left、bottom、right设置偏移长度
- 流内其他元素当它没有偏移一样布局 absolute
- 脱离常规流
- 相对于最近的非static祖先定位
- 不会对流内因素布局造成影响
总体来说，CSS属于前端中重要的内容。初学者在大致了解CSS的基础知识后，还应该多练习。在实践中发现自己掌握不牢固的部分。对一些容易模糊的概念，如块级排版和行级排版也要学会区分，避免在实际运用中出现问题。
以下是对初学者的建议
第一步：学习HTML 要自学CSS之前最重要的一点就是要熟悉HTML网页编码。HTML是一种基本的网页编码语言，它是CSS的基础，所以在学习CSS之前，最好先来学习HTML。 HTML是一种相对简单的网页编码语言，可以通过使用电脑上的学习软件或者在网上查看网页教材来自学HTML。学习完HTML之后有助于更好的掌握CSS，并更有效的应用CSS进行网页开发。
第二步：学习CSS基础 学习HTML之后，就可以开始学习CSS。CSS是一种样式语言，可以用来控制HTML元素的外观和样式，它们是网页的重要组成部分，对网页的布局和装饰起着重要作用。学习CSS基础需要大量的练习，才能掌握熟练，常用的练习方法有： 浏览参考资料：浏览CSS相关的书籍、论坛和教程资料，了解CSS的基本知识和元素。 尝试编写代码：尝试编写一些CSS代码，比如设置字体、颜色、边框、边距等，熟悉CSS的基本语法和属性。 尝试实际应用：将学习到的CSS实际应用到网页上，运用自己学习的知识，对网页进行装饰和布局。
第三步：学习高级CSS 学习完CSS基础之后，可以尝试学习更高级的CSS。这类CSS可以帮助你更好地控制HTML元素的外观样式，使你的网页更加精致。更高级的CSS包括： CSS动画：可以使用CSS制作旋转、缩放等动画。 CSS布局：使用CSS来设置页面的布局，可以轻松控制文字和图片的排版。 CSS响应式设计：使用CSS来设计响应式网页，从而使网页在不同分辨率的设备上都能正常显示。 CSS3：CSS3是一种新的网页样式语言，可以制作出更高级的动画和布局。 综上所述，要自学CSS，最重要的是要先学习HTML，然后开始学习CSS的基础，最后尝试学习更高级的CSS，不断练习，才能够真正掌握CSS。
