盒子模型

来源:互联网 发布:php继承的几种方式 编辑:程序博客网 时间:2024/04/30 15:38

这个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的第一句,他是一个标准,大家可以百度下。

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

1 0
原创粉丝点击