CSS--盒子模型

最新推荐文章于 2025-05-05 10:33:31 发布

小伟呀

最新推荐文章于 2025-05-05 10:33:31 发布

阅读量524

点赞数 1

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_43879167/article/details/113245378

CSS 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何打开和使用浏览器的开发者工具，重点关注CSS盒子模型的解析，包括位置、应用和外边距合并。此外，还探讨了Style中的样式关系及其解读顺序，提供了在开发者工具中快速调整样式的实践技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、开发者工具

1.1 打开方式

浏览器菜单---->工具---->开发者工具或者是按快捷键F12

1.2 位置调整

点击右上角三个点，位置依次对应分离、左、下、右
在这里插入图片描述

1.3 选择箭头

在这里插入图片描述
当用该箭头选中网页中的一部分内容时，会在工具中标注出相应的代码。

1.4 Elements

作用：展示网页中的标签代码。
在这里插入图片描述

1.5 Console

控制台，调试网页使用。

1.6 Sources

存放网页的各种资源，同时也包含源代码。

1.7 Network

显示与java交互的完整信息，包括传递的参数以及请求等信息。

二、盒子模型

盒子模型对应每个html标签在网页中的位置。

2.1 位置

开发者工具—>Elements—>Styles最下方
在这里插入图片描述

margin为外边距，border为边框，padding为内边距，里面的蓝色部分为内容。

2.2 应用

先写一段html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a:hover {
				color: red;
			}

			.class1 {
				margin: 25px 50px 75px 100px;
			}

			.class2 {
				margin: 25px  50px 100px;
			}
			.class3 {
				margin: 25px 100px;
			}
			.class4 {
				margin: 25px;
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com" target="_blank">百度</a>
		<div class="class1">AAAA</div>
		<div class="class2">BBBB</div>
		<div class="class3">CCCC</div>
		<div class="class4">DDDD</div>
	</body>
</html>