一、CSS 盒子模型简介
在HTML页面中,每一个元素都是一个规则的矩形,因此每一个元素都由一个盒子模型来表示,盒子模型由4个区域组成:
(1)、content box(内容区域)
(2)、padding box(内边距区域)
(3)、border box(边框区域)
(4)、margin box(外边距区域)
二、CSS 边框 border(设置元素边框的:宽度、样式、颜色)
代码示例:
<html>
<head>
<style type="text/css">
.box1 { border: 10px solid red; }
.box2 { border: 2px dashed blue; }
</style>
</head>
<body> <div class="box1">盒子1</div>
<div class="box2">盒子2</div>
</body>
</html>
三、CSS 内边距padding(定义元素边框与元素内容之间的空间(上、右、下、左)
CSS 内边距 4个值:
CSS 内边距 3个值:
CSS 内边距 2个值:
CSS 内边距 1个值:
四、CSS 外边距margin(定义元素边框以外的空间(上、右、下、左))
CSS 外边距 4个值:
CSS 外边距 3个值:
CSS 外边距 2个值:
CSS 外边距 1个值: