360前端星计划-深入css（2）

课程ppt

一、继承

某些元素会自动继承其父元素的计算值

举例：

<p>
  This is a <em>testem> of <strong>inheritstrong>.
p>
<style>
  p { color: #666; }
style>
复制代码

上述代码，em标签里的color就会继承父元素的color，为color: #666。

显示继承

* {
  /* 给box-sizing设置显示继承 */
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

.some-widget {
  box-sizing: content-box;
}
复制代码

html根元素下所有元素（除独自设置：如.some-widget）的box-sizing都是border-box。

二、初始值

当向上继承到顶点还是没找到值的话，就需要初始值了。

1. CSS 中，每个属性都有一个初始值
2. background-color 的初始值为 transparent 透明
3. margin-left 的初始值为 0
4. 可以显式重置为初始值，比如 background-color: initial

三、CSS求值过程

1. filtering：通过样式规则为dom树种的各个元素进行选择器匹配，匹配有效的属性值，匹配当前媒体查询media等等,比如当用户打印时，加载media是打印样式的css样式，生成的声明值可能会有一个或多个，比如一个p标签匹配到了两个选择器 p{ font-size: 16px },p.text{ font-size: 1.2em }
2. cascading：用过对比选择器的特异性，选出优先级最高的一个选择器，生成层叠值，比如1.2em
3. defaulting：判断层叠值是否为空，如果为空，使用继承或者初始值，生成指定值，保证指定值一定不为空。
4. resolving：将相对值计算成绝对值，比如em转化成px，相对路径转化成绝对路径等，生成计算值( computed value ：在浏览器不进行实际布局时，得到的具体的值)
5. formatting: 有些值不能静态计算出来的，比如有些值需要渲染之后才能获得，如vh，vw，百分比这种，得到使用值
6. 将小数像素值转为整数，比如width：400.2px,转化成width: 400px,生成实际值，css求值完毕

3.1 举个栗子?

求strong标签里的font-size值?

<article>
  <p>卡尔斯巴德洞窟（Carlsbad Caverns）是美国的一座国家公园，
  位于新墨西哥州东南部。游客可以通过天然入口徒步进入，也可以
  通过电梯直接到达<strong>230米strong>的洞穴深处。p>
article>

<style>
body {
  margin: 0;
}
article {
  font-size: 14px;
  line-height: 1.6;
}
p {
  font-size: 1.1em;
}
style>
复制代码

匹配strong标签的选择器，没有，则使用继承值或者初始值，strong标签的父级是p标签，相对值为font-size: 1.1em，因为font-size: 1.1em是相对值，不能直接渲染到页面里，找到p的父级article的font-size: 14px，然后将相对值转化为绝对值font-size:15.4px，在将绝对值转化成整数值font-size:15px，求出strong标签里font-size: 15px。

3.2 再来一个栗子?

下面这坨代码有没有什么问题？

<article>
  <h1>卡尔斯巴德洞窟h1>
  <p>卡尔斯巴德洞窟（Carlsbad Caverns）是美国的一座国家公园，
  位于新墨西哥州东南部。游客可以通过天然入口徒步进入，也可以
  通过电梯直接到达230米的洞穴深处。p>
article>

<style>
body {
  margin: 0;
}
article {
  line-height: 150%;
}
h1 {
  font-size: 40px;
}
p {
  font-size: 14px;
}
style>
复制代码

演示：

bug：h1中的文字会重叠

由于h1中没有line-height这个属性，他会继承向上找父级

的line-height:150%，是个相对值，所以要乘

的line-height计算值，在向上继承的line-height:16px(浏览器默认),所以最后的实际值是24px，本身字体是40px，所以折行时会重叠。

如何解决这个问题呢？

把150%改成1.5

对于百分数，会在resolving中转换，把150%转化成24px，但是设置行高为1.5，他会在resloing找到article的line-height为1.5，然后在formatting中将1.5乘以自己ling-height得到60px。