学习笔记1—CSS盒模型

     盒模型是CSS的核心知识点之一，它指定元素如何显示以及如何相互交互。页面上的每个元素都被看成一个矩形框，这个框由元素的内容、内边距、边框和外边距组成。如下图所示：

1.内边距出现在内容区域的周围。

2.如果在元素上添加背景，那么背景应用于元素的内容和内边距组成的区域。（因此可以用内边距在内容周围创建一个隔离带，使内容不与背景混合在一起。）

3.添加边框会在内边距区域外边增加一条线。这些线可以有不同的样式和宽度，如实线、虚线、点画线。在边框外边的是外边距.

4.外边距是透明的，一般使用它控制元素之间的间隔。

5.内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边

盒模型有两种模式：标准模式和混合模式

1.标准模式下盒模型

实际宽度为：
width + padding-left + padding-right + border-left-width + border-right-width

实际高度为：

heigth + padding-top +padding-bottom + border-top-width +border-bottom-width

2混杂模式下盒模型

实际宽度为：css中设定的width值，高度为设置的height值。

当然在没有设置overflow的情况下，若盒子内容、内边距、或是边框的值较大，会把盒子撑开，实际宽度和高度则大于设定值。