盒子模型
简介
CSS处理网页时，它认为每个元素都包含在一 个不可见的盒子里。
为什么要想象成盒子呢？因为如果把所有的元素都想象成盒子，那么我们对网页的布局就相当于是摆放盒子。我们只需要将相应的盒子摆放到网页中相应的位置，即可完成网页的布局。
浏览器默认样式
浏览器为了在页面没有样式时也可以有一个比较好的显示效果，所以为很多元素都设置了默认的margin和padding，但是这些默认样式在正常情况下我们是不需要使用的。
所以我们往往在编写样式之前需要清除这些默认样式：
*{
margin = 0;
padding = 0;
}边框
为元素设置边框必须为其指定三个样式（缺一不可），分别是：
border-width：边框宽度
border-color：边框颜色
border-style：边框样式
使用border-width可以分别指定四个边框的宽度
如果在该样式中指定了四个值，则分别设置给上 右 下 左，按照顺时针的方向设置
如果在该样式中指定了三个值，则分别设置给上 左右 下
如果在该样式中指定了两个值，则分别设置给上下 左右
除了border-width，CSS中还提供了四个border-xxx-width，xxx的值可以是top,right,bottom,left。（其他两个样式也适用）
设置边框的样式，可选值：
none：默认值
solid：实线
dotted：点状边框
dashed：虚线
double：双线
也可以分别设置四条边的样式，规则同width。
边框简写属性
border：边框的简写样式，通过它可以同时设置四个边框的颜色、宽度和样式，而且没有顺序要求
border一指定就是同时指定四个边，不能分别指定，例子：
border:red solid 10px;
也可以通过border-left、 border-top、 border-right、 border-bottom设置四个边的样式，规则和border一样。
内边距（padding）
内边距指的是盒子的内容区和盒子边框之间的距离，一共有四个内边距，可以通过：
padding-top、padding-right、padding-bottom、padding-left来设置四个方向的内边距。
内边距会影响盒子可见框的大小，元素的背景样式会延伸到内边距，盒子的大小由内容区、内边距和边框共同决定。
外边距（margin）
外边距指的是盒子与其他盒子之间的距离，它不会影响盒子可见框的大小，而是会影响盒子的位置。
盒子有四个方向的外边距：
margin-top、margin-right、margin-bottom、margin-left
由于页面中的元素都是靠左靠上摆放的，所以当我们设置上和左外边距时会导致盒子自身位置发生变化。
外边距可以是一个负值，这样元素会向反方向移动。
margin还可以设置为auto，auto一般只设置给水平方向的margin，如果只指定给左右外边距为auto则会将外边距设置为最大值。
通过auto可以达到使子元素在父元素中居中的效果：
margin:0px auto;
外边距同样可以使用简写属性margin，同时设置四个方向的外边距。
垂直外边距的重叠
相邻的垂直外边距会发生重叠现象：相邻元素外边距去最大值，子元素的外边距会传递给父元素。
水平外边距不会重叠而是取和。
解决方法：
垂直相邻的：把相加值设置给其中一个元素即可
父子元素的：为父元素设置内边距或者边框。
解决垂直外边距重叠问题（详细情况可查看该链接）
内联样式的盒子模型
内联样式是不能设置width和height的。
它可以设置水平内边距，会影响页面布局，会将水平方向其他元素挤开；但是垂直内边距则不会影响页面布局，它是选择覆盖其他元素。
它也可以设置边框，垂直边框不会影响页面布局，但是水平边框会（可以理解为跟水平内边距一样）
同时，内联元素支持水平方向的外边距，相邻元素外边距不会重叠而是求和。
内联元素不支持垂直外边框！
有兴趣的可以使用以下代码加深理解：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
background-color: #bfa;
}
.box1{
width: 100px;
height: 100px;
background-color: red;
}
.s1{
/*
内容区、内边距 、边框 、外边距
* */
/*
* 内联元素不能设置width和height
*/
/*width: 200px;
height: 200px;*/
/*
* 设置水平内边距,内联元素可以设置水平方向的内边距
*/
padding-left: 100px ;
padding-right: 100px ;
/*
* 垂直方向内边距，内联元素可以设置垂直方向内边距，但是不会影响页面的布局
*/
padding-top: 50px;
padding-bottom: 50px;
/*
* 为元素设置边框,
* 内联元素可以设置边框，但是垂直的边框不会影响到页面的布局
*/
border: 1px blue solid;
/*
* 水平外边距
* 内联元素支持水平方向的外边距
*/
/* margin-left:100px ;
margin-right: 100px; */
/*
* 内联元素不支持垂直外边距
*/
margin-top: 200px;
margin-bottom: 200px;
}
.s2{
/*
* 为右边的元素设置一个左外边距
* 水平方向的相邻外边距不会重叠，而是求和
*/
/* margin-left: 100px; */
}
</style>
</head>
<body>
<span class="s1">我是一个span</span>
<span class="s2">我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
<div class="box1"></div>
</body>
</html>
display和visibility
通过display可以修改元素的类型
可选值：
inline：可以将一个元素作为内联元素显示
block：可以将一个元素作为块元素显示
inline-block：可以使元素既有内联元素的特点又有块元素的特点，既可以设置宽高又不会独占一行
none：不显示元素，并且元素不会在页面中继续占有位置
通过visibility可以设置元素的隐藏和显示状态
可选值：
visible：默认值，元素在页面中显示
hidden：元素隐藏不显示（但它的位置依然会保持）
overflow
子元素默认是存在于父元素的内容区中的，理论上讲子元素盒子模型的最大可以等于父元素内容区的大小，如果超出该大小，我们将超出的内容称为溢出的内容。
父元素默认是将溢出的内容在父元素外显示，通过overflow可以设置父元素如何处理溢出的内容。
可选值：
visible：默认值，不做任何处理
hidden：溢出的内容会被修剪不会显示
scroll：会为父元素添加滚动条，通过拖动滚动条可以查看完整内容，该属性不管内容是否溢出都会为父元素添加水平和垂直方向滚动条。
auto：会根据需求自动添加滚动条（相对灵活）
2364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
