盒子模型

最新推荐文章于 2024-08-06 21:01:08 发布

AloneDrifters

最新推荐文章于 2024-08-06 21:01:08 发布

阅读量67

点赞数 1

分类专栏： web 文章标签： css html

本文链接：https://blog.csdn.net/qq_53609683/article/details/115758276

版权

web 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

盒子模型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			#div1{
				border: 1px groove red;
				width: 400px;
				height: 400px;
				/*内边距 内部元素距离当前块元素边界的距离*/
				/*同时设置上下左右四个内边距都是100px*/
				/*padding:100px;*/
				/*设置上下内边距为50px  左右内边距为100px */
				/*padding:50px 100px;*/
				/*设置 上 右 下 左 四个内边距*/
				/*padding: 10px 20px 30px 40px;*/
				/*分别单独设置四个内边距*/
				padding-top: 10px;
				padding-right: 20px;
				padding-bottom: 30px;
				padding-left: 40px;
			}
		</style>
	</head>
	<body>
		
		<div id="div1">
			asdfasdfasdf
		</div>
	</body>
</html>

盒子模型居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.outerdiv{
				width: 400px;
				height: 400px;
				border: 1px solid red;
				/*调整外边盒子的内边距*/
				/*padding-top: 20px;
				padding-left: 20px;*/
				
				/*通过外边距设置横向居中*/
				margin: 0px auto;
			}
			.innerdiv{
				width: 200px;
				height: 200px;
				border: 1px solid green;
				/*设置盒子的外边距*/
				/*margin-top: 20px;
				margin-left: 20px;*/
				/*设置横向居中*/
				margin: auto auto;
			}
			
		</style>
	</head>
	<body>
		<div class="outerdiv">
			<div class="innerdiv">
				你好
			</div>
		</div>
	</body>
</html>