盒子模型是CSS的一个重要概念,网页的所有元素都可以看成一个盒子。每个盒子由4个属性组成!
内容(ontent) 边框(Border) 内边距(Padding) 外边距(Margin)
内容(Content)
有3个属性:width、height和overflow。width和height属性指定盒子内容区高度和宽度,当内容过多超出,使用overfow属性指定溢出处理方式。
内边距(Padding)
内容区与各方向边框之间的距离,有5个属性padding-top、padding-bottom、padding-left、padding-right,以及综合了以上4个方向的简写内边距属性padding。
边框(Border)
边框属性有border-width、border-style、border-color,及简写边框属性border,其中,border-width指定边框宽度,border-style指定边框类型,border-color指定边框颜色
外边距(Margin)
是两个盒子之间的距离,可能是子元素与父元素之间距离,也可能是兄弟元素之间距离。属性有5个:margin-top、margin-botom、margin-let、margin-right,以及简写外边距属性margin。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css盒子模型</title>
<style type="text/css">
.A{
/* 这是div的高和宽 */
width: 900px;
height: 500px;
/* 这是边框的宽度 */
border:rgb(0, 21, 255) 20px solid ;
/* 背景颜色 */
background-color: rgb(242, 255, 0);
/* 内外边距 */
padding: 100px;
margin: 50px;
box-sizing: border-box;
/* 字体颜色 */
color: rgb(165, 42, 56);
}
</style>
</head>
<body>
<div class="A">
css盒子模型
</div>
</body>
</html>