摘要：作为一个创始人拍脑袋天搞出的语言，中包含了很多在今天看来很多不应该出现在现代语言中的诡异特性。今天我就来聊聊我认为的那些最诡异的特性。和有个很诡异的特性。外边距折叠，或简称边距折叠据说这个诡异的特性最初设计是为简化文章排版的。
JavaScript 作为一个创始人拍脑袋 10 天搞出的语言，JS 中包含了很多在今天看来很多不应该出现在现代语言中的诡异特性。其实，作为 Web 中必不可少的 CSS 语言也不逞多让。今天我就来聊聊我认为的那些最诡异的 CSS 特性。
overflow-x: scroll 和 overflow-y: visibleoverflow 有个很诡异的特性。标准 规定：当 overflow-x overflow-y 其中有一项不为 visible，另一项中的 visible 值被计算为 auto
http://jsfiddle.net/yrvk6104/
这个诡异的设定经常会导致设计一些包含子菜单的侧边栏时出问题。侧边栏的 overflow-y: scroll 会强制将 overflow-x 设置为 auto，导致绝对定位的二级菜单显示不出来。解决方案只能是把一级菜单的 position: relative 去除（或直接改用固定定位），然后使用 JS 计算二级菜单应该摆放的位置。
值得一提的是：最近刚通过了一项 CSS 规范允许 overflow 一次指定两个值：https://github.com/w3c/csswg-...，它只是 overflow-x overflow-y 两属性连用的简写而已，对现有行为没有影响。
外边距折叠（margin collapsing，或简称边距折叠）据说这个诡异的特性最初设计是为简化文章排版的。
https://jsfiddle.net/u3roktvg/1/
如示例：p 标签上下都有 1em 的边距，由于边距折叠的特性，上下相邻的 p 标签只相距 1em。第一个 p 标签和外层的 h1 也发生的边距折叠。如果打开 p 标签外层 div 的边框，可以看到 p 标签距离 h1 还应该更远。
边距折叠有几个基本的要求：
只有上下边距会发生折叠
发生边距折叠元素的 边距 必须位置上相邻（注意这里是边距占用的空间相邻，包括相邻同级元素的边距重合，和父子级元素边距重合）。边距之间不能有非外边距占用空间（例如 border、padding 等）阻隔
还有一种空元素的情况，我认为可以算是第二种情况的极端例子：https://jsfiddle.net/u3roktvg/2/
还有两个不发生边距折叠的情形：
拥有新的块级格式上下文的元素（display: flow-root、overflow: hidden、position: absolute 等）其子元素不会和其外部其他元素发生边距折叠
弹性布局元素的子元素之间不发生边距折叠
这两种情形通常可以用于规避边距折叠，给父元素设置 display: flex; flex-direction: column 可以解决一半以上边距折叠的情况了。
另外，css-tricks 上有一篇很好的文章：What You Should Know About Collapsing Margins
margin、padding 的百分比取值标准规定：当元素的 margin、padding 取值为百分比时，其值始终按父元素的 宽度 计算，包括上下内外边距。
当然了，如果按照正常思维上下边距百分比取值基于父元素的高度计算，反而不如现在这样基于宽度计算有用：因为竟然有人想出了用这种特性实现保持元素的高宽比。
一个保持高宽比的例子：
https://jsfiddle.net/t75gnqwq/
不知道伟大的 CSS 之父设计这两个属性时是不是考虑到了这一层
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113227.html
以下是Java技术栈微信公众号发布的关于 Java 的技术干货，从以下几个方面汇总。 Java 基础篇 Java 集合篇 Java 多线程篇 Java JVM篇 Java 进阶篇 Java 新特性篇 Java 工具篇 Java 书籍篇 Java基础篇 8张图带你轻松温习 Java 知识 Java父类强制转换子类原则 一张图搞清楚 Java 异常机制 通用唯一标识码UUID的介绍及使用 字符串...
摘要：缺乏高级编程特性影响同样深远，社区发展的预处理器能够有效缓解，，，殊途同归，异军突起，基本实现变量嵌套变量混合扩展和逻辑等。 前言 关注点分离（separation of concerns）原则多年来大行其道，实践中一般将 HTML、CSS、JavaScript 分开编写维护，早期框架 angularjs 即是如此，直到 React 争议中问世，引领关注点混合趋势，驱使开发者重新审视 ...
Web前端开发是创建Web页面或app等前端界面呈现给用户的过程。第一阶段：前端基础（HTML / CSS / JavaScript / jQuery）初识HTML+CSS【学习笔记】HTML基础完结篇html基础知识——标签详解html基础知识——与用户交互!（表单标签）html基础知识——css样式①史上最全Html和CSS布局技巧面试题汇总 HTML+CSS篇CSS 最核心的几个概念纯HTM...
Web前端开发是创建Web页面或app等前端界面呈现给用户的过程。第一阶段：前端基础（HTML / CSS / JavaScript / jQuery）初识HTML+CSS【学习笔记】HTML基础完结篇html基础知识——标签详解html基础知识——与用户交互!（表单标签）html基础知识——css样式①史上最全Html和CSS布局技巧面试题汇总 HTML+CSS篇CSS 最核心的几个概念纯HTM...
Web前端开发是创建Web页面或app等前端界面呈现给用户的过程。第一阶段：前端基础（HTML / CSS / JavaScript / jQuery）初识HTML+CSS【学习笔记】HTML基础完结篇html基础知识——标签详解html基础知识——与用户交互!（表单标签）html基础知识——css样式①史上最全Html和CSS布局技巧面试题汇总 HTML+CSS篇CSS 最核心的几个概念纯HTM...
阅读 2631·2021-10-13 09:48
阅读 3407·2021-10-13 09:39
阅读 3344·2021-09-22 16:04
阅读 2317·2021-09-14 17:57
阅读 1566·2021-09-03 10:48
阅读 667·2021-08-03 14:04
阅读 2227·2019-08-29 15:18
阅读 3265·2019-08-26 12:19
