CSS3 盒布局与弹性盒布局
什么是CSS3 盒布局
在网页布局中,如果让让几个块状区域横向排列,常用的方法就是使用float:left。但使用float属性时,会出现一些问题,例如浮动,并且如果不同版块的内容数量不一样就会造成各个版块的高度不一样。
那么CSS3 盒布局display:box就可以解决这样的问题,它可以不需要使用float属性就可以横排块状元素。并且每一个版块的高度都是一样的。它的作用与CSS3多栏布局columns很相似。
怎么使用CSS3 盒布局display:box呢?方法很简单,只需要给父元素加上display:box即可。
1 |
<div class="codecolorer-container html4strict geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="html4strict codecolorer" style="white-space:nowrap">.tt<span style="color: #66cc66;">{</span>display:box;display:-webkit-box;display:-moz-box;<span style="color: #66cc66;">}</span></div></div> |
实例代码如下:
1 2 3 4 5 6 7 8 9 10 11 |
<div class="codecolorer-container html4strict geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="html4strict codecolorer" style="white-space:nowrap"><<span style="color: #000000; font-weight: bold;">style</span>><br> .tt<span style="color: #66cc66;">{</span>display:box;display:-webkit-box;<span style="color: #66cc66;">}</span><br> .ft1<span style="color: #66cc66;">{</span>font-<span style="color: #000066;">size</span>:20px;text-transform:capitalize;<span style="color: #000066;">width</span>:200px;<span style="color: #000066;">background</span>:#f00;padding:20px<span style="color: #66cc66;">}</span><br> .ft2<span style="color: #66cc66;">{</span>font-<span style="color: #000066;">size</span>:20px;text-transform:uppercase;<span style="color: #000066;">width</span>:200px;<span style="color: #000066;">background</span>:yellow;padding:20px<span style="color: #66cc66;">}</span><br> .ft3<span style="color: #66cc66;">{</span>font-<span style="color: #000066;">size</span>:20px;font-variant:small-caps;<span style="color: #000066;">width</span>:200px;<span style="color: #000066;">background</span>:green;padding:20px<span style="color: #66cc66;">}</span><br> <<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">style</span>><br> <<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"tt"</span>><br> <<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"ft1"</span>>首字母大写:hello world首字母大写:hello world首字母大写:hello world首字母大写:hello world首字母大写:hello world首字母大写:hello world<<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>><br> <<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"ft2"</span>>全部大写:hello world全部大写:hello world全部大写hello world全部大写:hello world全部大写:hello world<<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>><br> <<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"ft3"</span>>小型大写:Hello World小型大写:Hello World小型大写:小型大写:Hello World<<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>><br> <<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>></div></div> |
什么是弹性盒布局
上面的盒布局可以自动将块状区域横排,但是它不会随浏览屏幕变化而变化宽度形成自适应。这时可以给盒布局里子版块添加box-flex属性让变成弹性盒布局,就会自适应了。
语法:
.ft1{-webkit-box-flex:1;-moz-box-flex:1;}
另外还可以通过box-ordinal-group属性来改变每个子版块的的顺序,后面数字越小越靠前。
.ft1{-webkit-box-ordinal-group:1;-moz-box-ordinal-group:1;}
由于网站搬家,部分链接失效,如无法下载,请联系站长!谢谢支持!
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途!
3. 分享目的仅供大家学习和交流,请不要用于商业用途!
4. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
5. 本站所有资源来源于站长上传和网络,如有侵权请邮件联系站长!
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
9. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
10.如果您购买了某个产品,而我们还没来得及更新,请联系站长或留言催更,谢谢理解 !
GG资源网 » CSS3 盒布局与弹性盒布局
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途!
3. 分享目的仅供大家学习和交流,请不要用于商业用途!
4. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
5. 本站所有资源来源于站长上传和网络,如有侵权请邮件联系站长!
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
9. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
10.如果您购买了某个产品,而我们还没来得及更新,请联系站长或留言催更,谢谢理解 !
GG资源网 » CSS3 盒布局与弹性盒布局