《css世界》学习笔记 二

一、height:100%无效。

现在存在一个问题，就是当父级元素没有设置具体高度的时候，height:100%会失效。

有一种看似合理的说法:如果父元素 height:auto 子元素还支持 height:100%，则 父元素的高度很容易陷入死循环，高度无限。例如，一个<div>元素里面有一张 vertical-align 为 bottom 同时高度为 192 像素的图片，此时，该<div>高度就是 192 像素，假设此时插入一个子元素，高度设为 100%，如果此时 height:100%可以计算，则 子元素应该也是 192 像素。但是，父元素 height 值是 auto，岂不是现在高度要从原来的 192 像素变成 384 像素，然后 height:100%的子元素高度又要变成 384 像素，父元素高度 又双倍......死循环了!

实际上，这种解释是错误的，大家千万别被误导。证据就是宽度也存在类似场景，但并没 有死循环。

为何宽度支持，高度就不支持呢?规范中其实给出了答案。如果包含 块的高度没有显式指定(即高度由内容决定)，并且该元素不是绝对定位，则计算值为 auto。一句话总结就是:因为解释成了 auto。要知道，auto 和百分比计算，肯定是算 不了的:

    'auto' * 100/100 = NaN

1.超越!important

超越!important 指的是 max-width 会覆盖 width，而且这种覆盖不是普通的覆盖，是超级 覆盖，覆盖到什么程度呢?大家应该都知道 CSS 世界中的!important 的权重相当高，在业界，往 往会把!important 的权重比成“泰坦尼克”，比直接在元素的 style 属性中设置 CSS 声明还要高， 一般用在 CSS 覆盖 JavaScript 设置上。但是，就是这么厉害的!important，直接被 max-width 一 个浪头就拍沉了。比方说，针对下面的 HTML 和 CSS 设置，图片最后呈现的宽度是多少呢?

    <img src="1.jpg" style="width:480px!important;">
    img { max-width: 256px; }

答案是 256px。style、!important 通通靠边站!因为 max-width 会覆盖 width。

 

2.超越最大 冲突的时候。例如，下面这种设置:

     .container {
        min-width: 1400px;
        max-width: 1200px;

}

最小宽度居然比最大宽度设置得还大，此时，两者必定是你死我活的状态。究竟谁死呢?遵循 “超越最大”规则(注意不是“后来居上”规则)，min-width 活下来，max-width 被忽略，

于是，.container 元素表现为至少 1400 像素宽。