本片博客介绍CSS盒子模型相关知识，包括盒子模型的组成：内容区、内边距、边框和外边距。
什么是盒子模型？
- 盒子模型英文名Box Model，又叫框模型；
- CSS在处理网页的时候，它认为每个元素都包含在一个不可见的盒子里；
- 把所有元素都想象成盒子，那么我们对网页的布局就相当于摆放盒子；
- 我们只需要把相应的盒子摆放到网页中相应的位置即可完成网页的布局。
- 下面看一下盒子模型：
内容区（content）
内容区就是存放内容的地方，该元素的子元素就放在内容区中。
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>盒子模型：内容区</title>
<style type = "text/css">
.box1 {
background-color: #bfa;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
注意：width和height样式设置的是内容区的宽和高。
边框（border）
我们来为一个元素设置边框：
- 要为一个元素设置便便必须指定三个样式，缺一不可，分别是：border-width（边框的宽度），border-color（边框的颜色），border-style（边框的样式）。
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>盒子模型：边框</title>
<style type = "text/css">
.box1 {
background-color: #bfa;
width: 200px;
height: 200px;
/* 为元素设置边框 */
border-width: 10px;
border-color: blue;
border-style: solid;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
- 使用border-width可以分别指定多个边框的宽度，数量不同含义不同，具体举例如下：
如：border-width: 10px 20px 30px 40px;表示上边框宽度为10px，有边框宽度为20px，下边框宽度为30px，左边框宽度为40px。注意这里必须以空格分隔；
border-width: 10px 20px 30px;表示上边框宽度为10px，右边框和左边框宽度为20px，下边框为30px；
border-width: 10px 20px;表示上边框和下边框宽度为10px，右边框和左边框为20px。
- 除了border-width，CSS中还提供了四个border-xxx-width样式，xxx的值可以是top（上）、right（右）、bottom（下）、left（左），专门用来设置指定边框宽度。
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>盒子模型：边框</title>
<style type = "text/css">
.box1 {
background-color: #bfa;
width: 200px;
height: 200px;
/* 为元素设置边框 */
border-color: blue;
border-style: solid;
border-top-width: 10px;
border-right-width: 20px;
border-bottom-width: 30px;
border-left-width: 40px;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
- border-style样式的可选值：none（默认值，没有边框）、solid（实线边框）、dotted（点状虚线）、dashed（虚线）、double（双线）；
border-style的用法和border-width用法一样，可以指定1 ~ 4个值，含义也和border-width一样。
同样的，border-style也提供了border-xxx-style可以用来设置四个方向的边框。
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>盒子模型：边框</title>
<style type = "text/css">
.box1 {
background-color: #bfa;
width: 200px;
height: 200px;
/* 为元素设置边框 */
border-width: 10px;
border-color: blue;
border-style: solid dotted dashed double;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>盒子模型：边框</title>
<style type = "text/css">
.box1 {
background-color: #bfa;
width: 200px;
height: 200px;
/* 为元素设置边框 */
border-width: 10px;
border-color: blue;
border-top-style: solid;
border-right-style: dotted;
border-bottom-style: dashed;
border-left-style: double;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
- border-color和前面两个的用法一样，可以指定1 ~ 4个值。
同样的，CSS也提供了border-xxx-color用于设置指定方向的边框颜色。
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>盒子模型：边框</title>
<style type = "text/css">
.box1 {
background-color: #bfa;
width: 200px;
height: 200px;
/* 为元素设置边框 */
border-style: solid;
border-width: 10px;
border-color: blue yellow green orange;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>盒子模型：边框</title>
<style type = "text/css">
.box1 {
background-color: #bfa;
width: 200px;
height: 200px;
/* 为元素设置边框 */
border-style: solid;
border-width: 10px;
border-top-color: blue;
border-right-color: yellow;
border-bottom-color: green;
border-left-color: orange;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
- 我们再来看一个问题：
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>盒子模型：边框</title>
<style type = "text/css">
.box1 {
background-color: #bfa;
width: 200px;
height: 200px;
/* 为元素设置边框 */
border-style: solid;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
这里，我们只指定了border-style，border-width和border-color都没有指定，为什么边框可以显示出来，不是说三个条件缺一不可吗？
这是因为大部分的浏览器中，边框的宽度和颜色都是有默认值的，所以虽然没有显式指定，但其实是使用了默认值；但是注意，border-style的默认值是none，所以必须显式指定。
- 学习了边框的宽度、颜色、样式的使用，感觉过于麻烦，设置边框需要使用三个样式，有没有什么简单的方法呢？
当然是有的，CSS为我们提供了border样式，通过它可以同时设置四个边框的样式、宽度和颜色，没有任何顺序要求，但是border是同时指定四个方向的边框，不能分别指定。
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>盒子模型：边框</title>
<style type = "text/css">
.box1 {
background-color: #bfa;
width: 200px;
height: 200px;
/* 为元素设置边框 */
border: solid 10px blue;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
- CSS还提供了border-xxx可以分别指定四个方向的边框样式。
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>盒子模型：边框</title>
<style type = "text/css">
.box1 {
background-color: #bfa;
width: 200px;
height: 200px;
/* 为元素设置边框 */
border-top: 10px solid blue;
border-right: 20px dotted yellow;
border-bottom: 30px dashed green;
border-left: 40px double orange;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
如果想要指定三个方向边框样式相同，一个边框样式不同，不建议使用border-xxx写三个，而是使用border指定四个，然后将其中一个不设置的恢复成原样。
内边距（padding）
内边距指的是盒子的内容区和边框之间的距离，一共有四个方向的内边距。
- 可以通过4个样式来设置四个方向的内边距：padding-top、padding-right、padding-bottom、padding-left。
当然，也有简写方式，CSS提供了padding样式，可以同时设置四个方向内边距距离，规则和border-width一样，1 ~ 4个值。
元素的背景会延伸到内边距。
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>盒子模型：内边距</title>
<style type = "text/css">
.box1 {
background-color: #bfa;
width: 200px;
height: 200px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
}
.box2 {
background-color: yellow;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>盒子模型：内边距</title>
<style type = "text/css">
.box1 {
background-color: #bfa;
width: 200px;
height: 200px;
padding: 10px 20px 30px 40px;
}
.box2 {
background-color: yellow;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
注意：
- 盒子的大小同时由内容区、内边距和边框共同决定。
盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width；盒子可见框的高度 = border-top-width + padding-top + height + padding-botton + border-bottom-width；
外边距（margin）
外边距指的是当前盒子与其它盒子之间的距离；外边距不会影响当前盒子可见框大小，而是会影响当前盒子到其它盒子的距离。
盒子有四个方向的外边距：margin-top、margin-right、margin-bottom、margin-left。
由于页面中的元素都是靠左靠上摆放，所以当我们设置上和左外边距时，会导致当前盒子的位置发生变化，如果设置右和下外边距时，会改变其它盒子的位置。
- 使用margin-top、margin-right、margin-bottom、margin-left可以设置盒子的外边距。
同样的，CSS也提供了简写方式，margin样式，使用方法和border-width一样。指定1 ~ 4个值。
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>盒子模型：外边距</title>
<style type = "text/css">
.box1 {
background-color: #bfa;
width: 100px;
height: 100px;
margin-top: 50px;
margin-left: 50px;
margin-bottom: 50px;
}
.box2 {
background-color: #bfa;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>盒子模型：外边距</title>
<style type = "text/css">
.box1 {
background-color: #bfa;
width: 100px;
height: 100px;
margin: 50px;
}
.box2 {
background-color: #bfa;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
- 外边框的值也可以设置为auto，auto一般只设置给水平方向的margin，如果只设置顶左外边距或右外边距的margin为auto，则会将外边距设置为最大值，垂直方向外边距设置为auto，外边距默认就是0；
如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，就可以使元素自动在父元素中居中，所以我们经常将左右外边距设置为auto，以使子元素在父元素中水平居中。
外边距也可以设置为负值，如果外边距设置为负值，元素向相反方向移动。
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>盒子模型：外边距</title>
<style type = "text/css">
.box1 {
background-color: #bfa;
width: 100px;
height: 100px;
margin: 0 auto;
}
.box2 {
background-color: #bfa;
width: 100px;
height: 100px;
margin-left: -50px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
垂直外边框的重叠问题
在网页中垂直方向的相邻外边框会发生外边框的重叠。
- 所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值，而不是取和。
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>垂直外边框重叠问题</title>
<style type = "text/css">
.box1 {
background-color: #bfa;
width: 100px;
height: 100px;
margin-bottom: 100px;
}
.box2 {
background-color: #fab;
width: 100px;
height: 100px;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
- 如果父子元素的垂直外边距相邻，则子元素的外边距会设置给父元素。
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>垂直外边框重叠问题</title>
<style type = "text/css">
.box1 {
background-color: #bfa;
width: 200px;
height: 200px;
}
.box2 {
background-color: #fab;
width: 100px;
height: 100px;
/* 想让box2在box1中向下移动100px */
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
如果，我们想要实现box2在box1中向下移动100px，可以为父元素设置一个上边框宽度为1px或内边距为1px。核心就是将父子元素的外边距不相邻。
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>垂直外边框重叠问题</title>
<style type = "text/css">
.box1 {
background-color: #bfa;
width: 200px;
height: 199px;
border-top: 1px #bfa solid;
}
.box2 {
background-color: #fab;
width: 100px;
height: 100px;
/* 想让box2在box1中向下移动100px */
margin-top: 99px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
默认样式
- 浏览器为了在页面中没有样式时，也可以让页面有一个比较好的显示效果，所以为很多的元素都设置了一些默认的margin和padding，如下：
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>默认样式</title>
</head>
<body>
<p>
路漫漫其修远兮，吾将上下而求索。
</p>
<ul>
<li>这是一个无序列表</li>
<li>这是一个无序列表</li>
<li>这是一个无序列表</li>
</ul>
</body>
</html>
- 但是这些默认样式，正常情况下我们是不需要的，所以我们往往在编写样式之前需要将浏览器中默认的margin和padding统统都去掉；
我们可以使用通配选择器，选中所有元素，将它们的margin和padding都设置为0。
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>默认样式</title>
<style type="text/css">
/* 通配选择器，去掉浏览器默认样式 */
* {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<p>
路漫漫其修远兮，吾将上下而求索。
</p>
<ul>
<li>这是一个无序列表</li>
<li>这是一个无序列表</li>
<li>这是一个无序列表</li>
</ul>
</body>
</html>
内联元素的盒子模型
前面我们介绍盒子模型，演示的元素都是块元素，这里我们看一下内联元素的情况：
- 内联元素不能设置width和height，设置完没有用。
- 内联元素可以设置水平方向内边距。padding-left和padding-right。
- 内联元素可以设置垂直方向内边距，但是不会影响页面布局。
- 内联元素可以设置边框，同样，垂直方向不会影响页面布局，水平方向会影响页面布局。和内边距一样。
- 内联元素可以设置水平方向的外边距，水平方向的外边距不会重叠，而是求和。
- 内联元素不能设置垂直外边距，设置完没用。
display、visibility、overflow样式
- display：我们直接来看display样式的几个可选值。
inline（将一个元素作为内联元素显示）；
block（将一个元素设置为块元素显示）；
inline-block（将一个元素转换为行内块元素，可以使一个元素既有行内元素的特点，又有块元素的特点，如img、iframe）；
none（此元素不会被显示，隐藏元素，并且元素不会在页面中继续占有位置）。
- visibility：设置元素的显示和隐藏的状态，几个可选值如下。
visible（默认值，元素默认会在页面上显示）；
hidden（元素隐藏不显示，但是它的位置依然保持）。
- overflow：子元素默认存在于父元素的内容区中，理论上讲子元素的最大可以等于父元素的内容区的大小；
如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示，超出父元素的内容，我们称为溢出的内容；
父元素默认是将溢出的内容，在父元素外边显示。
通过overflow可以设置父元素如何处理溢出内容，可选值如下。
visible（默认值，不会对溢出内容做任何处理，元素会在父元素外显示）；
hidden（溢出的内容被修剪，不会显示）。
scroll（为父元素添加滚动条，通过拖动滚动条查看内容，该属性不论内容是否溢出都会添加水平和垂直两个方向的滚动条）。
auto（会根据需求自动添加滚动条，需要水平加水平，需要加竖直加竖直）。
136
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
