CSS3弹性盒模型开发笔记(三)


Posted in HTML / CSS onApril 26, 2016

本文介绍了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代码:

XML/HTML Code复制内容到剪贴板
  1. <body>  
  2. <div id="box"><img src="images/china.gif" /></div>     
  3. </div>  
  4. </body>  
  5.   

CSS3代码:

CSS Code复制内容到剪贴板
  1. <style type="text/css">   
  2. /*明确定义页面文档满窗口显示*/  
  3. body,html{   
  4.     height:100%;   
  5.     width:100%;   
  6. }   
  7. body{/*清除页边距*/  
  8.     margin:0;   
  9.     padding:0;   
  10.     /*定义文档为弹性盒子显示*/  
  11.     display:box;   
  12.     display:-moz-box;   
  13.     display:-webkit-box;   
  14.     /*页面元素水平显示,针对本例可以省略*/  
  15.     box-orient:horizontal;   
  16.     -moz-box-orient:horizontal;   
  17.     -webkit-box-orient:horizontal;   
  18.     /*定义提示对话框页面水平居中显示*/  
  19.     box-pack:center;   
  20.     -moz-box-pack:center;   
  21.     -webkit-box-pack:center;   
  22.     box-align:center;   
  23.     /*定义提示对话框页面垂直居中显示*/  
  24.     -moz-box-align:center;   
  25.     -webkit-box-align:center;   
  26.     /*以背景方式模拟页面显示*/  
  27.     background:#04082b url(images/map1.jpg) no-repeat top center;   
  28. }   
  29. #box{   
  30.    border:1px solid red;   
  31.    padding:4px;   
  32. }   
  33. </style>   
  34.   

演示效果:

CSS3弹性盒模型开发笔记(三)

关于布局空间管理的进一步分析

分析布局空间管理的各种情况。

基本代码:

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>box-pack、box-align</title>  
  6. <style type="text/css">  
  7.   
  8. #box {   
  9.     border:solid 1px red;   
  10.     width:600px;   
  11.     height:400px;   
  12.   
  13.     display : -moz-box;   
  14.     display : -webkit-box;   
  15.     display : box;   
  16. }   
  17. #box div {   
  18.     margin:4px;   
  19.     border:solid 1px #eee;   
  20. }   
  21. #box div img { width:120px; }   
  22. </style>  
  23. </head>  
  24.   
  25. <body>  
  26. <div id="box">  
  27.     <div><img src="images/1.png" /></div>  
  28.     <div><img src="images/5.png" /></div>    
  29.     <div><img src="images/7.png" /></div>     
  30.     <div><img src="images/9.png" /></div>              
  31. </div>  
  32. </body>  
  33. </html>  
  34.   

演示效果:

CSS3弹性盒模型开发笔记(三)

子元素全部水平和垂直居中显示显示

CSS Code复制内容到剪贴板
  1. #box{   
  2.     /*水平居中管理*/  
  3.     box-pack:center;   
  4.     -moz-box-pack:center;   
  5.     -webkit-box-pack:center;   
  6.     /*垂直居中管理*/  
  7.     box-align:center;   
  8.     -moz-box-align:center;   
  9.     -webkit-box-align:center;   
  10. }   
  11.   

演示效果:

CSS3弹性盒模型开发笔记(三)

子元素全部位于盒子的左下角,富余空间位于右上角

CSS Code复制内容到剪贴板
  1. #box{   
  2.     /*水平居中管理*/  
  3.     box-pack:start;   
  4.     -moz-box-pack:start;   
  5.     -webkit-box-pack:start;   
  6.     /*垂直居中管理*/  
  7.     box-align:end;   
  8.     -moz-box-align:end;   
  9.     -webkit-box-align:end;   
  10. }   
  11.   

演示效果:

CSS3弹性盒模型开发笔记(三)

- 子元素水平平均分布,垂直伸展展示

CSS Code复制内容到剪贴板
  1. #box{   
  2.     /*水平居中管理*/  
  3.     box-pack:justify;   
  4.     -moz-box-pack:justify;   
  5.     -webkit-box-pack:justify;   
  6.     /*垂直居中管理*/  
  7.     box-align:stretch;   
  8.     -moz-box-align:stretch;   
  9.     -webkit-box-align:stretch;   
  10. }   
  11.   

演示效果:

CSS3弹性盒模型开发笔记(三)

- 子元素水平平均分布,在垂直方向上按基线分布

CSS Code复制内容到剪贴板
  1. #box{   
  2.     /*水平居中管理*/  
  3.     box-pack:justify;   
  4.     -moz-box-pack:justify;   
  5.     -webkit-box-pack:justify;   
  6.     /*垂直居中管理*/  
  7.     box-align:baselinebaseline;   
  8.     -moz-box-align:baselinebaseline;   
  9.     -webkit-box-align:baselinebaseline;   
  10.     font-size:28px;   
  11. }   
  12.   

演示效果:

CSS3弹性盒模型开发笔记(三)

- 子元素全部位于盒子的右侧并平均分布,并按垂直顺序进行分布

CSS Code复制内容到剪贴板
  1. #box{   
  2.     /*水平居中管理*/  
  3.     box-pack:justify;   
  4.     -moz-box-pack:justify;   
  5.     -webkit-box-pack:justify;   
  6.     /*垂直居中管理*/  
  7.     box-align:end;   
  8.     -moz-box-align:end;   
  9.     -webkit-box-align:end;   
  10.     /*垂直分布*/  
  11.     box-orient:vertical;   
  12.     -moz-box-orient:vertical;   
  13.     -webkit-box-orient:vertical;       
  14. }   
  15.   

演示效果:

CSS3弹性盒模型开发笔记(三)

空间溢出管理

上述“子元素全部位于盒子的右侧并平均分布,并按垂直顺序进行分布”可以看出,弹性布局中盒子内的元素很容易“跑出”盒子的“包围圈”。这种现象被称为空间已出。与传统的盒模型一样,CSS允许使用overflow属性来处理溢出内容的显示方式。当然,我们还可以使用box-lines属性避免空间已出问题(目前各大浏览器支持不太好)。该属性语法如下:

box-lines:single | multiple

取值说明:

single:所有子元素都单行或者单行显示。

multiple:所有子元素可以多行或多列显示。

实战体验:让子元素分行显示

HTML代码:

XML/HTML Code复制内容到剪贴板
  1. <body>  
  2. <div id="box">  
  3.     <div><img src="images/1.png" /></div>  
  4.     <div><img src="images/2.png" /></div>  
  5.     <div><img src="images/3.png" /></div>  
  6.     <div><img src="images/4.png" /></div>  
  7.     <div><img src="images/5.png" /></div>  
  8.     <div><img src="images/6.png" /></div>  
  9.     <div><img src="images/7.png" /></div>  
  10.     <div><img src="images/8.png" /></div>  
  11. </div>  
  12. </body>  
  13.   

CSS3代码:

CSS Code复制内容到剪贴板
  1. <style type="text/css">   
  2. #box {   
  3.     border:solid 1px red;   
  4.     width:600px;   
  5.     height:400px;   
  6.     display : -moz-box;   
  7.     display : -webkit-box;   
  8.     display : box;   
  9. }   
  10. #box {/*定义子元素分行显示*/  
  11.     -moz-box-lines : multiple;   
  12.     -webkit-box-lines : multiple;   
  13.     box-lines : multiple;   
  14. }   
  15. #box div {   
  16.     margin:4px;   
  17.     border:solid 1px #aaa;   
  18.     -moz-box-flex: 1;   
  19.     -webkit-box-flex: 1;   
  20.     box-flex: 1;   
  21. }   
  22. #box div img { width:120px; }   
  23. </style>   
  24.   

演示效果:

CSS3弹性盒模型开发笔记(三)

以上就是本文的全部内容,希望对大家的学习有所帮助。

本文地址:http://blog.csdn.net/lovejulyer/article/details/51234774

HTML / CSS 相关文章推荐
玩转CSS3色彩
Jan 16 HTML / CSS
让IE支持CSS3的不完全兼容方案
Sep 19 HTML / CSS
基于html和CSS3制作酷炫的导航栏
Sep 23 HTML / CSS
CSS3实现瀑布流布局与无限加载图片相册的实例代码
Dec 22 HTML / CSS
CSS3制作酷炫的条纹背景
Nov 09 HTML / CSS
html5 worker 实例(一) 为什么测试不到效果
Jun 24 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
Nov 18 HTML / CSS
HTML5在线预览PDF的示例代码
Sep 14 HTML / CSS
canvas绘制视频封面的方法
Feb 05 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
Mar 20 HTML / CSS
Html5应用程序缓存(Cache manifest)
Jun 04 HTML / CSS
Html5页面播放M4a音频文件
Mar 30 HTML / CSS
浅析两列自适应布局的3种思路
May 03 #HTML / CSS
CSS3 3D位移translate效果实例介绍
May 03 #HTML / CSS
详解CSS的border边框属性及其在CSS3中的新特性
May 10 #HTML / CSS
CSS3中border-radius属性设定圆角的使用技巧
May 10 #HTML / CSS
CSS3使用多列制作瀑布流
May 10 #HTML / CSS
使用CSS3的rem属性制作响应式页面布局的要点解析
May 24 #HTML / CSS
深入解读CSS3中transform变换模型的渲染
May 27 #HTML / CSS
You might like
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
php中出现空白页的原因及解决方法汇总
2014/07/08 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
php无法连接mysql数据库的正确解决方法
2016/07/01 PHP
PHP实现将多个文件中的内容合并为新文件的方法示例
2017/06/10 PHP
奇妙的js
2007/09/24 Javascript
北京奥运官方网站幻灯切换效果flash版打包下载
2008/01/30 Javascript
javascript 面向对象编程 function也是类
2009/09/17 Javascript
jquery插件制作教程 txtHover
2012/08/17 Javascript
JavaScript在多浏览器下for循环的使用方法
2012/11/07 Javascript
JQuery操作tr和td内容的方法实例
2013/03/06 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
JavaScript使用循环和分割来替换和删除元素实例
2014/10/13 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
2015/03/18 Javascript
JavaScript实现数字数组正序排列的方法
2015/04/06 Javascript
js限制文本框的输入内容代码分享(3类)
2015/08/20 Javascript
jQuery短信验证倒计时功能实现方法详解
2016/05/25 Javascript
BootStrap与Select2使用小结
2017/02/17 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
Node.js中流(stream)的使用方法示例
2017/07/16 Javascript
解决vue keep-alive 数据更新的问题
2018/09/21 Javascript
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
[29:23]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场1
2014/05/23 DOTA
[07:12]2014DOTA2西雅图国际邀请赛 黑马Liquid专题采访
2014/07/12 DOTA
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
详解Python数据分析--Pandas知识点
2019/03/23 Python
Python字典对象实现原理详解
2019/07/01 Python
Python GUI之tkinter窗口视窗教程大集合(推荐)
2020/10/20 Python
化石印度尼西亚在线商店:Fossil Indonesia
2019/03/11 全球购物
雷曼兄弟的五金店:Lehman’s Hardware Store
2019/04/10 全球购物
12月小学生校园广播稿
2014/02/04 职场文书
《独坐敬亭山》教学反思
2014/04/08 职场文书
施工员岗位职责
2015/02/10 职场文书
修改并编译golang源码的操作步骤
2021/07/25 Golang
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL
MySQL索引 高效获取数据的数据结构
2022/05/02 MySQL