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

上一篇文章我们初步了解了CSS，下面就继续深入学习CSS的其他内容。

深入CSS

1. 选择器的特异度(Specificity)

<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>

2. 继承

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

3. 初始值

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

4. CSS求值过程

5.布局(Layout)

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

width

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

height

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

padding

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

10px（一个数）表示四个方向 10px 20px （两个数）分别表示上下和左右 10px 20px 10px 20px（四个数）分别表示上右下左（顺时针）

border

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

maigin

• 指定元素四个方向的外边框
• 取值为长度、百分数、auto
• 百分数相对于容器宽度

六、学习CSS的几点建议

• 充分利用 MDN 和 M3C CSS 规范
• 保持好奇心，善用浏览器开发者工具
• 持续学习，CSS新特性还在不断出现