阅读 69

360前端星计划-深入css(2)

课程ppt

一、继承

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

举例:

<p>
  This is a <em>test</em> of <strong>inherit</strong>.
</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的父级articlefont-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这个属性,他会继承向上找父级<article>line-height:150%,是个相对值,所以要乘<article>line-height计算值,在向上继承<html>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。

文章分类
前端
文章标签