深入CSS（上）|青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天，今天深入学习了CSS，以下为今日笔记。

CSS选择器的特异度：

1. 如果有多个属性或者选择器，同时指向同一元素的CSS冲突 ，那么优先使用什么样式规则。那么便有了特异性的概念。特异性（specificity）视为得分/等级，能够确定最终将哪些样式声明应用于元素。

• 简单来说：CSS特异性就是CSS样式选择器的权重计算。从而让那些样式应用到元素上。每一种选择器都有自己的权重，依次是 行内样式 > ID选择器 > 类、属性、伪类 > 元素、伪元素选择器

CSS继承：

• 概念：有上下级关系的元素之间，上级元素的样式被下级元素所拥有，这个现象就是继承. 文本相关的属性和列表相关的属性会被继承,某些属性会自动继承其父元素的计算值，除非显式指定一个值。

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

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

• 显式继承：

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

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

CSS求值过程：

CSS布局方式及相关技术

1. 布局是什么：确定内容的大小和位置；依据元素、容器、兄弟节点、和内容等信息来计算。
2. 布局相关技术：

3.width:

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

4.height：

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

5.padding:

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

6.border:

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