【入门篇】层叠样式表CSS的盒子模型
在CSS中，一个独立的盒子模型由content（内容）、border（边框）、padding（内边距）、margin（外边距）4个部分组成。不过，W3C标准化的盒子模型跟IE的盒子模型是不一样的。
可以看到，IE的盒子模型中的content部分包含了padding和border，也就是说，IE的盒子的大小是包括了padding和border的大小。在设计网页的时候，为了浏览器之间的兼容性，可以在网页<html>标签前面声明使用标准的盒子模型：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
……
……border的样式：
border的样式大致有8种，但是浏览器的不同，各种样式的效果也不尽相同。例如下面这段代码：<!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>
<style type=”text/css”>
div{border-width:8px; border-color:red; margin:10px; padding:10px; background-color:#fff; font-family:Verdana; color:blue; font-weight:bold;}
</style>
</head><body>
<div style=”border-style:dashed;”>dashed</div>
<div style=”border-style:dotted;”>dotted</div>
<div style=”border-style:double;”>double</div>
<div style=”border-style:groove;”>groove</div>
<div style=”border-style:inset;”>inset</div>
<div style=”border-style:outset;”>outset</div>
<div style=”border-style:ridge;”>ridge</div>
<div style=”border-style:solid;”>solid</div>
</body>
</html>火狐浏览器与IE浏览器的显示效果：
当然，也可以对不同的边框用不同的效果，可以分别对盒子的各条边用不同的样式。
样式的属性值可以用缩写的形式出现，其顺序是按照上、右、下、左的顺序
例如：border-width:2px 4px 5px 6px;这个样式的意思是盒子的边框粗细分别为：上边2px、右边4px、下边5px、左边6px。
例如：padding:4px 8px;这个属性的意思是：盒子的上内距和盒子的下内距为4px、盒子的左内距和右内距为8px。
例如：margin:3px 6px 9px;这个属性的意思是：盒子的上外距是3px、下外距是9px、左外距和右外距为6px。
总结：如果给出1个属性值，这个属性值就是所有四边的属性。
如果给出2个属性值，第一个是上、下两边框的属性，第二个是左、右两边框的属性。
如果给出3个属性值，第一个是上边框的属性，第二个是左、右两边框的属性，第三个是下边框的属性。
如果给出4个属性值，则分别是上、右、下、左各边框的属性。
网友评论
