div盒子的几种放置模式

来源：互联网发布：国外域名备案编辑：程序博客网时间：2024/05/21 07:05

1.div的居中

布局居中或div布局居中，此时将使用margin样式，可能对新手来说margin好像与居中这一词不相干，但恰巧margin对应div布局居中联系非常紧密。在不设置margin:0 auto时，最外层DIV布局有的浏览器默认居中、有的浏览器靠左，出现这样情况，就是有的浏览器默认情况对div默认给予了margin:0 auto居中，而有的浏览器没有给予margin:0 auto居中，所以要让DIV盒子布局居中只需要margin:0 auto即可实现。

当然一般严谨地说，让一个DIV布局居中，最好对body设置一个text-align:center（CSS内容居中）样式，这样就更加完美。

代码实例：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>单个div居中实例</title><style>body{text-align:center;}.box{margin:0 auto;width:400px;height:100px;border:1px solid #fff;}</style></head><body><div class="box">DIV盒子居中</div></body></html>

2.上中下结构的div

上中下结构为常见布局结构，一般普通（企业网站）网页我们可以大致分为上（头部）、中（内容区）、下（底部版权）组成。而这其实是由最简单上下结构CSS布局演变而成，只不过多了一个div层结构而且，本质布局方法技巧不变。

代码实例：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>单个div居中实例</title><style>body{text-align:center;}#head,#content,#foot{margin:0 auto;width:400px;height:100px;}#head{border:1px solid #EE2626;}#content{border:1px solid #5B44D3;height:200px;}#foot{border:1px solid #F30E0E;}</style></head><body><div id="head"></div><div id="content"></div><div id="foot"></div></body></html>

0 0