程序博客网 > 大众软件官网

CSS3-盒模型设计

来源：互联网 发布：大众软件官网 编辑：程序博客网 时间：2024/04/30 11:24

一、弹性盒模型

a)        注意在使用弹性盒模型的时候父元素必须要加display:box 或 display:inline-box

例：


b)        Box-orient 定义盒模型的布局方向

                                                                  i.             Horizontal 水平显示

                                                                ii.             vertical 垂直方向

例：

<!DOCTYPEhtml>

<html>

    <head>

       <metacharset="UTF-8">

       <title></title>

       <styletype="text/css">

           .box{height:100px;border:10pxsolid#000;padding:10px;display:-webkit-box;-webkit-box-orient:vertical;}

           .boxdiv{width:100px;height:100px;background: red; border:1pxsolid white;}

       </style>

    </head>

    <body>

       <divclass="box">

           <div>1</div>

           <div>2</div>

           <div>3</div>

           <div>4</div>

           <div>5</div>

       </div>

    </body>

</html>


c)        box-direction 元素排列顺序

                                                                  i.             Normal 正序

                                                                ii.             Reverse 反序

例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{height: 100px; border: 10px solid #000;padding:10px;display: -webkit-box;-webkit-box-direction: reverse;
font-size: 20px;color: white;}
.box div{width: 100px; height: 100px;background: red; border: 1px solid white;}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>

d)        box-ordinal-group 设置元素的具体位置

例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{height: 100px; border: 10px solid #000;padding:10px;display: -webkit-box;
font-size: 20px;color: white;}
.box div{width: 100px; height: 100px;background: red; border: 1px solid white;}
.box div:nth-of-type(1){-webkit-box-ordinal-group: 2;}
.box div:nth-of-type(2){-webkit-box-ordinal-group: 4;}
.box div:nth-of-type(3){-webkit-box-ordinal-group: 1;}
.box div:nth-of-type(4){-webkit-box-ordinal-group: 5;}
.box div:nth-of-type(5){-webkit-box-ordinal-group: 3;}

</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>

e)        Box-flex 定义盒子的弹性空间

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

例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{height: 100px; border: 10px solid #000;padding:10px;display: -webkit-box;
font-size: 20px;color: white;}
.box div{ height: 100px;background: red; border: 1px solid white;}
.box div:nth-of-type(1){-webkit-box-flex: 1;}
.box div:nth-of-type(2){-webkit-box-flex: 2;}
.box div:nth-of-type(3){-webkit-box-flex: 3;}
.box div:nth-of-type(4){-webkit-box-flex: 4;}
.box div:nth-of-type(5){-webkit-box-flex: 5;}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>

f)        box-pack 对盒子富裕的空间进行管理

                                                                  i.             Start 所有子元素在盒子左侧显示，富裕空间在右侧

                                                                ii.             End 所有子元素在盒子右侧显示，富裕空间在左侧

                                                               iii.             Center 所有子元素居中

                                                               iv.             Justify 富余空间在子元素之间平均分布

例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{height: 100px; border: 10px solid #000;padding:10px;display: -webkit-box;
font-size: 20px;color: white;-webkit-box-pack:justify;}
.box div{width:100px;height: 100px;background: red; border: 1px solid white;}

</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>

g)        box-align 在垂直方向上对元素的位置进行管理

                                                                  i.             Star 所有子元素在据顶

                                                                ii.             End 所有子元素在据底

                                                               iii.             Center 所有子元素居中

例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html{height: 100%;}
body{height: 100%;margin: 0;}
.box{height: 100%;padding:10px;display: -webkit-box;
font-size: 20px;color: white;-webkit-box-align:center;-webkit-box-pack: center;}
.box div{width:100px;height: 100px;background: red; border: 1px solid white;}

</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>

0 0
大众软件官网 大众软件官网
原创粉丝点击
热门IT博客
税收数据质量存在问题税收数据质量存在问题
如何注销手机淘宝账户如何注销手机淘宝账户
神经网络的优缺点 知乎
手机怎发淘宝店铺链接
adobe cc mac破解补丁
ip地址和mac地址绑定
qq mac版登陆两个账号
意林少年版合订本(淘宝
安卓抓源软件
北京太极计算机做java
bluestacks蓝叠 mac
在中国的 外国人知乎
手绘板sai软件
谈谈对网络攻击的认识
广州数据分析培训机构
php环境运行asp
网站注册域名
软件实施服务合同
mac优酷文件在哪里
淘宝联盟提现不到账
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 led背光源厂家 led发光字光源 led光源品牌排行榜 led背光源液晶电视 光源是什么意思 led条形光源价格 led光源生产厂家 led光源制造商 视觉光源厂家 led液晶电视背光源 液晶电视的背光源 液晶显示器背光源 大功率集成led光源 日光灯属于什么光源 近光灯标志 远光灯和近光灯图解 近光灯 远光灯标志 远光灯 近光灯怎么开 远光灯怎么开 高速开远光灯 开远光灯 近光灯远光灯标志 近光灯和远光灯标志 高速开远光灯还是近光灯 补光灯 光灯 远光灯和近光灯往哪拨 慧灯之光 近光灯图标 近关灯和远光灯图标 示宽灯和近光灯可以一起开吗 汽车远光灯怎么开 光猫pon灯闪烁 远近光灯 近光灯远光灯 植物补光灯 光猫正常几个灯亮 高速上开远光灯还是近光灯 远近光灯图标

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里