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

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


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


<div style="border:5px solid #f00;min-height:50px;width:300px;padding:12px;">
           最小高度
       </div>


<div style="border:5px solid #f00;min-height:50px;width:300px;padding:12px;">
          正常高度
        </div>

 
 当给容器一个高度的时候，标准浏览器是这样的处理的，如果没有设置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属性；嗯这个应该没有问题吧！？动手吧


代码如下：




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


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






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




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


先试试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 嗯这个看起来也行。




<div style="border:5px solid #f00;position:absolute;min-width:220px;_width:220px;padding:12px;white-space:nowrap">
    最小宽度
</div>






加些内容：






依然可以，预期达到。


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


上代码：




<div style="border:5px solid #f00;float:left;min-width:220px;_width:220px;padding:12px;white-space:nowrap">
    最小宽度</div>






同样加些内容：






预期达到！


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