CSS中height和min

日期:2021-03-18 类型:科技新闻 

关键词:小程序开发者工具,小程序在线生成平台,小程序编辑,免费的小程序,微信小程序在哪里

作为Web前端开发新人,必须掌握height、min-height的差别

访问器参考标准:Firefox, Chrome, Safari, Opera, IE;

* IE6不适用CSS min-height特性。最少高宽比的界定:1. 元素有着默认设置高宽比;2. 当內容超过元素的默认设置高宽比时,元素的高宽比随內容提升而提升

Figure 1:以下图的要求

* 如上图,两个地区的高宽比不1样。这便是 min-height 的实际效果演试。元素有着1个默认设置的高宽比,当內容超过该默认设置高宽比时,元素的高宽比另外随內容而提升。

eg1:

XML/HTML Code拷贝內容到剪贴板
  1. <style>  
  2. .test{   
  3.     float:left;   
  4.     width:200px;   
  5.     margin:0 5px;   
  6.     padding:10px;   
  7.     border-radius:10px;   
  8.     background:#eee;   
  9. }   
  10. .test{   
  11.     min-height:80px;  /* 完成最少高宽比编码 */   
  12. }   
  13. </style>  
  14.   
  15. <div class="test">喝水为何会中毒?</div>  
  16. <div class="test">喝水为何会中毒?<br>日前有新闻媒体报导称日饮用3升水年青10岁,因而有人真刚开始喝了,可喝了4天后,尿血了。水是性命之源,可是并不是喝水越多越好呢?喝水多了又会产生甚么呢?</div>  
  17.   

* 如上编码,大家只必须1行编码 min-height:80px; 便可以完成非IE6访问器的最少高宽比。

CSS Code拷贝內容到剪贴板
  1. .test{   
  2.     height:80px;  /* 看看ie6会怎样 */  
  3. }   
  4.   

将 min-height:80px; 改为 height:80px; 在IE6下查询这个款式。你将会发现了惊喜,是的,你没看错。这个DEMO的主要表现与eg1的demo在高級访问器下的主要表现1致,即最少高宽比的实际效果。

 但这还并不是节节胜利的情况下,由于你会发现本例在高級访问器下都GameOver了。肿么办,这并不是坑爹么?别心急,做为1个达标的coder,你毫无疑问会想各种各样方法来搞定它。

 你是1个前端开发工程项目师,因此你务必要了解1些访问器专属的CSS Hack,尽管大多数数状况下不强烈推荐应用。大家想方法让高級访问器依然应用min-height,而ie6应用height,这样好像便可以达到目地了,动手能力吧。

 

Figure 4:节节胜利的情景

CSS Code拷贝內容到剪贴板
  1. .test{   
  2.     min-height:80px;  /* for ie7+, firefox, chrome, safari, opera */  
  3.     _height:80px;        /* for ie6 */  
  4. }   
  5.   

 ok, 大家完成了包括ie6在内的min-height实际效果。

 记牢,干万别加overflow除visible以外的值,不然你的ie6又要不幸demo。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助。

上一篇:了解CSS波动float、精准定位position 返回下一篇:没有了