Web前端新人笔记之height、min-height的区别
浏览器参照基准:Firefox, Chrome, Safari, Opera, IE; * IE6不支持CSS min-height属性。最小高度的定义:1. 元素拥有默认高度;2. 当内容超出元素的默认高度时,元素的高度随内容增加而增加Figure 1:如下图的需求* 如上图,两个区域的高度不一样。这就是 min-height 的效果演示。元素拥有一个默认的高度,当内容超出该默认高度时,元素的高度同时随内容而增加。
eg1:<style> .test{ float:left; width:200px; margin: 5px; padding:10px; border-radius:10px; background:#eee; } .test{ min-height:80px; /* 实现最小高度代码 */ } </style> <div class="test">喝水为什么会中毒?</div> <div class="test">喝水为什么会中毒?<br>日前有媒体报道称日饮用3升水年轻10岁,于是有人真开始喝了,可喝了4天后,尿血了。水是生命之源,但是不是喝水越多越好呢?喝水多了又会发生什么呢?</div>
* 如上代码,我们只需要一行代码 min-height:80px;
就可以实现非IE6浏览器的最小高度。
.test{ height:80px; /* 看看ie6会如何 */ }
* 将 min-height:80px;
改成 height:80px;
在IE6下查看这个样式。你可能发现了奇迹,是的,你没看错。这个DEMO的表现与eg1的demo在高级浏览器下的表现一致,即最小高度的效果。
* 但这还不是大获全胜的时候,因为你会发现本例在高级浏览器下都GameOver了。肿么办,这不是坑爹么?别着急,作为一个合格的coder,你肯定会想各种办法来搞定它。
* 你是一个前端工程师,所以你必须要知道一些浏览器专属的CSS Hack,虽然大多数情况下不推荐使用。我们想办法让高级浏览器仍然使用min-height,而ie6使用height,这样似乎就可以达成目的了,动手吧。
Figure 4:大获全胜的场景.test{ min-height:80px; /* for ie7+, firefox, chrome, safari, opera */ _height:80px; /* for ie6 */ }
* ok, 我们实现了包含ie6在内的min-height效果。
* 记住,千万别加overflow除visible之外的值,否则你的ie6又要悲剧demo
Web前端新人笔记之height、min-height的区别的更多相关文章
- Web前端新人笔记之文本属性
前一段时间因工作时间减缓了更新笔记的时间.我也不知道有没有会观看并且能不能帮到一些初学者,这只是我的一些小随笔而已.当然我也希望的的每一篇随笔都可以帮到更多的想要学习前端开发的初学者们,更希望你们也可 ...
- Web前端新人笔记之CSS字体
本章内容是阅读CSS权威指南的一个小积累和随笔.新人必看,老鸟也可查看并指出不足指出以便后人阅读更好地理解.O(∩_∩)O谢谢!!!设置字体属性时样式变的最常见的用途之一:不过,尽管字体选择很重要,但 ...
- Web前端新人笔记之了解Jquery
与javaScript相比,Jquery更简洁.浏览器的兼容性更强,语法更灵活,对xpath的支持更强大.一个$符就可以遍历文档中各级元素.例:在页面上有一个无序列表,我们需要将所有列表项中的文本内容 ...
- Web前端新人笔记之jquery选择符
jquery利用了CSS选择符的能力,让我们能够在DOM中快捷而轻松的获取元素或元素集合.本章将介绍以下内容: 1.网页中的元素结构: 2.如何通过CSS选择符在页面中查找元素: 3.扩展jquery ...
- Web前端新人笔记之CSS值和单位
数字 颜色——命名颜色 在Css2.1中规范定义了17个颜色名.包括html4.0中定义的16个颜色及外加一个橙色: <h1 style="color=aqua">aq ...
- Web前端新人笔记之HeightCharts基础
通常情况下,Highcharts包含标题(Title).坐标轴(Axis).数据列(Series).数据提示框(Tooltip).图例(Legend).版权信息(Credits)等,高级的还包括导出功 ...
- Web前端新人笔记之jquery入门
本章将为大家介绍以下几点内容: 1.jquery的主要特点: 2.建立jquery的编码环境: 3.简单jquery脚本示例: 4.选择jquery而不是纯javaScript的理由: 5.常用的jq ...
- Web前端新人笔记之CSS结构和层叠
上一篇文章介绍了如何利用CSS选择器为元素应用各种丰富的样式,每个合法的文档都会生成一个结构树,了解这一点,就能根据元素的祖先.属性.兄弟等元素穿件选择器选择元素. 本篇文章将讨论3中机制之间的关系: ...
- web前端学习笔记
web前端学习笔记(CSS盒子的定位) 相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准 ...
随机推荐
- 王帅:深入PHP内核
[问底]王帅:深入PHP内核(三)——内核利器哈希表与哈希碰撞攻击 [问底]王帅:深入PHP内核(二)——SAPI探究 [问底]王帅:深入PHP内核(一)——弱类型变量原理探究
- php验证字符串长度问题
C:\Users\Administrator>php -r "echo strlen('你好')";4C:\Users\Administrator>php -r &qu ...
- 可视化swing界面编辑--转载
原文地址:http://279234058.iteye.com/blog/2200122 今天发现了一个WindowBuilder插件,功能好强大,啊哈哈,从此告别手动编辑swing界面代码,直接像V ...
- show status详解
Aborted_clients 某种原因客户程序不能正常关闭连接而导致失败的连接的数量.没有正常关闭 Aborted_connects 指出试图连接到MYSQL的失败的次数.这种情况在客户尝试用错误的 ...
- Executor 和Executors
Java里面线程池的顶级接口是Executor,但是严格意义上讲Executor并不是一个线程池,而只是一个执行线程的工具.真正的线程池接口是ExecutorService. 下面这张图完整描述了线程 ...
- scala学习笔记:各种奇怪的写法
Unit函数的定义: def foo()={println("hi")} 等号可以省略: def foo(){println("hi")} update方法: ...
- 未能加载文件或程序集“App_global.asax”或它的某一个依赖项
未能加载文件或程序集"App_global.asax"或它的某一个依赖项.生成此程序集的运行时比当前加载的运行时新,无法加载此程序集. 出现这一问题的原因是空间支持framewor ...
- Html5时钟的实现
最近准备把自己的博客装修一下,首先,先为自己设计一个时钟吧,希望博客园能够尽快发放给我使用js的权限! 自从看见了苹果设计的那款因为侵权而赔钱了时钟,我就决定我的时钟一定是要参考这个来设计了! 不得不 ...
- Sql Server通过BCP数据导出Excel
1.1. bcp的主要参数介绍 bcp共有四个动作可以选择. (1) 导入. 这个动作使用in命令完成,后面跟需要导入的文件名. (2) 导出. 这个动作使用out命令完成,后面跟需要导出的文件名. ...
- 用curl做异步操作
class CurlPost { /** * @desc curl 请求提交数组 * */ public function execute($method, $url, $fields = '', $ ...