首页 > 代码库 > 盒子模型

盒子模型

2024-11-05 19:50:02   205人阅读

这个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=http://www.mamicode.com/"box.css">>

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的第一句，他是一个标准，大家可以百度下。
如果自己学习的话可以下载代码然后自己修改参数，运行试试。
盒子模型


联系
我们