div盒子的几种放置模式

最新推荐文章于 2023-10-15 22:53:55 发布

jaxonHJX

最新推荐文章于 2023-10-15 22:53:55 发布

阅读量1.7k

点赞数 1

分类专栏： web前端文章标签： html css box 布局 div布局

本文链接：https://blog.csdn.net/hujiaxuan1995/article/details/40210637

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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>

jaxonHJX

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div盒子的几种放置模式

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

扫一扫