我可能学了假的CSS

前段时间在知乎上看到一个问题：为什么CSS这么难学？其中@方应杭的回答拿了最高赞，按照答主的话来说，CSS难学就是因为三个字：不正交。

接下来我们就来举些例子来展示一下CSS的 “不正交” 。

1. border影响margin

先来给大家展示一个神奇的事情：

起始代码
大家先看一波基本的代码，这里有三个div，宽高都为100px，外边距为20px，1px的边框，我们都知道相邻的兄弟姐妹元素外边距会产生合并，所以三个div之间的距离是20px，没毛病~
修改1
上图是我们做了第一次修改之后的样子，诶？加了一个只有边框的<div class="child"></div>就把外边距合并的问题解决了？我操作的是border为什么会影响到margin？
不着急，接下来还有更神奇的事情
修改2
image
0.1px的border不应该四舍五入变为0了吗，而且确实是这样的啊，output中已经看不到border了，但是为啥前两个div之间的距离还是40px啊？逗我吗？

2. display影响list的小圆点

同样我们先看一下起始的代码：

list
这里是一个只有默认样式的List，注意每个li之前的小圆点，大家都知道这是无序列表的默认样式，接下来我们要做一点微小的工作
display: block
image
What ？！说好的小圆点呢？设置了display: block小圆点就没了？你以为这就结束了？naive！
display: inline
display: inline-block
display: flex
看到了吗？我们对 li 设置的所有 display 全都会导致小圆点消失，除了上图展示出来的 display: block 、display: inline 、 display: inline-block 、 display: flex ，display: table一样会出现这种情况。

3. position: absolute影响display: inline

老规矩，我们先上初始代码

起始代码
这里是一个块级父元素，其内是一个设置了display: inline的子元素，此时子元素的display是inline这一点不用怀疑，但是我们对子元素做一点小小的改动，对它设置一个position: absolute，事情就不是这么简单了 position: absolute

此时我们看到子元素的样式就是我们所想要的，但是我们打开控制台，找到Computed

Console

在Computed中查找display属性

Computed
image
说好的 inline 呢？为什么子元素变成 block 了？

4. transform影响position： fixed

此时的我已经不想再哔哔了......我们直接看

position: fixed
emmmmmm......看起来是没错，position: fixed相对于视窗定位，此时的子元素处在iframe的左下角完全没问题，然而......
transform: scale(1)
(╯°Д°)╯︵┻━┻ 说好的 fixed 相对于视窗定位呢？我一定是学了假的CSS
image

总结

本文中所举出的例子在CSS规范中都能找到解释，但是，那么长的规范让我全都看完，说实话我做不到，本人在这里只是将这些能体现CSS “不正交”的例子讲出来，提醒各位看客在操作中要注意这些地方，也给自己留个笔记。另外也要感谢@方应杭的文章，各位如果觉得本文还不错，记得点个赞(｀・ω・´)