css3盒子布局--管理盒子的空间(box-pack和box-align)

来源：互联网发布：迅雷9登录网络错误编辑：程序博客网时间：2024/05/21 06:46

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3定位布局-管理盒子的空间(box-pack和box-align)</title>
<style>
body,html{
width:100%;
height:100%;
}
body{
margin:0;
padding:0;
display: box;
display: -moz-box;
display:-webkit-box;
-moz-orient: horizontal;
-webkit-box-orient: horizontal;
box-orient:horizontal;
-moz-box-pack: center;
-webkit-box-pack: center;
box-pack:center;
-moz-box-align: center;
-webkit-box-align: center;
box-align:center;
background-image: url(img/1.jpg);
background-repeat: no-repeat;
background-position: top center;
}
.box{
border:1px solid blue;
padding:4px;
}

</style>
</head>
<body>

<div class="box">
<img src="img/11.jpg"/>
</div>
</body>

</html>

注意：在body和html中设置width和height为100%，因为

div的100%是从其上一级div的宽高继承来的，有一点很关键，就是要设置div100%显示，必须设置其上一级div的宽度或高度，否则无效。

前面总得有个容器说明他的高度是多少。这样的话div才能按比例100%继承上一级的高度可惜的是浏览器一般默认解释为内容的高度，而不是100%。解决方法：只要为html和body设置高度为100%就可以了html,body{height:100%;}这样之后div会按比例来继承上一级的高度了.

0 0