一个盒子中主要的属性就5个：width、height、padding、border、margin。
width是“宽度”的意思，CSS中width指的是内容的宽度，而不是盒子的宽度。
height是“高度”的意思，CSS中height指的是内容的高度，而不是盒子的高度
padding是“内边距”的意思
border是“边框”
margin是“外边距”
下面就是盒模型的属性的值
这里我们定义一个div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
padding: 10px;
border:6px solid red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
上述代码，我们设置width=200px，height: 200px;但是盒子占据的真实的宽度和高度是200+10*2+6*2=232.即232*232。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
