前端秘法进阶----css中那些不能说的秘密
一枕眠秋雨>o< 2024-06-12 12:33:04 阅读 70
目录
一.css属性计算过程
1.使用继承
2.使用默认值
3.面试题
二.css之包含块
一.css属性计算过程
1.使用继承
层叠冲突这一步完成后，解决了相同元素被声明了多条样式规则究竟应用哪一条样式规则的问题。
那么如果没有声明的属性呢？此时就使用默认值么？
答案并不是，此时还有第三个步骤，那就是使用继承而来的值。
例如：
```html
<div>
<p>Lorem ipsum dolor sit amet.</p>
</div>
```
```css
div {
color: red;
}
```
在上面的代码中，我们针对 div 设置了 color 属性值为红色，而针对 p 元素我们没有声明任何的属性，但是由于 color 是可以继承的，因此 p 元素从最近的 div 身上继承到了 color 属性的值。
这里有两个点需要我们注意一下。
首先第一个是我强调了是**最近的** div 元素，看下面的例子：
```html
<div class="test">
<div>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
```
```css
div {
color: red;
}
.test{
color: blue;
}
```
因为这里并不涉及到选中 p 元素声明 color 值，而是从父元素上面继承到 color 对应的值，因此这里是**谁近就听谁**的，初学者往往会产生混淆，又去比较权重，但是这里根本不会涉及到权重比较，因为压根儿就没有选中到 p 元素。
第二个就是哪些属性能够继承？
关于这一点的话，大家可以在 MDN 上面很轻松的查阅到。例如我们以 text-align 为例，如下图所示：
2.使用默认值
目前走到这一步，如果属性值都还不能确定下来，那么就只能是使用默认值了。
如下图所示：
前面我们也说过，一个 HTML 元素要在浏览器中渲染出来，必须具备所有的 CSS 属性值，但是绝大部分我们是不会去设置的，用户代理样式表里面也不会去设置，也无法从继承拿到，因此最终都是用默认值。
这就是关于 CSS 属性计算过程的所有知识了。
3.面试题
好了，学习了今天的内容，让我来用一道面试题测试测试大家的理解程度。
下面的代码，最终渲染出来的效果，a 元素是什么颜色？p 元素又是什么颜色？
```html
<div>
<a href="">test</a>
<p>test</p>
</div>
```
```css
div {
color: red;
}
```
实际上原因很简单，因为 a 元素在用户代理样式表中已经设置了 color 属性对应的值，因此会应用此声明值。而在 p 元素中无论是作者样式表还是用户代理样式表，都没有对此属性进行声明，然而由于 color 属性是可以继承的，因此最终 p 元素的 color 属性值通过继承来自于父元素。
二.css之包含块
一说到 CSS 盒模型，我们耳熟能详，甚至还能说出 border-box 和 content-box 这两种盒模型的区别。
但是一说到 CSS 包含块，有的懵了，什么是包含块？好像从来没有听说过。
如果你对包含块的知识一无所知，那么接下来的东西要好好听。
包含块英语全称为**containing block**，实际上平时你在书写 CSS 时，大多数情况下你是感受不到它的存在，因此你不知道这个知识点也是一件很正常的事情。但是这是确确实实存在的，在 CSS 规范中也是明确书写了的：https://drafts.csswg.org/css2/#containing-block-details
并且，如果你不了解它的运作机制，有时就会出现一些你认为的莫名其妙的现象。
那么，这个包含块究竟说了什么内容呢？
就是元素的尺寸和位置，会受它的包含块所影响。对于一些属性，例如 width, height, padding, margin，绝对定位元素的偏移值（比如 position 被设置为 absolute 或 fixed），当我们对其赋予百分比值时，这些值的计算值，就是通过元素的包含块计算得来。**
让我们从最简单的 case 开始看。
```html
<body>
<div class="container">
<div class="item"></div>
</div>
</body>
```
```css
.container{
width: 500px;
height: 300px;
background-color: skyblue;
}
.item{
width: 50%;
height: 50%;
background-color: red;
}
```
请仔细阅读上面的代码，然后你认为 div.item 这个盒子的宽高是多少？
div.item 盒子的 width 为 250px，height 为 150px。
这个答案确实是没有问题的，但是如果我追问你是怎么得到这个答案的，我猜不了解包含块的你大概率会说，因为它的父元素 div.container 的 width 为 500px，50% 就是 250px，height 为 300px，因此 50% 就是 150px。
这个答案实际上是不准确的。正确的答案应该是，div.item 的宽高是根据它的包含块来计算的，而这里包含块的大小，正是这个元素最近的祖先块元素的内容区。
因此正如我前面所说，**很多时候你都感受不到包含块的存在。**
包含块分为两种，一种是根元素（HTML 元素）所在的包含块，被称之为初始包含块（**initial containing block**）。对于浏览器而言，初始包含块的的大小等于视口 viewport 的大小，基点在画布的原点（视口左上角）。它是作为元素绝对定位和固定定位的参照物。
另外一种是对于非根元素，对于非根元素的包含块判定就有几种不同的情况了。大致可以分为如下几种：
- 如果元素的 positiion 是 relative 或 static ，那么包含块由离它最近的块容器（block container）的内容区域（content area）的边缘建立。
- 如果 position 属性是 fixed，那么包含块由视口建立。
- 如果元素使用了 absolute 定位，则包含块由它的最近的 position 的值不是 static （也就是值为fixed、absolute、relative 或 sticky）的祖先元素的内边距区的边缘组成。
前面两条实际上都还比较好理解，第三条往往是初学者容易比较忽视的，我们来看一个示例：
```html
<body>
<div class="container">
<div class="item">
<div class="item2"></div>
</div>
</div>
</body>
```
```css
.container {
width: 500px;
height: 300px;
background-color: skyblue;
position: relative;
}
.item {
width: 300px;
height: 150px;
border: 5px solid;
margin-left: 100px;
}
.item2 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 10px;
top: 10px;
}
```
首先阅读上面的代码，然后你能在脑海里面想出其大致的样子么？或者用笔和纸画一下也行。
公布正确答案：
怎么样？有没有和你所想象的对上？
其实原因也非常简单，根据上面的第三条规则，对于 div.item2 来讲，它的包含块应该是 div.container，而非 div.item。
如果你能把上面非根元素的包含块判定规则掌握，那么关于包含块的知识你就已经掌握 80% 了。
实际上对于非根元素来讲，包含块还有一种可能，那就是如果 position 属性是 absolute 或 fixed，包含块也可能是由满足以下条件的最近父级元素的内边距区的边缘组成的：
- transform 或 perspective 的值不是 none
- will-change 的值是 transform 或 perspective
- filter 的值不是 none 或 will-change 的值是 filter(只在 Firefox 下生效).
- contain 的值是 paint (例如: contain: paint;)
我们还是来看一个示例：
```html
<body>
<div class="container">
<div class="item">
<div class="item2"></div>
</div>
</div>
</body>
```
```css
.container {
width: 500px;
height: 300px;
background-color: skyblue;
position: relative;
}
.item {
width: 300px;
height: 150px;
border: 5px solid;
margin-left: 100px;
transform: rotate(0deg); /* 新增代码 */
}
.item2 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 10px;
top: 10px;
}
```
我们对于上面的代码只新增了一条声明，那就是 transform: rotate(0deg)，此时的渲染效果却发生了改变
可以看到，此时对于 div.item2 来讲，包含块就变成了 div.item。
我们再把 CSS 规范中所举的例子来看一下。
```html
<html>
<head>
<title>Illustration of containing blocks</title>
</head>
<body id="body">
<div id="div1">
<p id="p1">This is text in the first paragraph...</p>
<p id="p2">
This is text
<em id="em1">
in the
<strong id="strong1">second</strong>
paragraph.
</em>
</p>
</div>
</body>
</html>
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。