学习笔记：min-width和min-height

min-height和min-width这两个最小高度和最小宽度的容器属性

--- 先说说min-height。看下面试例：

当给容器一个高度的时候，标准浏览器是这样的处理的，如果没有设置overflow的情况下，内容会超出但容器的高度不会变！这时候，我们又回到了前面，如果要自适应高度的话，当然去掉height属性。有时候我们需要一个最小的高度占据一定的空间。所以引出min-height属性。但可悲的是ie6.0不支持！！
于是乎，我们不得不对ie6.0采用hack (_height:120px)技术。这里我说“不得不”是因为我极度讨厌用hack。个中滋味自己体会，我的原则是，能不用hack尽量不用。
在ie6里面，内容超出高度height的时候，height竟然失效了！！这不正是min-height的所要达到的效果吗？
学习笔记：min-width和min-height - Hanana - Flash教学资源 - 丽晶课件
经测试，预期达到。

min-width也达这样的效果？先来测试一下：
<div style="border:5px solid #f00;min-width:120px;;padding:12px;">
最小宽度
</div>
可是结果让我们很是意外，所有浏览器里统统失效：

怎么回事？考，全罢工啦！！仔细琢磨，原来不是这么玩的。容器的高度默认情况下是由内容多少决定的，但宽度不是啊！默认情况下是继承了父容器的宽度。当然，前提是display是block。

哦，原来是这么回事，我们得让容器的默认宽度是内容多少来决定。

由此我想到了几种情况：

1 display:inline 但有个问题是这样的话width就失效了,经测试min-width同样也失效，这种情况被pass掉了，海选啊！！；

2 于是乎我们想到display:inline-block属性；嗯这个应该没有问题吧！？动手吧

代码如下：

经测试，firefox、chrome、ie8.0均有效。

可万恶的ie6还是不行啊！！而且出来个捣乱的，ie7也不行。别，仔细看看，原来ie6和ie7就没实现display:inline-block;
修改代码：

先试试ie7，ok大功告成！再试ie6，依然“万恶”！！别急呀，至少我们明白了min-width的用法，当宽度由内容决定的时候才起作用。多放点内容试试，是不是如我们所想内容超出的话，容器变大？

嗯，果然是。但是有个小问题，就是当内容超过浏览器的宽度时，依然会换行。先不管它！先解决ie6.0的问题。

仔细琢磨一下，现在又回到当初的思路了，只有i6有问题。当初是怎么解决的？哦，ie6.0 的height本身就具备min-height 的特性。那width是不是也如此呢？我们加个_width:220px试试

<div style="border:5px solid #f00;display:inline-block;*display:inline;zoom:1;min-width:220px;_width:220px;padding:12px;">
最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度
</div>

结果很严重，我们很失望。我们唯一思路也被隔断了！种么办？种么办？....."换行！！？？"那我就让你不换行！！！

<div style="border:5px solid #f00;display:inline-block;*display:inline;zoom:1;min-width:220px;_width:220px;padding:12px;white-space:nowrap">
最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度
</div>

竟然可以了！加点内容！！！

竟然连上面的，超出浏览器宽度问题也解决了！试试其它浏览器。ie7、ie8、firefox、chrome全部通过。以外收获！

3 position:absolute 嗯这个看起来也行。

加些内容：

依然可以，预期达到。

4 float:left 这种情况最常用。应该也行！

上代码：

同样加些内容：

预期达到！

我能想到就这几种情况，当然里面有分析不到位的地方，请不吝指正。有些浏览器，没有测，测试完给个结果，不行的话，再想办法。

学习笔记：min-width和min-height相关推荐

algorithm头文件下的常用函数-学习笔记
algorithm头文件下的常用函数-学习笔记 max(x,y),min(x,y),abs(x) swap(x,y) reverse(it,it2) next_permutation() fill( ...
OpenCV 学习笔记03 boundingRect、minAreaRect、minEnclosingCircle、boxPoints、int0、circle、rectangle函数的用法...
函数中的代码是部分代码,详细代码在最后 1 cv2.boundingRect 作用:矩形边框(boundingRect),用于计算图像一系列点的外部矩形边界. cv2.boundingRect(arr ...
c++ qt工作量和移动端相比_学习笔记 --- QT
0.前序别问,问就是选修... 那毕竟3dMax动画那边结课了,我怎么就不能再发一篇笔记(极其嚣张) QT其实会去好好学的,虽然最近为了选修结课又得恶补一波不过以后给策划造编辑器是要用的,这篇笔记 ...
canvas学习笔记（下篇） -- canvas入门教程--保存状态/变形/旋转/缩放/矩阵变换/综合案例（星空/时钟/小球）...
[下篇] -- 建议学习时间4小时课程共(上中下)三篇此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
学习笔记（八）——jQuery（二）
文章目录一.class 操作二.Tab 栏切换三.JQ 动画四.元素操作 4.1.html() .$()和 empty() 4.2.属性获取.设置.移除 4.3.补充:获取boolean类型的 ...
学习笔记（七）——jQuery（一）
Jquey就是一款跨主流浏览器的JavaScript库,简化JavaScript对HTML操作就是封装了JavaScript,能够简化我们写代码的一个JavaScript库文章目录一.JQ的引入 ...
caffe源码c++学习笔记
转载自:深度学习(七)caffe源码c++学习笔记 - hjimce的专栏 - 博客频道 - CSDN.NET http://blog.csdn.net/hjimce/article/details/ ...
深度学习（七）caffe源码c++学习笔记
caffe源码c++学习笔记原文地址:http://blog.csdn.net/hjimce/article/details/48933845 作者:hjimce 一.预测分类最近几天为了希望深入 ...
Caffe学习笔记4图像特征进行可视化
Caffe学习笔记4图像特征进行可视化本文为原创作品,未经本人同意,禁止转载,禁止用于商业用途!本人对博客使用拥有最终解释权欢迎关注我的博客:http://blog.csdn.net/hit201 ...
JavaWeb黑马旅游网-学习笔记03【登陆和退出功能】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...

学习笔记：min-width和min-height

学习笔记：min-width和min-height相关推荐

最新文章

热门文章