前段時間在知乎上看到一個問題：為什么CSS這么難學(xué)？其中@方應(yīng)杭的回答拿了最高贊，按照答主的話來說，CSS難學(xué)就是因為三個字：不正交。
接下來我們就來舉些例子來展示一下CSS的 “不正交” 。
1. border影響margin
先來給大家展示一個神奇的事情：
起始代碼
大家先看一波基本的代碼，這里有三個div，寬高都為100px，外邊距為20px，1px的邊框，我們都知道相鄰的兄弟姐妹元素外邊距會產(chǎn)生合并，所以三個div之間的距離是20px，沒毛病~
修改1
上圖是我們做了第一次修改之后的樣子，誒？加了一個只有邊框的
<div class="child"></div>就把外邊距合并的問題解決了？我操作的是border為什么會影響到margin？不著急，接下來還有更神奇的事情
修改2
image
0.1px的border不應(yīng)該四舍五入變?yōu)?了嗎，而且確實是這樣的啊，output中已經(jīng)看不到border了，但是為啥前兩個div之間的距離還是40px?。慷何覇?？
2. display影響list的小圓點
同樣我們先看一下起始的代碼：
list
這里是一個只有默認(rèn)樣式的List，注意每個li之前的小圓點，大家都知道這是無序列表的默認(rèn)樣式，接下來我們要做一點微小的工作
display: block
image
What ？！說好的小圓點呢？設(shè)置了
display: block小圓點就沒了？你以為這就結(jié)束了？naive！
display: inline
display: inline-block
display: flex
看到了嗎？我們對 li 設(shè)置的所有 display 全都會導(dǎo)致小圓點消失，除了上圖展示出來的
display: block 、display: inline 、 display: inline-block 、 display: flex ，display: table一樣會出現(xiàn)這種情況。
3. position: absolute影響display: inline
老規(guī)矩，我們先上初始代碼
起始代碼
這里是一個塊級父元素，其內(nèi)是一個設(shè)置了
display: inline的子元素，此時子元素的display是inline這一點不用懷疑，但是我們對子元素做一點小小的改動，對它設(shè)置一個position: absolute，事情就不是這么簡單了
position: absolute
此時我們看到子元素的樣式就是我們所想要的，但是我們打開控制臺，找到Computed
Console
在Computed中查找display屬性
Computed
image
說好的 inline 呢？為什么子元素變成 block 了？
4. transform影響position： fixed
此時的我已經(jīng)不想再嗶嗶了......我們直接看
position: fixed
emmmmmm......看起來是沒錯，
position: fixed相對于視窗定位，此時的子元素處在iframe的左下角完全沒問題，然而......
transform: scale(1)
(╯°Д°)╯︵┻━┻ 說好的 fixed 相對于視窗定位呢？我一定是學(xué)了假的CSS
image
總結(jié)
本文中所舉出的例子在CSS規(guī)范中都能找到解釋，但是，那么長的規(guī)范讓我全都看完，說實話我做不到，本人在這里只是將這些能體現(xiàn)CSS “不正交”的例子講出來，提醒各位看客在操作中要注意這些地方，也給自己留個筆記。另外也要感謝@方應(yīng)杭的文章，各位如果覺得本文還不錯，記得點個贊(｀?ω?′)
