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

笔记大纲

选择器的特异度
继承
初始值
布局
个人总结
参考资料

详细介绍

选择器的特异度

css选择器的级别数

id选择器：1
（伪）类：2
标签：2 分析如下代码：
两个button标签，分别给他们添加样式，一个为普通按钮，一个为主要按钮,想要实现如下图所示样式，该怎么实现呢？

普通按钮添加class: btn,主要按钮添加class: btn primary,这样在类btn中写的样式就是所有拥有class：btn的按钮所共有的,此时.btn的级数为2,此时普通按钮和主要按钮都有了.btn的样式。.btn .primary的选择器级数是2+2 = 4,这就意味着有着class： btn primary 的主要按钮,在.btn样式下,再添加.btn .primary中的样式，这样就实现了普通按钮和主要按钮的效果。

<button class="btn">普通按钮</button>
<button class="btn primary">主要按钮</button>
<style>
  .btn {
    display: inline-block;
    padding: .36em .8em;
    margin-right: .5em;
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
    border-radius: .3em;
    border: none;
    background: #e6e6e6;
    color: #333;
  }
  .btn.primary {
    color: #fff;
    background: #218de6;
  }
</style>

继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值
下图就是一个显式继承的例子，html的box-sizing样式首先继承了*的box-sizing: inherit,但是html中添加了显式样式box-sizing： border-box,此时html的box-sizing样式为box-sizing： border-box,.some-widget首先也继承父元素的box-sizing,但是.some-widget添加了显式样式box-sizing: content-box,此时.some-widget的样式就是box-sizing: content-box。

图片来源:字节跳动青训营理解CSS课程

初始值

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

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

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

background-color:initial

布局（Layout）

布局是什么？

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

布局相关技术

浮动：float：绝对定位：position: absolute display:block等

图片来源:字节跳动青训营理解CSS课程

width

指定content box 宽度
取值为长度、百分数、auto
auto由浏览器根据其他属性确定
百分数相对于容器的content box宽度

height

指定content box的高度
取值为长度、百分数、auto
auto取值由内容计算得来
百分数相对于容器的content box高度
容器有指定的高度时，百分数才生效

padding

指定元素四个方向的内边距
百分数相对于容器宽度

margin

指定元素四个方向的外边距
取值可以是长度、百分数、auto
百分数相对于容器的宽度

使用margin：auto水平居中示例代码

<div></div>

<style>
  div {
    width: 200px;
    height: 200px;
    background: coral;
    margin-left: auto;
    margin-right: auto;
  }
</style>

效果：

定义一个div,给div设置长度、宽度、颜色，使用margin-left：auto，margin-right：auto让这个盒子的外边距水平居中。

flex Box

flex Box是什么一种新的排版上下文
他可以控制子级盒子的：

摆放的流向
摆放顺序
盒子宽度和高度
水平和垂直方向的对齐
是否允许拆行

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>
<style>
  .container {
    display: flex;
    border: 2px solid #966;
  }

  .a, .b, .c {
    text-align: center;
    padding: 1em;
  }

  .a {
    background: #fcc;
  }

  .b {
    background: #cfc;
  }

  .c {
    background: #ccf;
  }
</style>

效果：

在container中放三个盒子A、B、C，设置container的flex属性，那么在container中的三个盒子会按照flex默认布局样式摆放，横向并排摆放。

flex-direction属性

justify-content属性

css.10.png

aline-items属性

Flexibility

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

个人总结

重点

选择器特异度
继承
布局（flex布局）

难点

布局（flex布局）

思考

通过本节课的学习，我对选择器的特异度、继承、初始值、布局有了充分的了解，可以熟练地在项目开发中使用这些知识，尤其是flex布局，它可以更快、更容易地进行页面布局，合理地摆放元素的位置。除此之外，在项目卡中应该思考何时使用，怎么使用，如何高效地使用本节课学到的知识。

参考资料

来源自：字节跳动青训营理解CSS课程

理解CSS | 青训营笔记