《基本html代码》word版

下载文档

ID：22991159

大小：231.50 KB

页数：26页

时间：2018-11-02

收藏

资源描述：

《《基本html代码》word版》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、基本HTML代码div{margin:3px;}.d1{width:250px;min-height:20px;border:1pxsolid#00cc00;}.

2、d2{width:130px;min-height:40px;border:1pxsolid#0000cc;}.d3{width:100px;min-height:40px;border:1pxsolid#cc0000;}    

    

3、yle中用到了min-height，这个和height是不同的，min-height指定了对象的一个最小高度，当对象的子内容高度超过这个最小高度是，这个对象会自动撑大。这是一个非常牛的style，可惜的是，在这个style和float这个同样牛的style一起使用的时候，就会出现各种问题。内部一个Div修改成为float:left.d1{width:250px;min-height:20px;border:1pxsolid#00cc00;}.d2{width:130px;min-height:40px;border:1pxsolid#0000cc;float:left;}.d3{widt

4、h:100px;min-height:40px;border:1pxsolid#cc0000;}显示结果如下。这个结果中，Firefox有点离谱了，两个框叠在一起也就罢了，为什么那个红框会变大捏？而且变的大小也很诡异，不知道是按照什么公式计算出来的。IE在这里的显示应当是附和标准的。内部两个Div都修改成为float:left.d1{width:250px;min-height:20px;border:1pxsolid#00cc00;}.d2{width:130px;min-height:40px;border:1pxsolid#0000cc;float:left;}.d3{width:

5、100px;min-height:40px;border:1pxsolid#cc0000;float:left;}显示结果如下。在这种情况下，Firefox的结果尚能解释，可能是float把外层的Div也作为内层float影响的范围，这样内层的就不会将外层的Div撑大了。IE在这里出现了Margin失效的情况，可以解释为内层第二个float造成了影响。干脆把外层的Div也修改成为float:left.d1{width:250px;min-height:20px;border:1pxsolid#00cc00;float:left;}.d2{width:130px;min-height:40

6、px;border:1pxsolid#0000cc;float:left;}.d3{width:100px;min-height:40px;border:1pxsolid#cc0000;float:left;}显示结果如下，这种情况下，Firefox正常了，而IE延续了前面的不正常情况。外层是float:left，内层最后一个不再float:left.d1{width:250px;min-height:20px;border:1pxsolid#00cc00;float:left;}.d2{width:130px;min-height:40px;border:1pxsolid#0000cc

7、;float:left;}.d3{width:100px;min-height:40px;border:1pxsolid#cc0000;}显示结果如下，这和前面第一种加float:left的情况相同。结论再重申一次，本文讨论的是一个比较高级的话题。如果在style中用height而不是min-height来设定高度，是不会出现以上这些问题的。不过，不用min-height就失去了div自动撑大这一个很有必要的特性。在min-heig