学做网站培训课程介绍

当前位置:

CSS3 盒布局与弹性盒布局

什么是CSS3 盒布局

在网页布局中,如果让让几个块状区域横向排列,常用的方法就是使用float:left。但使用float属性时,会出现一些问题,例如浮动,并且如果不同版块的内容数量不一样就会造成各个版块的高度不一样。

那么CSS3 盒布局display:box就可以解决这样的问题,它可以不需要使用float属性就可以横排块状元素。并且每一个版块的高度都是一样的。它的作用与CSS3多栏布局columns很相似。

CSS3 盒布局

怎么使用CSS3 盒布局display:box呢?方法很简单,只需要给父元素加上display:box即可。


.tt{display:box;display:-webkit-box;display:-moz-box;}

实例代码如下:


<style>
.tt{display:box;display:-webkit-box;}
.ft1{font-size:20px;text-transform:capitalize;width:200px;background:#f00;padding:20px}
.ft2{font-size:20px;text-transform:uppercase;width:200px;background:yellow;padding:20px}
.ft3{font-size:20px;font-variant:small-caps;width:200px;background:green;padding:20px}
</style>
<div class="tt">
<div class="ft1">首字母大写:hello world首字母大写:hello world首字母大写:hello world首字母大写:hello world首字母大写:hello world首字母大写:hello world</div>
<div class="ft2">全部大写:hello world全部大写:hello world全部大写hello world全部大写:hello world全部大写:hello world</div>
<div class="ft3">小型大写:Hello World小型大写:Hello World小型大写:小型大写:Hello World</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;}

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 在前端制作过程中,会使用FORM表单来提交数据,FORM表单中有一个checkbox复选框,可以同时选择多个信息来传递。那么如何使用PHP来接收从FORM表单发送
  • 宝塔创建的网站,默认情况下让你填写的是域名,没有注明是ip,但在没有备案的情况下,无法使用域名来访问,我们可以直接使用ip地址来访问,来看看如何
  • 对于一些网络小白想建立一个网站,最方便的方法就是通过开源CMS程序来建网站。省去了复杂的编程过程,准备一些建网站所需要的条件后就可以自己建立一
  • 我们注意到,很多的网站都有WEB分享按钮,可以一键分享到很多的网站平台,如:分享到微博、微信、人人网等等。以前我们做这种WEB分享按钮使用的是百
  • 现在常用的邮箱有163邮箱、QQ邮箱。它们的特点就是邮箱后缀是各自网站的域名。如admin@163.com,admin@qq.com。下面学做网站论坛给大家介绍一下如何将
  • 我们知道,网站CDN加速可以有效的提升网站打开速度,降低网站服务器的负担。但是如果你网站同步了百度小程序,使用CDN加速就会出现一些意想不到的问题
  • 现在很多企业网站都安装了百度商桥,由于现在百度商桥只限百度推广用户使用,否则就需要收费了。那么我们也可自己制作一下类似百度商桥的网站在线留言
  • 公司建网站现在特别普遍了,很多公司都有自己的网站。至于公司建网站多少钱,企业网站制作价格要根据具体企业网站的要求不同而不同。下面学做网站论坛
  • 默认情况下,VIDEO视频标签播放视频时,它的速度是普通的速度播放。没有快速和慢速播放功能的。那么如何自己给VIDEO视频标签添加倍速播放功能呢?下面
  • 我们制作网站后,如果网站上需要支付功能的话,就需要给我们的网站对接微信支付功能。方便用户在我们网站上直接支付,这在学做网站论坛的建站培训课程