盒子模型

最新推荐文章于 2025-07-03 11:04:06 发布

gocpplua

最新推荐文章于 2025-07-03 11:04:06 发布

阅读量883

点赞数 1

CC 4.0 BY-SA版权

分类专栏： PHP从入门到精通文章标签：盒子模型 padding-top DOCTYPE

本文链接：https://blog.youkuaiyun.com/chenqiai0/article/details/42750521

PHP从入门到精通专栏收录该内容

15 篇文章

订阅专栏

本文通过一个简单的HTML文件（hezi.html）和CSS样式文件（box.css），详细解析了HTML页面中盒子模型的实现过程。通过实例演示了如何使用CSS设置边框、宽度、高度以及内边距、外边距，从而调整网页元素布局。

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

这个demo有两个文件:hezi.html和box.css。还是老样子，直接上代码：

hezi.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>盒子模型</title>
	<link rel="stylesheet" type="text/css" href="box.css">
</head>

<body>
	<div class="div1">
			<img src="1.png" />
	</div>
</body>
</html>

box.css

body
{
	border: 1px solid red; /* 1px表示边框宽度， solid实线， red颜色 */
	width: 600px;
	height: 500px;
	margin: 0 auto;	/*	让body自动居中 */
}

/* 盒子模型 概念：margin，padding，border */
.div1
{
	width: 100px;
	height: 100px;
	border: 1px solid blue;
	margin: 5px 0px 0px 5px;
	/*padding-top: 80px;*?  /* 注意：padding会将盒子撑破 */
}

.div1 img
{
	width: 90px;
	height: 50px;
	margin-top: 5px;
	margin-left: 10px;
}

我们首先应该注意的是hezi.html的第一句，他是一个标准，大家可以百度下。

如果自己学习的话可以下载代码然后自己修改参数，运行试试。