登录  /  注册
首页 > web前端 > css教程 > 正文

关于开发CSS3弹性盒模型的方法之二

不言
发布: 2018-06-20 14:09:13
原创
1761人浏览过

这篇文章主要为大家分享了css3弹性盒模型开发笔记,想要学好css3弹性盒模型的朋友不要错过这篇文章,可以参考一下

本文为大家继续分享CSS3弹性盒模型开发笔记第二篇,之前一篇以及为大家引入了CSS3弹性盒模型的相关介绍,点击查看:CSS3弹性盒模型开发笔记(一)

box-flex属性

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

box-flex:

取值说明:

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

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

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

html代码:

<body>
<h1><img  src="images/web3_13.gif" / alt="关于开发CSS3弹性盒模型的方法之二" ></h1>
<p id="box">
    <!--左侧栏目-->
    <p id="box1"><img  src="images/web3_01.gif" / alt="关于开发CSS3弹性盒模型的方法之二" ></p>
    <!--中间栏目-->
    <p id="box2">
        <h2><img  src="images/web3_02.gif" / alt="关于开发CSS3弹性盒模型的方法之二" ></h2>
        <p><img  src="images/web3_04.gif" / alt="关于开发CSS3弹性盒模型的方法之二" ></p>
        <p><img  src="images/web3_05.gif" / alt="关于开发CSS3弹性盒模型的方法之二" ></p>
        <p><img  src="images/web3_06.gif" / alt="关于开发CSS3弹性盒模型的方法之二" ></p>
        <p><img  src="images/web3_07.gif" / alt="关于开发CSS3弹性盒模型的方法之二" ></p>
    </p>
    <!--右侧栏目-->
    <p id="box3">
        <h2><img  src="images/web3_12.gif" / alt="关于开发CSS3弹性盒模型的方法之二" ></h2>
        <p><img  src="images/web3_08.gif" / alt="关于开发CSS3弹性盒模型的方法之二" ></p>
        <p><img  src="images/web3_09.gif" / alt="关于开发CSS3弹性盒模型的方法之二" ></p>
        <p><img  src="images/web3_10.gif" / alt="关于开发CSS3弹性盒模型的方法之二" ></p>
        <p><img  src="images/web3_11.gif" / alt="关于开发CSS3弹性盒模型的方法之二" ></p>
    </p>
</p>
</body>
登录后复制

CSS3代码:

/*这是一个三栏布局的页面,其中左侧栏目的宽度是固定的,而中间和右侧栏目的宽度是弹性的*/
<style>   
body{   
    margin:0;   
    padding:0;   
    text-align:center;   
}   
h1,h2{margin:2px;}   
#box{   
    margin:auto;   
    text-align:left;   
    width:1002px;   
    overflow:hidden;   
}   
/*定义box元素盒形显示,并设置子元素水平布置*/
#box{   
    display:box;   
    display:-moz-box;   
    display:-webkit-box;   
    box-orient:horizontal;   
    -moz-box-orient:horizontal;   
    -webkit-box-orient:horizontal;     
}   
/*定义盒子左侧栏目的宽度为固定显示*/
#box1{width:201px;}   
#box2,#box3{   
    border:1px solid #CCC;   
    margin:2px;    
}   
/*定义盒子内中间栏目的宽度为盒子剩余空间的2/3*/
#box2{   
    box-flex: 4;   
    -moz-box-flex: 4;   
    -webkit-box-flex: 4;   
}   
/*定义盒子内中间栏目的宽度为盒子剩余空间的1/3*/
#box3{   
    box-flex:2;   
    -moz-box-flex:2;   
    -webkit-box-flex:2;    
}   
#box2 p,#box3 p{   
    display:inline;   
}   
</style>
登录后复制

演示效果:

弹性空间的实现和分配

  在默认情况下,子元素并不具有弹性,它会竟可能的宽,以便使其所包含的内容可见,并且不会有任何溢出。如果要改变它的尺寸,则可以使用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代码:

<body>
<h1><img  src="images/web3_13.gif" / alt="关于开发CSS3弹性盒模型的方法之二" ></h1>
<p id="box">
    <!--左侧栏目-->
    <p id="box1"><img  src="images/web3_01.gif" / alt="关于开发CSS3弹性盒模型的方法之二" ></p>
    <!--中间栏目-->
    <p id="box2"></p>
    <!--右侧栏目-->
    <p id="box3"></p>
</p>
</body>
登录后复制

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

CSS3代码:

#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;   
}
登录后复制

演示效果:

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

CSS3代码:

#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代码:

#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;   
}
登录后复制

演示效果:

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

CSS代码:

#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;   
}
登录后复制

演示效果:

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

关于开发CSS3弹性盒模型的方法之一

以上就是关于开发CSS3弹性盒模型的方法之二的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号