css中important的用处
2016-05-10 15:36
639 查看
今天看代码时遇到一段不理解的地方。
不太理解后三行代码含义。
现在记录一下,方便以后查看:!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。
挺神奇的。
#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。
挺神奇的。
相关文章推荐
- css :active伪类的理解
- CSS3 :target伪类的理解与使用
- css 框架——base.css,作用是重设浏览器默认样式和提供通用原子类。自己留存
- 织梦模板安装后不能显示css的解决办法
- 最简化模型2——css3分阶段动画效果(经过实测)之转动的div
- CSS清楚浮动float
- [css]水平垂直居中的方法
- 最简化模型——css3分阶段动画效果(经过实测)
- ios tableview一些样式的整理
- CSS设置行内元素的水平居中
- css
- HTML&CSS——css中postion的fixed与absolute区别详解
- HTML&CSS——Position属性四个值:fixed、absolute和relative的区别和用法
- css--盒子模型和层叠关系
- PHPCMS 分页样式
- CSS知识点总结
- 有序无序列表样式设置
- 【less.js扫雷系列一】--less和CSS同时时使用时,可能出现的样式优先级变化导致样式覆盖问题
- 编码规范之编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范
- CSS 动画的 steps()