CSS-盒子模型_border: 2px solid blue-CSDN博客

本文链接：https://blog.csdn.net/Tommy5553/article/details/80792042

盒子模型

在进行布局前要把数据封装到一块区域内

1、边框

属性：

border: 2px solid blue;

border：可以统一设置上下左右，也可以单独设置

上：border_top

下：border_bottom

左：border_left

右：border_right

<!doctype html>
<html>
 <head>
  <title>Document</title>
  <style type = "text/css">
  	div
	{
		width:200px;
		height:100px;

		border:2px solid blue;
	}
	#div12
	{
		border-right:2px dashed yellow;
	}
  </style>
 </head>
 <body>
  <div id = "div11">AAAAAAAA</div>
  <div id = "div12">BBBBBBBB</div>
  <div id = "div13">CCCCCCCC</div>
 </body>
</html>

2、内边距

属性：

padding：可以统一和单独设置，上下左右类似border

<!doctype html>
<html>
 <head>
  <title>Document</title>
  <style type = "text/css">
  	div
	{
		width:200px;
		height:100px;

		border:2px solid blue;
	}
	#div21
	{
		padding:20px;
	}
	#div22
	{
		padding-left:20px;
		padding-top:40px;
		padding-right:10px;
	}
  </style>
 </head>
 <body>
  <div id = "div21">AAAAAAAAA</div>
  <div id = "div22">BBBBBBBB</div>
  <div id = "div23">CCCCCCCC</div>
 </body>
</html>

3、外边距

属性：

margin：可以统一和单独设置，上下左右类似border

<!doctype html>
<html>
 <head>
  <title>Document</title>
  <style type = "text/css">
  	div
	{
		width:200px;
		height:100px;

		border:2px solid blue;
	}
	#div31
	{
		margin:30px;
	}
	#div32
	{
		margin-left:20px;
		margin-right:30px;
		margin-top:40px;
	}
  </style>
 </head>
 <body>
  <div id = "div31">AAAAAAAAA</div>
  <div id = "div32">BBBBBBBB</div>
  <div id = "div33">CCCCCCCC</div>
 </body>
</html>