想必初学者对CSS盒模型总是很困惑吧。下面一分钟让你彻底明白盒模型:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3</title>
<style type="text/css">
.simple{
width: 500px;
margin: 20px auto;
border-style:solid;
border-color: #0073CC;
background-color: red;
}
.fancy{
width: 500px;
margin: 20px auto;
padding:50px;
border-width: 10px;
border-style:solid;
border-color: #0068C9;
background-color: #10B722;
}
</style>
</head>
<body>
<div class="simple">
我小一些
</div>
<div class="fancy">
我大一些
</div>
</body>
</html>
下面我们来看显示效果:
再看FireFox的盒模型:
下面我们结合起来看:
看完这几张图之后，想必已经明白了吧。width,heigh代表内容(content)的长度和高度,padding是content与border的的距离.background-color的作用范围是 content+padding
