深入CSS

选择器的特异度

简言之就是选择器的优先级 继承：某些属性会自动继承其父元素的计算值，除非显式指定一个值 初始值：

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

  • background-color的初始值为transparent
  • margin-left的初始值为0

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

  • background-color：initial

布局

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

布局相关技术

常规流、浮动、绝对定位

1. 常规流：行级、块级、表格布局、FlexBox、Grid布局（width、height、padding、margin、border、overflow）

   块级VS行级

box：

块级：不和其他盒子并列摆放，适合所有的盒模型属性

行级：和其他行级盒子一起放在一行或拆开成多行，盒模型中的width、height不适用

块级元素：生成块级盒子

行级元素：生成行级盒子，内容分散在多个行盒（line box）中

inline-block本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行。

Flexibility

• 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。
• flex-grow 有剩余空间时的伸展能力
• flex-shrink容器空间不足时收缩的能力
• flex-basis没有伸展或收缩时的基础长度 以下代码为摘要 `

.box { display: flex; width: 800px; } .box > div { height: 200px; } .item-1 { width: 160px; flex: 2 1 0%; background: #2ecc71; } .item-2 { width: 100px; flex: 2 1 auto; background: #3498db; } .item-3 { flex: 1 1 200px; background: #9b59b6; } `

###float 浮动 ###

图文混排的文字环绕效果

position属性

static 默认值，非定位元素

relative：

1. 在常规流里面布局
2. 相对于自己本应该在的位置进行偏移

absolute：

1. 脱离常规流
2. 相对于最近的非static祖先定位
3. 不会对流内元素布局造成影响

以上是今天在青训营中学习的深入理解CSS的个人笔记，其中flexibility的知识是我之前只浅浅了解的，老师重点讲述了该内容，可再进行深入了解。