css3弹性盒模型常用属性(CSS3弹性盒模型开发笔记三)
css3弹性盒模型常用属性
CSS3弹性盒模型开发笔记三本文介绍了CSS3弹性盒模型,供大家参考,大家亦可以结合CSS3弹性盒模型开发笔记(一)、CSS3弹性盒模型开发笔记(二)进行学习,具体内容如下
box-pack和box-align属性
当弹性元素和非弹性元素混合排版时,有可能会出现所有子元素的尺寸大小或小于盒子的尺寸,从而出现盒子空间不足或者富余的情况,这时就需要一种方法来管理盒子的空间。如果子元素的总尺寸小于盒子的尺寸,则可以使用box-align和box-pack属性进行管理。
box-pack属性可以在水平方向上对盒子的富余空间进行管理,该属性的基本语法如下:
box-pack:start | end | center | justify
取值说明:
start:所有子元素都显示在盒子的左侧,富余的空间显示在盒子的右侧。
end:所有子元素都显示在盒子的右侧,富余的空间显示在盒子的左侧。
justify:富裕的空间在子元素之间平均分配。在第一个子元素之前和最后一个子元素之后不分配空间。
center:富余的空间在盒子的两侧平均分配。
box-align属性可以在垂直方向上对盒子的富余空间进行管理,该属性的基本语法如下:
box-align:start | end | center | baseline | stretch
取值说明:
start:所有子元素沿着盒子的上边缘排列,都显示在盒子的上部,富余的空间显示在盒子的底部。
end:所有子元素沿着盒子的下边缘排列,都显示在盒子的底部,富裕的空间显示在盒子的上部。
center:富余的空间在盒子的上下两侧平均分配,即上面一半,下面一半。
baseline:所有盒子沿着它们的基线排列,富余的空间可前可后显示。
stretch:每个子元素的高度被调整到适合盒子的高度显示。
实战体验:自适应布局居中设计
HTML代码:
- <body>
- <li id="box"><img src="images/china.jpg" alt="css3弹性盒模型常用属性(CSS3弹性盒模型开发笔记三)" border="0" /> /></li>
- </li>
- </body>
CSS3代码:
- <style type="text/css">
- /*明确定义页面文档满窗口显示*/
- body,html{
- height:100%;
- width:100%;
- }
- body{/*清除页边距*/
- margin:0;
- padding:0;
- /*定义文档为弹性盒子显示*/
- display:box;
- display:-moz-box;
- display:-webkit-box;
- /*页面元素水平显示,针对本例可以省略*/
- box-orient:horizontal;
- -moz-box-orient:horizontal;
- -webkit-box-orient:horizontal;
- /*定义提示对话框页面水平居中显示*/
- box-pack:center;
- -moz-box-pack:center;
- -webkit-box-pack:center;
- box-align:center;
- /*定义提示对话框页面垂直居中显示*/
- -moz-box-align:center;
- -webkit-box-align:center;
- /*以背景方式模拟页面显示*/
- background:#04082b url(images/map1.jpg" alt="css3弹性盒模型常用属性(CSS3弹性盒模型开发笔记三)" border="0" />no-repeat top center;
- }
- #box{
- border:1px solid red;
- padding:4px;
- }
- </style>
演示效果:
关于布局空间管理的进一步分析
分析布局空间管理的各种情况。
基本代码:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>box-pack、box-align</title>
- <style type="text/css">
- #box {
- border:solid 1px red;
- width:600px;
- height:400px;
- display : -moz-box;
- display : -webkit-box;
- display : box;
- }
- #box li {
- margin:4px;
- border:solid 1px #eee;
- }
- #box li img { width:120px; }
- </style>
- </head>
- <body>
- <li id="box">
- <li><img src="images/1.jpg" alt="css3弹性盒模型常用属性(CSS3弹性盒模型开发笔记三)" border="0" /> /></li>
- <li><img src="images/5.jpg" alt="css3弹性盒模型常用属性(CSS3弹性盒模型开发笔记三)" border="0" /> /></li>
- <li><img src="images/7.jpg" alt="css3弹性盒模型常用属性(CSS3弹性盒模型开发笔记三)" border="0" /> /></li>
- <li><img src="images/9.jpg" alt="css3弹性盒模型常用属性(CSS3弹性盒模型开发笔记三)" border="0" /> /></li>
- </li>
- </body>
- </html>
演示效果:
子元素全部水平和垂直居中显示显示
- #box{
- /*水平居中管理*/
- box-pack:center;
- -moz-box-pack:center;
- -webkit-box-pack:center;
- /*垂直居中管理*/
- box-align:center;
- -moz-box-align:center;
- -webkit-box-align:center;
- }
演示效果:
子元素全部位于盒子的左下角,富余空间位于右上角
- #box{
- /*水平居中管理*/
- box-pack:start;
- -moz-box-pack:start;
- -webkit-box-pack:start;
- /*垂直居中管理*/
- box-align:end;
- -moz-box-align:end;
- -webkit-box-align:end;
- }
演示效果:
- 子元素水平平均分布,垂直伸展展示
- #box{
- /*水平居中管理*/
- box-pack:justify;
- -moz-box-pack:justify;
- -webkit-box-pack:justify;
- /*垂直居中管理*/
- box-align:stretch;
- -moz-box-align:stretch;
- -webkit-box-align:stretch;
- }
演示效果:
- 子元素水平平均分布,在垂直方向上按基线分布
- #box{
- /*水平居中管理*/
- box-pack:justify;
- -moz-box-pack:justify;
- -webkit-box-pack:justify;
- /*垂直居中管理*/
- box-align:baselinebaseline;
- -moz-box-align:baselinebaseline;
- -webkit-box-align:baselinebaseline;
- font-size:28px;
- }
演示效果:
- 子元素全部位于盒子的右侧并平均分布,并按垂直顺序进行分布
- #box{
- /*水平居中管理*/
- box-pack:justify;
- -moz-box-pack:justify;
- -webkit-box-pack:justify;
- /*垂直居中管理*/
- box-align:end;
- -moz-box-align:end;
- -webkit-box-align:end;
- /*垂直分布*/
- box-orient:vertical;
- -moz-box-orient:vertical;
- -webkit-box-orient:vertical;
- }
演示效果:
空间溢出管理
上述“子元素全部位于盒子的右侧并平均分布,并按垂直顺序进行分布”可以看出,弹性布局中盒子内的元素很容易“跑出”盒子的“包围圈”。这种现象被称为空间已出。与传统的盒模型一样,CSS允许使用overflow属性来处理溢出内容的显示方式。当然,我们还可以使用box-lines属性避免空间已出问题(目前各大浏览器支持不太好)。该属性语法如下:
box-lines:single | multiple
取值说明:
single:所有子元素都单行或者单行显示。
multiple:所有子元素可以多行或多列显示。
实战体验:让子元素分行显示
HTML代码:
- <body>
- <li id="box">
- <li><img src="images/1.jpg" alt="css3弹性盒模型常用属性(CSS3弹性盒模型开发笔记三)" border="0" /> /></li>
- <li><img src="images/2.jpg" alt="css3弹性盒模型常用属性(CSS3弹性盒模型开发笔记三)" border="0" /> /></li>
- <li><img src="images/3.jpg" alt="css3弹性盒模型常用属性(CSS3弹性盒模型开发笔记三)" border="0" /> /></li>
- <li><img src="images/4.jpg" alt="css3弹性盒模型常用属性(CSS3弹性盒模型开发笔记三)" border="0" /> /></li>
- <li><img src="images/5.jpg" alt="css3弹性盒模型常用属性(CSS3弹性盒模型开发笔记三)" border="0" /> /></li>
- <li><img src="images/6.jpg" alt="css3弹性盒模型常用属性(CSS3弹性盒模型开发笔记三)" border="0" /> /></li>
- <li><img src="images/7.jpg" alt="css3弹性盒模型常用属性(CSS3弹性盒模型开发笔记三)" border="0" /> /></li>
- <li><img src="images/8.jpg" alt="css3弹性盒模型常用属性(CSS3弹性盒模型开发笔记三)" border="0" /> /></li>
- </li>
- </body>
CSS3代码:
- <style type="text/css">
- #box {
- border:solid 1px red;
- width:600px;
- height:400px;
- display : -moz-box;
- display : -webkit-box;
- display : box;
- }
- #box {/*定义子元素分行显示*/
- -moz-box-lines : multiple;
- -webkit-box-lines : multiple;
- box-lines : multiple;
- }
- #box li {
- margin:4px;
- border:solid 1px #aaa;
- -moz-box-flex: 1;
- -webkit-box-flex: 1;
- box-flex: 1;
- }
- #box li img { width:120px; }
- </style>
演示效果:
以上就是本文的全部内容,希望对大家的学习有所帮助。
本文地址:http://blog.csdn.net/lovejulyer/article/details/51234774
- CSS3弹性布局
- css3弹性布局(CSS3弹性布局内容对齐justify-content属性使用详解)
- 弹性云主机的组成(什么叫弹性云服务器?弹性云主机的“弹性”反映在哪?)
- 云服务器弹性体现在哪些方面(云服务器的性能表现在哪些方面?)
- css3盒子布局(CSS3弹性伸缩布局之box布局)
- css弹性布局设置每行显示指定个数(CSS实现多行多列的布局的实例代码)
- css3网格布局图(详解CSS3 弹性布局快速入门)
- 简述css盒子模型的认识(CSS3弹性盒模型开发笔记一)
- css3弹性盒模型常用属性(CSS3弹性盒模型开发笔记三)
- 我们现在吃的苹果是哪里来的 原来现代苹果引入中国仅有一百多年(我们现在吃的苹果是哪里来的)
- 买绿宝不能只挑黄绿色 菜农教你3招挑,个个皮薄肉脆,香甜爆汁(买绿宝不能只挑黄绿色)
- 大果肉搭配薄瓜皮, 绿宝 脆甜爽口,不愧是甜瓜中的 佼佼者(大果肉搭配薄瓜皮)
- 河南尉氏县因地制宜发展果蔬种植 水坡镇绿宝甜瓜变 金瓜(河南尉氏县因地制宜发展果蔬种植)
- 谢广坤,你这么欺负谢腾飞,良心不会痛吗(你这么欺负谢腾飞)
- 乡村爱情15 宋晓峰怀疑自己孩子,腾飞与姜奶奶亲子鉴定出结果(宋晓峰怀疑自己孩子)
热门推荐
- dedecms增加导航内容(织梦DEDECMS中让近三天发布的文章显示红色日期或加上new字或小图片的方法)
- dedecms新字段(DEDECMSv5.6 tags.php标签不能按照时间排序的问题)
- 源代码管理中出现重复文件的解决方法
- linux设置监控命令(linux系统虚拟主机开启支持SourceGuardiansg11加密组件的详细步骤)
- html5canvas功能介绍(Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 附转换公式)
- dede织梦管理后台密码忘记了(织梦DEDE后台更新了广告而前台没有变化的解决办法)
- php环境搭建apache(apache 支持 php5 的配置方法)
- html导航条下拉菜单代码(Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码)
- mysqlinnodb有什么功能(Mysql技术内幕之InnoDB锁的深入讲解)
- sqlserver查询自定义时间数据(SQLServer查询某个时间段购买过商品的所有用户)