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

---

本次课程重点内容

• 深入了解CSS

选择器特异度

CSS选择器优先级最高到最低顺序为：!important、行内样式、id选择器、类选择器、标签选择器、子选择器（ul<li）、后代选择器（li a）、伪类选择（a:hover,li:nth-child)。

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

注意：继承得来的属性，其优先级最低。

当元素从元素父级一层一层往上找，还是没有找到有一个CSS指定一个值时，这种情况就会用到初始值这个概念。

布局（Layout）

布局是什么？

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

布局相关技术

盒模型

• width

• height 盒模型内部概念图

• padding
  指定元素四个方向的内边距
  百分数相对于容器宽度
  设置一个值（四周）设置两个值（上下，左右）设置四个值（上，右，下，左）

• border
  指定容器边框样式、粗细和颜色

• margin margin:auto：水平居中
  margin collapse: 外边距折叠
  box-sizing:border-box:将border和padding数值包含在width和height之内

• overflow
  visible:默认值，超出部分依就显示
  hidden:超出部分截掉
  scroll:超出部分可以滚动
  

overflow-wrap:break-word : 超出部分自动换行

块级、行级

• display属性

行级排版上下文 块级排版上下文

Flex Box（弹性盒子）

justify-content：关于主轴上的对齐方式

align-items：关于侧轴上的对齐方式

Flexibility

Grid 布局

先画网格线，再放入元素

position属性

position:relative(相对定位) position:absolute(绝对定位)