CSS属性顺序是否影响渲染结果？以div的height与max-height为例

嘿，这个问题问得很细心！咱们直接给结论：这两段CSS代码在浏览器的最终渲染效果完全没有差异，输出结果是一模一样的。

为啥这么说呢？CSS的属性生效逻辑是看属性本身的定义，和你书写的先后顺序无关——只有当你写了同类型且存在冲突的属性时（比如重复写了color，后面的会覆盖前面的），顺序才会影响，但这里的height:auto和max-height:100px根本不存在冲突：

• height:auto是让元素高度自适应内部内容，这也是块级元素的默认高度值
• max-height:100px是给元素设置一个高度上限，当内容高度超过100px时，元素高度会被限制在100px（如果没设置overflow，内容会溢出，但这和属性顺序没关系）

咱们再把两段代码摆出来对比下：
第一段代码：

#div { max-height: 100px; height: auto }

第二段代码：

#div { height: auto; max-height: 100px; }

不管你怎么调换这两个属性的顺序，浏览器都会正确解析各自的作用，不会因为顺序改变而出现渲染差异。

内容的提问来源于stack exchange，提问作者Rafdro