360前端星学习笔记-深刻css(2)

时间 2019-12-10

标签前端学习笔记深刻 css 栏目 CSS 繁體版

原文原文链接

1、css继承

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

举例：html

<p>
  This is a <em>test</em> of <strong>inherit</strong>.
</p>
<style>
  p { color: #666; }
</style>

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

1.2 显示继承

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

html {
  box-sizing: border-box;
}

.some-widget {
  box-sizing: content-box;
}

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

2、初始值

当向上继承到顶点仍是没找到值的话，就须要初始值了。布局

CSS 中，每一个属性都有一个初始值
background-color 的初始值为 transparent 透明
margin-left 的初始值为 0
能够显式重置为初始值，好比 background-color: initial

3、CSS求值过程

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

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，因此折行时会重叠。code

如何解决这个问题呢？

把150%改为1.5orm

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