盒子模型
- 组成部分：
盒子内容(width+height): 是当前元素用来容纳子孙元素。（content area)
盒子壁(border): 来显示自身的轮廓。
内边距(padding): 隔离自身和与子孙元素。(在内容周围增加额外的空间）
外边距(margin): 隔离自身和相邻元素。(提供元素之间的间距）(margin+border+padding+(content=width+height))
div{
width: 200px;
height: 200px;
border: 1px solid red;
padding: 50px;
}宽度和真实占有宽度，不是一个概念！除此之外：
- body标签也有margin
<body>标签有必要强调一下。很多人以为<body>标签占据的是整个页面的全部区域，其实是错误的，正确的理解是这样的：整个网页最大的盒子是<document>，即浏览器。而<body>是<document>的儿子。浏览器给<body>默认的margin大小是8个像素，此时<body>占据了整个页面的一大部分区域，而不是全部区域。来看一段代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单练习</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid red;
padding: 20px;
margin: 30px;
}
</style>
</head>
<body>
<div>有生之年</div>
<div>狭路相逢</div>
</body>
</html>
- 注意：盒子的宽高和内容的width 、height不是同一个！！！
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
