首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

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

CSS3弹性盒模型开发笔记（三）

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
Dec 30 HTML / CSS
详解CSS3中border-image的使用
Jul 18 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
Aug 26 HTML / CSS
html5读取本地文件示例代码
Apr 22 HTML / CSS
使用HTML5的Notification API制作web通知的教程
May 08 HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
Aug 16 HTML / CSS
Html5监听手机摇一摇事件的实现
Nov 07 HTML / CSS
详解CSS不定宽溢出文本适配滚动
May 24 HTML / CSS
CSS 实现Chrome标签栏的技巧
Aug 04 HTML / CSS
flex布局中使用flex-wrap实现换行的项目实践
Jun 21 HTML / CSS
CSS使用SVG实现动态分布的圆环发散路径动画
Dec 24 HTML / CSS
box-shadow单边阴影的实现
May 21 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
锁(1) 性能优化(3) limit(1) 逻辑架构(1) mysql.user(1) offset(1) MYSQL函数(1) 事务(5) Mysql报错(1) 定时任务(2)
You might like
基于mysql的论坛（2）
2006/10/09 PHP
PHP和Mysqlweb应用开发核心技术－第1部分 Php基础－2 php语言介绍
2011/07/03 PHP
PHP开发者常犯的10个MySQL错误更正剖析
2012/01/30 PHP
仿Aspnetpager的一个PHP分页类代码 附源码下载
2012/10/08 PHP
javascript 树控件 比较好用
2009/06/11 Javascript
javascript encodeURI和encodeURIComponent的比较
2010/04/03 Javascript
jquery加载页面的方法(页面加载完成就执行)
2011/06/21 Javascript
javascript获取作用在元素上面的样式属性代码
2012/09/20 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
2013/04/12 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
2013/06/09 Javascript
Jquery解析json数据详解
2013/12/26 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
2015/03/04 Javascript
跟我学习JScript的Bug与内存管理
2015/11/18 Javascript
详解javascript高级定时器
2015/12/31 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
单击按钮发送验证码,出现倒计时的简单实例
2017/03/17 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
KOA+egg.js集成kafka消息队列的示例
2018/11/09 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
PHP网页抓取之抓取百度贴吧邮箱数据代码分享
2016/04/13 Python
Python中str is not callable问题详解及解决办法
2017/02/10 Python
python学生信息管理系统
2018/03/13 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
pycharm的python_stubs问题
2020/04/08 Python
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
2018/08/28 HTML / CSS
澳大利亚在线家具店：Luxo Living
2019/03/24 全球购物
营销与策划专业毕业生求职信
2013/11/01 职场文书
志愿者服务感言
2014/02/27 职场文书
服务承诺书格式
2014/05/21 职场文书
护士找工作求职信
2014/07/02 职场文书
学生自我评语
2015/01/04 职场文书
个人售房合同协议书
2016/03/21 职场文书
2019年“我为祖国点赞”演讲稿（3篇）
2019/09/26 职场文书
导游词之山东孔庙
2019/11/04 职场文书
SpringCloud之@FeignClient()注解的使用方式
2021/09/25 Java/Android