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

最新推荐文章于 2024-09-30 11:01:45 发布

「已注销」

最新推荐文章于 2024-09-30 11:01:45 发布

阅读量5k

点赞数

分类专栏： Web开发文章标签： css3 弹性盒模型

本文链接：https://blog.csdn.net/Lovejulyer/article/details/51234774

版权

本文介绍了CSS3弹性盒模型中的box-pack和box-align属性，详细解析了它们在管理和分配盒子空间上的作用。通过实例展示了不同取值如何影响元素的布局，包括水平和垂直方向上的对齐方式，以及如何处理空间溢出问题。

摘要由CSDN通过智能技术生成

通过阅读和学习书籍《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;
    /*定义提示对话框页面垂直居中显示*/