JavaScript作为创始人用10天创造的语言，JS包含了很多不应该出现在当今现代语言中的奇葩特性。其实作为Web中不可或缺的CSS语言，它的作用并不大。今天我要谈谈我认为最奇怪的CSS特性。overflow-x:scroll和overflow-y:visibleoverflow有一个奇怪的特性。标准规定：当overflow-xoverflow-y其中一项不可见时，其他item中的可见值计算为autohttp://jsfiddle.net/yrvk6104/这种奇怪的设置常常导致一些子菜单的设计出现了的侧边栏有问题。侧边栏的overflow-y:scroll会强制设置overflow-x为auto，导致绝对定位的二级菜单不显示。解决办法只能是去掉一级菜单的position:relative（或者直接改成固定定位），然后用JS计算二级菜单应该放的位置。值得一提的是，最近通过了一个CSS规范，允许overflow一次指定两个值：https://github.com/w3c/csswg-...，就是overflow-x的组合而overflow-y只是速记，对现有行为没有影响。Margincollapsing（边距折叠，简称边距折叠）据说这个怪异的功能最初是为了简化文章的排版而设计的。https://jsfiddle.net/u3roktvg/1/例如：p标签上下各有1em的margin。由于margincollapse的特性，相邻p标签之间的距离只有1em。第一个p标签和外部h1也会发生边距崩溃。如果打开p标签外层div的边框，可以看到p标签离h1应该更远一些。margincollapsing有几个基本要求：只有上边距和下边距会塌陷。折叠元素的边距必须相邻（注意边距占用的空间是相邻的，包括相邻兄弟元素的边距。边距与父子元素边距重合）。边距之间不能有非外边距空间（如border、padding等）。还有一种情况是空元素。我觉得可以算是第二种情况的一个极端例子：https://jsfiddle.net/u3roktvg/2/margincollapse没有发生的情况有两种：elementswithanewblock-levelformatcontext(display:flow-root,overflow:hidden,position:absolute,等等)并且它们的子元素不会与它们之外的其他元素有边缘弹性布局元素的子元素之间不会发生边距折叠。这两种情况通常可以用来避免margincollapsing。设置显示：flex；flex-direction:columntoparentelement可以解决超过一半的margincollapsingup的情况。另外css-tricks上有一篇很好的文章：WhatYouShouldKnowAboutCollapsingMarginsmargin和padding的百分比值标准规定，当一个元素的margin和padding的值为百分比时，它的值总是按照到父元素的宽度，包括顶部和底部边距。当然，如果按照正常的思维，根据父元素的高度来计算上下边距的百分比值，就没有像现在这样根据宽度来计算有用了：因为真的有人来了使用此功能来保持元素的纵横比。保持纵横比的例子：https://jsfiddle.net/t75gnqwq/不知道CSS大神在设计这两个属性的时候有没有考虑到这一层”，那么这种规范就叫做“designbasedoncoincidence"。但是！！！！标准中还规定，当一个固定定位元素的直接或间接父元素有transformnotnone的元素时，该元素将改为基于父元素的绝对定位。我猜很多移动端开发者遇到过这样一个问题：有一天终于受不了原生滚动的卡顿，痛定思痛去找iscroll，发现里面所有的固定定位元素都失去了位置。WTF？然而，这个规范定义了一些不寻常的东西：position:fixed是在css-position规范中定义的。后面的supplementarynote是写在css-transformsspecification里面的，还附了一个ISSUE，好像标准制定者似乎不太愿意指定这样的规范。我简单研究了一下这个规范应该先由浏览器来实现，然后强制标准制定者加入这个规范，也算是浏览器反击标准的一个例子。然而，有人为Chrome打开的一个错误已被标记为无法修复，而且这种情况不太可能改变（至少在短期内）。毕竟，逆来顺受是程序员的命。但话又说回来，就像padding-top:50%，这个奇怪的特性也可能有用：它提供了一种方法让绝对定位的引用元素跳过最近的非position:static元素。http://jsfiddle.net/xnw59zcr/3/例子中，当前显示的是第n个菜单项。这个li本身是放在二级菜单里面的。直接使用position:absolute会跟随二级菜单的位置变化，不符合要求。而如果你使用position:fixed元素的相对视口是未知的，不是固定的。这时候position:fixed和transform:scale(1)一起用这个trick就派上用场了。你见过什么奇怪的CSS特性吗？https://jsfiddle.net/1b4swamw/
