[ # 深入CSS | 青训营笔记]

这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天

深入CSS

课程重点

1. css选择器的特异度

2. css继承

3. css求值过程解析

4. css布局方式及相关技术

一、选择器的特异度

哪条规则生效？ 1.不同选择器可能会选择同样的一个样式，这就涉及到了选择器的优先级问题

2.根据特异度值来决定的（选择器的特殊程度）

例子：

二、继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值。（继承父元素）  

1.显式继承 通配选择器＊

所有元素都从父级继承

初始值

css中，每个属性都有一个初始值

background-color的初始值为transparent

margin-left的初始值为0

可以用initial关键字显式重置为初始值

background-color:initial

三、ss求值过程

元素样式如何被计算出来的

计算机用css转化出的值 计算值

（容易 1.2em he实际行高是什么

四、css布局方式及相关技术

1.布局(layout)是什么

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

2.布局相关技术

常规流  （行级 块级 表格布局  FLexbox Grid布局）

             浮动 

             绝对定位

3..css的基础 盒模型

容器

宽度  高度 内边距

边框 指定容器边框样式 粗细 颜色 

（当四个边框颜色不同时，

外边距 盒子距离容器该留有的距离 

box border 包含padding的高度和宽度

border box 

overflow

当内容超越，可选择设置超出内容的显示方式。