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

深入CSS

选择器的优先级

CSS可以写很多选择器，样式，不同的选择器会选择到同一个元素，这就涉及到选择器的优先级问题。

<button class="btn">普通按钮</button>
<button class="btn primary">主要按钮</button>
<style>
  .btn{
  }
  .btn.primary{
  }
</style>

继承

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

<p>This is a <em>test</em> of <strong>inherit</strong></p>

<style>
  body {
    font-size: 20px;
  }
  p {
    color: blue;
  }
  em {
    color: red;
  }
</style>

string并没有进行设置，但是继承了p标签的blue。一般来说CSS中和文字相关的都可以继承。

显式继承

* {
  box-sizing: inhert;
}
html {
  box-sizing: border-box;
}
.some-widget {
  box-sizing: content-box;
}

初始值

CSS中，每个属性都有一个初始值
可以使用initial关键字显式重置为初始值
- background-color:initial

CSS的求值过程

注意计算值和使用值，在继承时，继承的是计算值。

布局是什么

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

布局相关技术

常规流：行级，块级，表格布局，FlexBox，Grid布局
浮动
绝对定位盒模型：

border: 三种属性四个方向 border: 1px solid #ccc;

注意看设置了box-sizing: border-box后，width就是代表了原本的width加上padding和border。

块级和行级的摆放方式

块级：不和其他盒子并列摆放，使用所有的盒模型属性
行级：和其他行级盒子一起放在一行或拆开成多行，盒模型中的width、height不适用

Flex Box是什么

一种新的排版上下文
可以控制子级盒子的：
- 摆放的流向（左右上下）
- 摆放顺序
- 盒子宽度盒高度
- 水平和垂直方向的对齐
- 是否允许折行最简单的flex box布局

flex-direction

row
row-reverse
column
column-reverse 主轴：➡️ 侧轴：👇
justify- content
align-items

Flexibility

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

grid布局

display: grid

float浮动

只需要知道是实现文字环绕的即可

<style>
  img {
    float: right;
  }

  p {
    font-size: 20px;
    line-height: 1.8;
  }
</style>

position属性

relative没有脱离常规流
absolute 脱离了常规流，不会对流内元素布局造成影响
fixed 也脱离了常规流，但是相比之下它是相对于窗口的

<nav>
  <a href="#">首页</a>
  <a href="#">导航1</a>
  <a href="#">导航2</a>
</nav>
<style>
  nav {
    position: fixed;
    line-height: 3;
    background: rgba(0, 0, 0, 0.3);
    width: 100%;
  }

上下滚动时仍然把导航栏显示

深入CSS ｜ 青训营笔记