html和css基础（五）盒子模型

最新推荐文章于 2024-08-06 14:46:11 发布

MsStrbig

最新推荐文章于 2024-08-06 14:46:11 发布

阅读量434

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML+CSS 文章标签： html 前端 css

本文链接：https://blog.youkuaiyun.com/MsStrbig/article/details/77935955

HTML+CSS 专栏收录该内容

28 篇文章

订阅专栏

盒子模型

图片来自于：百度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		body{
			background-color:rgb(241,244,255) ;
			
			
		}
			.box1{
				width: 200px;
				height: 200px;
				background-color:white ;/*盒子的内容区，我们写的文字都在这里面显示*/
				/*然后为盒子设置边框*/
				border: 10px red solid;
				/*设置内边距*/
				padding:20px ;
			/*	设置外边距*/
				margin:auto ;
				/*在margin中left,right设置为auto,可以让盒子居中显示.top和bottom设置为auto;*/
			}
			
		</style>
	</head>
	<body>
		<div class="box1">
			真的好想你
		</div>
		
		
	</body>
</html>

对于边框，内边距，外边距都有上下左右的设置都是按照顺时针设置的。

border: 10px redsolid;在边框的设置中border-width 20px,30px,40px,50px;分别对应上，右，下，左

盒子高度和宽度的计算=内边距+height(width)+外边距+边框