CSS3盒模型display:box简述
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。
box-flex属性
box-flex主要让子容器针对父容器的宽度按一定规则进行划分
必须给父容器wrap定义css属性display:box其子容器才可以进行划分(如果定了display:box则该容器则定义为了内联元素,使用margin:0px auto让其居中是无效的,要想使其居中只能通过它的父容器的text-align:center);分别给sectionOne、sectionTwo、sectionThree的box-flex设置了3、2、1,也就是说这三个子容器将父容器wrap的宽度600px分为6份,sectionOne占居父结构宽度的3/6即300px,sectionOne占居父结构宽度的2/6即200px,sectionThree占居父结构宽度的1/6即100px。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<style>
.wrap{
width:600px;
height:200px;
display:-moz-box;
display:-webkit-box;
display:box;
}
.sectionOne{
background:orange;
-moz-box-flex:;
-webkit-box-flex:;
box-flex:;
}
.sectionTwo{
background:purple;
-moz-box-flex:;
-webkit-box-flex:;
box-flex:;
}
.sectionThree{
-moz-box-flex:;
-webkit-box-flex:;
box-flex:;
background:green;
}
</style>
</head>
<body>
<article class="wrap">
<section class="sectionOne">01</section>
<section class="sectionTwo">02</section>
<section class="sectionThree">03</section>
</article>
</body>
</html>
CSS3盒模型display:box简述的更多相关文章
- CSS3盒模型display:box详解
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box ...
- CSS3盒模型display:box;box-flex:3;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- [转]CSS3盒模型display:box详解
时间:2014-02-25来源:网络作者:未知编辑:RGB display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布 ...
- CSS3.0盒模型display:box;的使用
CSS3.0盒模型display:-webkit-box;的使用 box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂 ...
- CSS3弹性盒模型 display:box
刚开始做网页时就有一个困惑,为什么display:block只能垂直排列,如果要水平排列就要使用float:left等方式.这种方法最难受的当然是当子元素的数量改变时,需要去修改子元素的宽度使重新适应 ...
- CSS3盒模型display初探(display:box/display:flex)
可以实现水平等分切割等.日后在研究,做个记录. 首先要声明:display:box,像谷歌浏览器要加前缀识别码:display:-webkit-box; 然后才开始使用其属性,同时也是要带上前缀识别码 ...
- CSS3盒模型display:-webkit-box;的使用
box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box-flex属性还没有得到 ...
- 移动web开发实践-css3(1)盒模型display:-webkit-box;的使用
提到移动布局不得不提到盒模型display:-webkit-box;这个属性,在移动布局中浮动已经不在重要,相反自适应成为主要的需求,所以display:-webkit-box;变得尤为重要. box ...
- CSS3盒模型温故
CSS有一种基础设计模式叫盒模型,定义了Web页面中的元素是如何看做盒子来解析的.每一个盒子有不同的展示界面,下面就来介绍盒模型,主要有一下几种盒模型:inline.inline-block.bloc ...
随机推荐
- 使用PHP模拟post提交数据
使用PHP模拟post提交数据 分类: PHP LAMP 2013-04-13 12:03 3954人阅读 评论(0) 收藏 举报 CurlsocketPHP 这也是个老生常谈的话题了,上午花了点时间 ...
- Matplot相关(二)——统计图
Matplotlib:其能够支持所有的2D作图和部分3D作图.能通过交互环境做出印刷质量的图像. ————————缩写定义———————— import matplot.pyplot as plt — ...
- 解决hash冲突的办法
1.开发定址法 2.再哈希法 3.链地址法 4.建立一个公共溢出区
- Bytes to be written to the stream exceed the Content-Length bytes size specified 解决方法
context.Response.ContentType = encode; using (StreamWriter writer = new StreamWriter( ...
- Node单线程与异步编程的初步理解
最近学习了一些关于node的单线程与异步的知识,想拿过来和大家分享下: var async = require('async') //并行无关联,等待事件为最长时间请求过程.如以下两个任务执行时间 c ...
- Apache 防盗链配置
盗链 网站内有许多的图片地址,或一些我们可以用到的资源,在这种情况下,我可以通过赋值其他图片链接地址,到我自己的平台上,这样相当于盗取了一张图片的链接,那么盗链会有什么危害呢? 当我们盗取一张图片链接 ...
- 使用AutoIT检测已安装软件,并将结果保存在桌面
$file = "\adobe安装列表.txt" $regedit1 = "hklm64\SOFTWARE\Wow6432Node\Microsoft\Windows\C ...
- mysql一次性删除所有表而不删除数据库
1.执行如下语句获取删除语句 SELECT CONCAT( 'drop table ', table_name, ';' ) from information_schema.tables where ...
- ubuntu 16.04 vscode + php debug
1.vscode 安装PHP Debug扩展: 2.php环境配置: 1.安装xdebug扩展: sudo apt-get install php-xdebug 2.找到扩展的路径: chq@chq- ...
- linux 分析进程占用CPU过高
重点是查看进程的线程中,哪个线程占用cpu过高,然后用gdb附加到进程,调试线程,看是否有死循环或者死锁等问题,步骤如下: 1 先用ps + grep找出该死的进程pid,比如 1706 2 top ...