《CSS3实战》笔记--弹性盒模型（三）

时间：2016-04-26 21:07:28 阅读：229 评论：0 收藏：0 [点我收藏+]

标签：

通过阅读和学习书籍《CSS3实战》总结
《CSS3实战》/成林著.—北京机械工业出版社2011.5

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>
<div id="box"><img src="images/china.gif" /></div>  
</div>
</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) 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 div {
    margin:4px;
    border:solid 1px #eee;
}
#box div img { width:120px; }
</style>
</head>

<body>
<div id="box">
    <div><img src="images/1.png" /></div>
    <div><img src="images/5.png" /></div> 
    <div><img src="images/7.png" /></div>  
    <div><img src="images/9.png" /></div>           
</div>
</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:baseline;
    -moz-box-align:baseline;
    -webkit-box-align:baseline;
    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>
<div id="box">
    <div><img src="images/1.png" /></div>
    <div><img src="images/2.png" /></div>
    <div><img src="images/3.png" /></div>
    <div><img src="images/4.png" /></div>
    <div><img src="images/5.png" /></div>
    <div><img src="images/6.png" /></div>
    <div><img src="images/7.png" /></div>
    <div><img src="images/8.png" /></div>
</div>
</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 div {
    margin:4px;
    border:solid 1px #aaa;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
}
#box div img { width:120px; }
</style>

演示效果：
技术分享

《CSS3实战》笔记--弹性盒模型（三）

标签：

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

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行