《CSS世界》学习感想（持续更新）

参加工作以后，发现对于css的认知水平不够，知识储备也有待补充。所以有空的时候，打算把吃灰的书都拿起来读一读，以求提升一下。

2021.9.20

更新了对css的一些认知

要善用css的流特性。之前可能都直接用css3中方便快捷的flex布局比较多，觉得css2的布局都相对“原始”和“繁杂”。所以在不熟练css2的情况下，比如写一个占满一行的块级盒子，常常是写了height，还得给它加一个"width:100%"，这种写法就很多余，说明了对流布局的认识不够，使用不够熟练。此外，设置了width的话，元素的流动性会丧失，没有了例如块级盒子自动占据一行等特性。

css远比想象中要复杂。以前我写css，遇到问题就看一看文档最简略的部分。但实际上，css是很复杂的，需要去查看文档中更为深入的细节，才能搞清楚。甚至有的行为，连文档也未必是对的，需要实践出真知。复杂如，IE浏览器之所以不支持display:list-item，是因为list-item元素会生成一个“标记盒子”，用于放置列表项的圆点或者项目符号，而IE浏览器也许恰好不能创建这个盒子，所以才不支持这种display值。复杂又如，当给非定位元素的宽高设置百分比时，这里的百分比参照值不会将父元素的padding也计算入内，而如果是给定位元素的宽高设置百分比时，会将父元素的padding计算入内，这些都是细节。

box-sizing的理解

以前对于box-sizing属性的理解，还停留在死记硬背的阶段：设定好width的前提下，当值为content-box时，添加padding等值会让盒子“向外”撑大，内容区域不会被挤占；当值为border-box时，添加padding等值不会让盒子“向外”撑大，但是内容区域会被挤占。

这本书里面提到了对box-sizing更准确的理解，这个属性应该解读为“改变width的作用细节”，当box-sizing：content-box时，则设置的width是限定content的，即内容区域的，所以content盒子的宽度就是width；当box-sizing：border-box时，设置的width是限定border，即边框宽度的，所以border盒子的宽度就是width；当box-sizing：padding-box时同理。所以，“width的作用细节”被改变了，自然设置width、padding、border时会出现不同的效果了。

巧用max-width

手写下拉框组件时，如果想要做出一个比较“弹”的效果，会考虑到用过渡动画。但，一般反应都是让width变化，如从0变到100px。但往往内容的高度是不确定的，我希望是能从0变到auto，让它自适应。

遗憾的是，auto不是一个值，而是一个关键字，0和auto之间不能进行计算，故也无法添加过渡动画。所以，max-width出场了。可以设置过渡的对象为max-width，让max-width从0过渡到600px（足够大的一个值），无论内容的高度怎么变，只要还在0-600px的范围内，都能够完全显示出来。另外有一个需要注意的地方，阈值600px需要根据实际情况而定，如果设置过大比如实际上仅需要0-600px但却设置了0-999px，则反向过渡动画从999px变回600px的过程中，实际页面不会有任何变动，所以会给人一种“动画延迟”的感觉，影响体验。

幽灵空白节点

在H5文档声明中，内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”一样，这个节点永远透明，不占据任何宽度，看不见也无法通过脚本获取，但是确实真实存在的。规范中，称这个节点为“strut”，这个节点其实也是一个盒子，是一个假想盒，是一个存在于每个行框盒子前，同时具有该元素的字体和行高属性的0宽度的内联盒。书中关于这个盒子的存在作了证明，代码和效果如下。

按道理来说，没设置宽度，是不应该有内容呈现的，但是页面却出现了有高度的div，说明确实有“幽灵空白节点”。

    <div><span></span></div>div {background-color: rebeccapurple;}span {display: inline-block;}

2021.10.7

居中样式中“margin：auto”的作用

margin属性的auto值具有计算意味，它会计算元素对应方向应该获得的剩余间距的大小。但是触发它的计算需要有一个前提条件，那就是元素需要具有对应方向的自动填充特性。

举个例子。当writing-mode为左到右的水平流动时，我们给定宽（不大于父盒子宽度）的块级盒子设置margin：0 auto，则剩余间距会被左右方向等分，它的左右侧外边距是相等的。同理，如果给左侧设置了外边距，右侧设置了auto，那剩余间距减去左侧所设置的外边距就是右侧的外边距了。

那，为什么设置margin：auto auto，不能让盒子垂直水平居中呢？这就需要知会触发auto值计算的前提条件了。举个例子，比如盒子是水平流动的时候，那给水平方向的margin设置auto，auto才会进行计算，因为此时盒子在垂直方向不具备流动性，所以垂直方向的margin：auto是不生效的。

绝对定位下，设置四个方位为0 + margin：auto，盒子能垂直水平居中的原因

代码如下：

当绝对定位下设置了四个方位，则子盒子有了延展性，会自动填满父级元素的可用尺寸。

但因为子盒子有了宽高的限制，无法填满。此时，margin：auto就会对剩余间距进行了计算，因为垂直方向、水平方向都是auto，所以子盒子在两个方向上同时居中了。

clear：left和clear：right的作用

没什么用，可以直接用clear：both替代。因为clear属性设置了left后，不会移动到左侧的浮动的元素的下面，而对后面的元素不会产生影响，所以无论设置clear：right与否，都不会产生任何更多的效果，反之同理。所以直接使用clear：both即可。

line-height和vertical-align

书中关于这俩属性的内容很长很长，我从一开始的“就这？”，到后面的一头雾水，云里雾里。感觉没有深入使用这俩属性的经历，属实有点难懂，也终于明白了为什么之前有同事单单分享line-height这个属性，就能分享50分钟了，因为这俩属性确实有很多可以讨论的地方。

其中有一些印象比较深的点：

x字母在css中的作用。小写字母x的底部就是内联元素基线的位置。x-height，即小写x字母的高度，等于内联元素基线到中线的距离。
内联元素的高度主要受line-height影响，也受vertical-align影响。
用不同的字体（font-family）也会影响内联元素的垂直排布。

2021.10.7

设置overflow：hidden后，其实盒子内容还是可以“移动”的

在看锚点定位章节的时候，才知道原来overflow：hidden只是隐藏了溢出的内容以及隐藏了滚动条，但是滚动是依然存在的。发生锚点定位的时候，盒子内容是会滚动的。

绝对定位会改变盒子的display属性

以前就知道绝对定位能让盒子块状化，但不知道更深入的细节，比如display属性是会真真实实被修改成block，如图，原来span的display为inline，设置position：absolute后，变为了block。

2021.10.17

无依赖的absolute绝对定位

我是第一次知道这个概念。以前学习绝对定位的时候，有一个口诀叫做：子绝父相，即子元素设置绝对定位的时候，其父元素一般需要设置相对定位。

但我不清楚，如果绝对定位元素没有设置任何left/top/right/bottom属性，并且其祖先元素全部都是非定位元素时的效果。这种情况称为无依赖的绝对定位。

无依赖的绝对定位有相对性和脱离流的特性。即它的定位是相对于原来自身在流中的位置的，但又不像相对定位那样占据原来的位置。可以利用这两个特性实现一些奇特的效果。

absolute的流体特性

绝对定位元素具有流体特性，但是有一个前提对立方向同时发生定位。即，比如绝对定位的元素同时设置了left和right属性，则水平方向上它具有了流动性，垂直方向同理。

所以这也就解释了为什么之前说“ 当绝对定位下设置了四个方位，则盒子有了延展性”。

relative的最小化影响原则

做项目的时候有感受到，有时候别人在更外层中写的代码，会影响到自己写的代码，这些问题也不一定容易排查。比如，在写样式的时候，发现一堆父元素被设置了display：flex。

那考虑一个问题。当我们想要使用绝对定位，所以给其父盒子设置相对定位。但如果这个父盒子中还有别的子元素，那可能会导致其他的子元素出现样式问题。

所以，我们可以给这个绝对定位的元素新建一个包裹的父盒子，给这个包裹父盒子设置相对定位，而不是在原来的父盒子上设置相对定位，这样就能把影响最小化了。

2021.10.17

css的层叠规则

这一章有两个基本概念。

第一个叫做“层叠上下文”，它和“块级格式上下文”有点类似。层叠上下文可以理解为一种“层叠结界”，自成一个世界。这个世界中可能有其他的“层叠结界”，而自身也可能处于其他“层叠结界”中。

第二个叫做“层叠水平”，它决定了同一个层叠上下文中，元素在z轴上的显示顺序。

所以按照我的理解，如果一个元素身处一个层叠水平比较低的层叠上下文中，则它无论如何设置z-index的值，都无法覆盖到较高层叠水平的层叠上下文中的元素之上。

另外，层叠上下文的创建方法不止于我们平时经常使用的z-index。还有比如，页面根元素天生具有层叠上下文，被称为“根层叠上下文”；然后还有各种css3属性，比如非1的opacity值，非none的transform值等。

font一些属性的新知

在Chrome下，font-size有12px的限制，即如果0<值<12px，则会被当做12px计算。

font-weight支持100-900的整百数，并且这里的数值其实是一个具有特定含义的关键字，和font-weight字母关键字之间是有对应关系的。此外，有时候可能会发现，设置好多个整百数，如设置300、400、500，字体都没有任何变化，原因是系统中没有对应的粗细字体。

background-position的百分比计算方式

这个属性的百分比值计算比较特别，跟平时一般元素会相对于父元素的宽高不同。

positionX = （容器宽度-图片宽度）*percentX；

positionY = （容器高度-图片高度）*percentY；