盒子模型

某些原因，这周只重点介绍这个知识点。（高数还是花去不少精力呀,）

盒子模型

先大概介绍一下目前我学习到的内容吧
有着四个内容：内边距、外边距、边框以及overflow——内容溢出时的操作
内容比较少，所以一一介绍好了。

下面放一个图，具体一下其位置

padding——内边距

其含义为内容与边框之间的距离，称之为内边距。
因为这里内容比较空，所以我们提及一个用法的简便实用，这个用法同样适用于margin和border属性。
直接上例子，然后备注进行解释即可
1.
padding:1px; //四个方向上的内边距都为1px
2.
padding:2px 3px; //此时上下为2px，左右为3px
3.
padding:1px 2px 3px 4px; //此时为顺时针排序，即top right bottom left 所以大小为一一对应
4.
padding:5px 6px 7px; //此时top为5px bottom为7px 而left和right均为6px
5.
padding-top:1px;
padding-bottom:2px;
padding-left:3px;
padding-right:4px;
//当然，也可以一个一个的去调整，但这真的很麻烦

margin——外边距

这个不太好描述，简单点就是自己的边框与别的物体的一个距离。
这里有一个特殊的应用。

水平时的外边框

当两个物体在水平方向排列时。
物体之间的距离即为外边框之和。
例如一个为20px，一个为15px
水平的外边距为35px

垂直时的外边框

垂直的两个物体的外边框就有所不同了。
此时为较大的物体的外边框
例如一个为20px，一个为15px
那他们在垂直的外边距即为20px。

框架居中的应用

众所周知，将文字图象等内容进行居中，我们使用的是

text-align:center;

但这显然不能将div的框架进行居中，此时我们应该怎么办呢？

margin:5px auto;

就可以帮你解决这个问题啦，前面的外边距可以任意设置。后面auto的意义为两边的left和right同时取半，框架就会被放在中间了！

border——边框

这个内容之前也接触过，但现在主要来介绍一下它内含有的内容和属性

border:1px solid red //顺序为width style color

width除了以px为单位取值之外，还有着thin medium thick英文单词取值
style 也有着 solid dashed dotted double
solid:实线 dashed:断断续续的线 dotted:更小的断断续续的线 double:双实线
color就不需要介绍了。同样这个规则符合padding中所说的用法，可以精简写法

设置一条水平和垂直分割线

固然，我们可以使用hr函数来进行设计
但那是在html中的应用，我们应将框架和内容分隔开，且使用css设计的内容更加丰富多样

用width进行长度的设定
border-top或border-bottom其实无所谓
进行推广的话，我们用其也可以设置一条垂直分割线的是吧？嗯哼
只要将长度高度略微修改一下就好了

overflow

这个比较简单，即当内容超出区域的范围时内容的显示方式
overflow:scroll; //滚动设置
与此同时还有hidden 和 auto
auto是根据浏览器的功能而定的

小结

这周进展有点慢了，说实话在家会比较偷懒，因为有时候空闲时间多了，反而不知道该做什么了。
反正俺有点属于那种心血来潮的，压力小了，那就慢慢来吧，盒子模型完了之后，基础应该就差不多了，弄完之后，将MOOC上面给的练习试题考试都做了试试，就当练练手了！！！

FIGHTING吧，没啥好说的嘞