css之盒子模型

最新推荐文章于 2023-04-03 10:57:07 发布

给我瓶叶小白

最新推荐文章于 2023-04-03 10:57:07 发布

阅读量302

点赞数 1

分类专栏： java web 文章标签： css盒子模型详解 css 盒子模型

本文链接：https://blog.csdn.net/yjz_sdau/article/details/79605958

版权

java web 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

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

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

如下：

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

结果图为：

默认不设置body边界，我们发现是自带外边距的。

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

body{margin: 0px;}

这样没有外边距，会紧挨着浏览器边界。

我们再把内边距padding设置0

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

还是跟上一幅图一样说明默认padding为0px

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

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

说明内边距存在着，并跟浏览器边框产生了空白。至于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>

给我瓶叶小白

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
css之盒子模型

html文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒模型。盒模型通过四个边界来描述：margin（外边距），border（边框），padding（内边距），content（内容区域）。我们把某个标签的作用范围当做一个盒子，那标签自己就是盒子模型的borde，标签外面就是margin，标签里面的内容是content，在标签里面的内容一标签边界之...
复制链接

扫一扫

专栏目录