大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

CSS3弹性盒模型怎么开发

CSS3弹性盒模型怎么开发,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

创新互联是专业的浮梁网站建设公司,浮梁接单;提供网站设计制作、成都网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行浮梁网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

box-flex属性

box-flex属性能够灵活地控制子元素在盒子中的显示空间。注意,显示空间包括子元素的宽度和高度,而不只是子元素所在栏目的宽度,也可以说是子元素在盒子中所占的面积。该属性在弹性布局中非常重要,它解决了传统设计中习惯使用百分比定义弹性布局的弊端。box-flex属性的基本语法:

box-flex:

取值说明:

属性值是一个整数或者小数。当盒子中包含多个定义了box-flex属性的子元素时,浏览器将会把这些子元素的box-flex属性值相加,然后根据他们各自的值占总值的比例来分配盒子剩余的空间。注意,box-flex属性只有在盒子拥有的确定的空间大小之后才能正确解析。在设计中,较稳妥的做法是为了盒子定义具体的width或height属性值。

实战体验:自适应栏目宽度设计

在传统的网页设计中,如果要把一个栏目分成三栏,比较简单的做法是把三个子元素的宽度都设置为33.3%。这种做法无法把父元素的宽度完全填充,当父元素的宽度足够大的时候,用户会看到未填充的空白区域。但是,如果为子元素设置了固定宽度值,弹性布局会变得更为复杂。如果使用box-flex属性,这个问题就会迎刃而解。

html代码:

XML/HTML Code复制内容到剪贴板

  1.   
    

                     
                         

           
           
           
           
       
                         

           
           
           
           
       
  
  

CSS3代码:

CSS Code复制内容到剪贴板

  1. /*这是一个三栏布局的页面,其中左侧栏目的宽度是固定的,而中间和右侧栏目的宽度是弹性的*/  
    

演示效果:

CSS3弹性盒模型怎么开发

弹性空间的实现和分配

  在默认情况下,子元素并不具有弹性,它会竟可能的宽,以便使其所包含的内容可见,并且不会有任何溢出。如果要改变它的尺寸,则可以使用width和height属性来实现,当然也可以使用min-height,min-width,max-height,max-width等属性来限制尺寸。

  当box-flex属性至少大于0时,它会变得富有弹性。当子元素具有弹性时,可以通过下面的方式来改变它的尺寸:

1、使用width,height,min-height,min-width,max-height,max-width等属性来定义尺寸。

2、使用盒子的尺寸来限制子元素的弹性尺寸。

3、借助盒子富余所有空间来限制元素的弹性尺寸。

  如果子元素没有声明大小,那么其尺寸将完全取决于盒子的大小,即子元素的大小等于盒子的大小乘以它的box-flex属性值在所有子元素的box-flex属性值总和中的百分比。使用公式表示如下:

子元素的尺寸=盒子的尺寸*子元素的box-flex属性值/所有子元素的box-flex属性值的和

如果一个或多个子元素声明了具体的尺寸,那么其大小将计入其中,余下的弹性盒子将按照上面的原则分享剩余的可利用空间。

由于受内部图片大小的支撑,导致子元素的空间总是大于盒子的 富余空间,这时将出现解析异常。

box-flex属性对子元素的布局影响

HTML代码:

XML/HTML Code复制内容到剪贴板

  1.   
    

                                                                 

中间和右侧各占一半剩余的空间

CSS3代码:

CSS Code复制内容到剪贴板

  1. #box2{   
        box-flex: 2;   
        -moz-box-flex: 2;   
        -webkit-box-flex: 2;   
        background:#CCF;   
    }   
    #box3{   
        box-flex: 2;   
        -moz-box-flex: 2;   
        -webkit-box-flex: 2;   
        background:#FC0;   
    }

演示效果:

CSS3弹性盒模型怎么开发

中栏占1/5的空余空间,右栏占4/5空余的空间

CSS3代码:

CSS Code复制内容到剪贴板

  1. #box2{   
        box-flex: 0.5;   
        -moz-box-flex: 0.5;   
        -webkit-box-flex: 0.5;   
        background:#CCF;   
    }   
    #box3{   
        box-flex: 2;   
        -moz-box-flex: 2;   
        -webkit-box-flex: 2;   
        background:#FC0;   
    }

演示效果:

CSS3弹性盒模型怎么开发

中间弹性显示,占据所有空余空间,右栏固定大

CSS3代码:

CSS Code复制内容到剪贴板

  1. #box2{   
        box-flex: 0.5;   
        -moz-box-flex: 0.5;   
        -webkit-box-flex: 0.5;   
        background:#CCF;   
    }   
    #box3{   
        width:196px;   
        background:url(images/web3_03.gif) no-repeat;   
    }

演示效果:

CSS3弹性盒模型怎么开发

中栏失去弹性(当设置为0或者复制时),收缩显示为一条线,右栏自动左移

CSS代码:

CSS Code复制内容到剪贴板

  1. #box2{   
        box-flex: 0;   
        -moz-box-flex: 0;   
        -webkit-box-flex: 0;   
        background:#CCF;   
    }   
    #box3{   
        width:196px;   
        background:url(images/web3_03.gif) no-repeat;   
    }

演示效果:

CSS3弹性盒模型怎么开发

看完上述内容,你们掌握CSS3弹性盒模型怎么开发的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


文章题目:CSS3弹性盒模型怎么开发
URL网址:http://dzwzjz.com/article/ghephj.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP