Web前端开发新人笔记之height、min

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

关键词:抠图换背景,免费的抠图软件,美图抠图,手机抠图软件哪个好,p图软件哪个好用

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

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


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

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

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

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

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

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

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

 

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

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

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

以上这篇Web前端开发新人笔记之height、min-height的差别详解便是网编共享给大伙儿的所有內容了,期待能给大伙儿1个参照,也期待大伙儿多多适用脚本制作之家。

原文详细地址:http://www.cnblogs.com/cn-co/archive/2016/05/04/5457212.html

上一篇:P2P困境下将来应当怎样发展趋势 返回下一篇:没有了