css中important的用处

今天看代码时遇到一段不理解的地方。

#note_content {
  line-height: 22px;
  border: #DEDEDE 1px solid;
  background: #FAFAFA;
  padding: 10px;
  word-break: break-all;
  word-wrap: break-word;
  margin: 40px 0 10px 0;
  min-height: 360px;
  height: auto !important;
  height: 360px;
}

不太理解后三行代码含义。

现在记录一下，方便以后查看：!important是Firefox专用的一个标记。

这段代码的含义是同时兼容firefox和IE的最低高度360排序，和高度自适应。

 

第一行设置 min-height:360px;对Firefox有效；第二行height:auto !important;也对Firefox有效。后面紧跟的“!important”是Firefox专用的一个标记，带有这个标记的设置具有最高优先 级，之后的设置都无效。所以第三行的height:360px对Firefox无效了；

同时，由于IE无法识别min-height和“! important”，所以只有第三行有效，由于IE默认就是高度自适应的，所以即使设置了360px的高度，只要内容很多，也会自动撑开，不需要设置 height:auto。

挺神奇的。