css之盒子模型

html文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒模型。盒模型通过四个边界来描述：margin（外边距），border（边框），padding（内边距），content（内容区域）。

css之盒子模型

我们把某个标签的作用范围当做一个盒子，那标签自己就是盒子模型的borde，标签外面就是margin，标签里面的内容是content，在标签里面的内容一标签边界之间，我们再定义内边距padding。

如下：

<!DOCTYPE >
<html>
	<head>
		<title></title>
		<style type="text/css" >
			body{
			}
		</style>
	</head>
	<body>123</body>
</html>

结果图为：

css之盒子模型默认不设置body边界，我们发现是自带外边距的。

当我们把body的外边距设置为0时候：

body{margin: 0px;}

css之盒子模型这样没有外边距，会紧挨着浏览器边界。

我们再把内边距padding设置0

                    body{
				margin: 0px;
				padding: 0px;
			}

css之盒子模型还是跟上一幅图一样说明默认padding为0px

接下来，我们再把padding设置为10px

			body{
				margin: 0px;
				padding: 10px;
			}

css之盒子模型说明内边距存在着，并跟浏览器边框产生了空白。至于content，自然就是这里的123，也就是所有body标签里面的定义的元素（在这里只有123这个字符串）。

最后，说一下填充方式：

		<style type="text/css" >
			body{
				
				padding: 10px 20px 10px 40px;
				/*4参数，按照逆时针，上右下左方式设置边界*/
				padding: 10px;
				/*一个参数，设置四个方向全为10px*/
				padding: 10px 20px 10px;
				/*设置上位10px 左右为20px 下为10px*/
				padding: 10px 20px;
				/*设置上下为10px 左右为20px*/
				
				}
		</style>

秒客网

css之盒子模型

相关文章