CSS应用float特性设定波动元素的案例实例教程

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

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

波动的框能够向左或向右挪动,直至它的外边沿碰到包括框或另外一个波动框的边框为止。
因为波动框不在文本文档的一般流中,因此文本文档的一般流中的块主要表现得就像波动框不存在1样。

float实际效果展现
基础设定

在网页页面中一切正常加上3个div色块:

HTML编码:

XML/HTML Code拷贝內容到剪贴板
  1. <div class="div1">  
  2.     div1   
  3. </div>  
  4. <div class="div2">  
  5.     div2   
  6. </div>  
  7. <div class="div3">  
  8.     div3   
  9. </div>  

简易设定1些尺寸和色调:

CSS编码:

CSS Code拷贝內容到剪贴板
  1. .div1 {   
  2.     width100px;   
  3.     height100px;   
  4.     background-color: cyan;   
  5. }   
  6. .div2 {   
  7.     width100px;   
  8.     height100px;   
  9.     background-color: skyblue;   
  10. }   
  11. .div3 {   
  12.     width100px;   
  13.     height100px;   
  14.     background-colorgreen;   
  15. }  

实际效果以下:

一切正常状况下,3个div从上至下先后排列

下面,大家来应用下float特性,并设定值right

给div1标识加上float特性

CSS Code拷贝內容到剪贴板
  1. .div1 {   
  2.     width100px;   
  3.     height100px;   
  4.     background-color: cyan;   
  5.     floatrightright;   
  6. }  

实际效果以下:

大家会发现,div1跑到了显示屏的右边,这便是让它波动到右边的主要表现。

另外给3个div都设定float: left

CSS Code拷贝內容到剪贴板
  1. .div1 {   
  2.     width100px;   
  3.     height100px;   
  4.     background-color: cyan;   
  5.     floatleft;   
  6. }   
  7. .div2 {   
  8.     width100px;   
  9.     height100px;   
  10.     background-color: skyblue;   
  11.     floatleft;   
  12. }   
  13. .div3 {   
  14.     width100px;   
  15.     height100px;   
  16.     background-colorgreen;   
  17.     floatleft;   
  18. }  

实际效果以下:

当大家把3个div都设定了向左波动以后,便可以完成这类横排合理布局

改动CSS编码(div1的高宽比和div2的宽度),以下:

CSS Code拷贝內容到剪贴板
  1. .div1 {   
  2.     width100px;   
  3.     height130px;   
  4.     background-color: cyan;   
  5.     floatleft;   
  6. }   
  7. .div2 {   
  8.     width300px;   
  9.     height100px;   
  10.     background-color: skyblue;   
  11.     floatleft;   
  12. }   
  13. .div3 {   
  14.     width100px;   
  15.     height100px;   
  16.     background-colorgreen;   
  17.     floatleft;   
  18. }  

实际效果展现:

大家会发现,当div2充足宽,1行内放不下div3的情况下,div3会全自动从第2行刚开始合理布局。可是又因为div1的高宽比多了1些,因此div3会从div1的后边排布,而不容易从头开始刚开始


应用 overflow 消除波动
样例:

CSS Code拷贝內容到剪贴板
  1. .overflow-clear-float {overflow:hidden;}  

CSS Code拷贝內容到剪贴板
  1. .overflow-clear-float {overflow:auto;}  

overflow 款式值为 非 visilbe 时,具体上是建立了 CSS 2.1 标准界定的 Block Formatting Contexts。建立了它的元素,会再次测算其內部元素部位,从而得到准确高宽比。这样父器皿也就包括了波动元素高宽比。这个名词过度晦涩难懂,在 CSS 3 草案中被变动为名词 Root Flow,说白了,是建立了1个新的根合理布局流,这个合理布局流是单独的,不危害其外界元素的。具体上,这个特点与 初期 IE 的 hasLayout 特点10分类似。
留意适配难题:
Block Formatting Contexts 定义是在 CSS 2.1 标准内被提出。因而 IE6/7 中其实不被适用,这是因为以前的 IE 版本号仅彻底完成了 CSS 1 标准规范,和1一部分 CSS 2.0 标准。在 IE 7 中,overflow 值为非 visible 时,能够开启 hasLayout 特点。这一样使得 IE 7 一样可使器皿包括波动元素。

上一篇:用CSS3的box 返回下一篇:没有了