盒子模型
盒子模型的概念
盒子模型:用这种思想来 “盛放” 网页中的各种元素。
在网页设计上,内容常指文字、图片等元素,但是也可以是小盒子(DIV嵌套)。填充只有宽度属性,可以理解为生活中盒子里的抗震辅料厚度,而边框有大小、线型和颜色之分,外面又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的,边界就是该盒子与其他盒子要保留多大距离。
在css中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边框不会影响内容区域的尺寸,但是会增加元素框的总尺寸。
假设框的每个边上有10个像素的外边框和5个像素的内边距。如果希望这个元素框在页面内只占100个像素,就需要将内容的宽度设置为 70 像素,请看下图:
.box1 {
// 高度宽度
width:100px;
height:120px;
// 边框
border:1px solid #F00;
// 外边距
margin-bottom:10px;
// 内边距
padding-left:10px;
}
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="box.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="box1">这是盒子1的内容</div>
</body>