CSS标准盒模型概念
在CSS中，CSS假定所有的HTML文档元素都生成了一个描述该元素在HTML文档布局中所占空间的一个矩形元素框，可以形象地将其看作是一个盒子。CSS围绕这些矩盒子产生了一种“盒子模型”的概念，通过定义一系列与盒子相关的属性，可以极大地丰富和促进各个盒子乃至整个HTML文档的表现效果和布局结构。对于是盒子的元素，如果没有特殊的设置，其默认总是占独立的一行，宽度为浏览器窗口的宽度，在其前后的元素不管是不是盒子，都只能排列在它的上面或者下面，即上下累加着依次进行排列。HTML文档中的每个盒子都可以看成是由从内到外的四个部分构成：即内容区（content）、内边(padding)、边框(border)和外边距(margin)。 CSS为四个部分定义了一系列相关属性，通过对这些属性的设置可以丰富盒子的表现效果。模型如下图：即整个盒子由内容区（content）、内边距(padding)、边框(border)和外边距(margin)相加组成。
CSS标准盒模型组成
内容区（content）
内容区是盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区有三个属性，width、height 和overflow。使用width和height属性可以指定盒子内容区的高度和宽度，当内容信息太多，超出内容区所占范围时，可以使用overflow 溢出属性来指定处理方法。当overflow 属性的属性值为hidden时，溢出部分将不可见；为visible时，溢出的内容信息可见，只是被呈现在盒子的外部；当为scroll时，滚动条将被自动添加到盒子中，用户可以通过拉动滚动条显示内容信息；当为auto时，将由浏览器决定如何处理溢出部分。
内边距（padding）
内边距是内容区和边框之间的空间。填充的属性有五种 ，即padding -top、padding -bottom、padding -left、padding-right 以及综合了以上四种方向的快捷填充属性padding。使用这五种属性可以指定内容区信息内容与各方向边框间的距离。设置盒子背景色属性时，可使背景色延伸到填充区域。
边框（border）
边框是环绕内容区和填充的边界。边框的属性有border-style、border-width和border-color 以及综合了以上三类属性的快捷边框属性 border。其中border-style 属性是边框最重要的属性，如果没有指定边框样式，其他的边框属性都会被忽略，边框将不存在。CSS规定了虚线（dashed）、实线(solid)等九种边框样式。使用border-width属性可以指定边框的宽度，其属性值可以是长度计量值，也可以是CSS规定的thin、medium 和thick。使用border-color属性可以为边框指定相应的颜色，其属性值可以是RGB值，可以是CSS 规定的17个颜色名 ，也可以是英文字样颜色单词。在设定以上三种边框属性时，既可以进行边框四个方向整体的快捷设置，也可以进行四个方向的专向设置，如border: 1px solid #ffffff；或border-top-style: solid；、border-left-color: yellow；、border-lright-width:10px；等。
外边距（margin）
外边距即最外层的空白边，位于盒子的最外围，是添加在边框外周围的空间。外边距使盒子之间不会紧凑地连接在一起，是CSS 布局的一个常用手段。空白边的属性有五种 ，即margin-top、margin-bottom、margin- left、margin-right以及综合了以上四种方向的快捷外边距属性margin，其具体的设置和使用与填充属性类似。对于两个相邻的（水平或垂直方向 ）且设置有空白边值的盒子，他们邻近部分的外边距将不是二者空白边的相加，而是二者的并集。若二者邻近的空白边值大小不等，则取二者中较大的值。同时，CSS允许给外边距属性指定负数值，当指定负外边值时，整个盒子将向指定负值方向的相反方向移动，以此可以产生盒子的重叠效果。采用指定空白边正负值的方法可以移动网页中的元素，这是CSS布局技术中的一个重要方法。
CSS标准盒模型用法
内边距（padding）用法
1：padding是在盒子里面，在盒子与内容之间。
2：padding的作用：控制子元素在父元素里面的位置关系。
3：padding会把盒子撑大。
4：如果想让盒子保持原有的大小：在宽高基础上减掉（如果一个元素是被内容撑开的，没有设置固定的宽高，padding直接撑开。不用减掉）
5：如果给一个方向添加padding，即padding-top/bottom/left/right上 下 左 右
6：padding的设置特点：
padding:30px; 上 右 下 左
padding:10px 30px; 上下 左右
padding:10px 30px 50px 上 左右 下
padding:10px 30px 50px 100px 上右下左
7：padding不会对背景图的位置造成影响。
外边距（margin）用法
1：margin在元素外围，不会撑大元素的大小
2：作用:控制元素与元素之间的间距。
3：给单一方向添加margin
margin-left/right/top/bottom
4 ：margin设置方法：
margin:30px; 上 右 下 左
margin:10px 30px; 上下 左右
margin:10px 30px 50px 上 左右 下
margin:10px 30px 50px 100px 上右下左
5:margin:0 auto;让当前元素在父元素里面左右居中。
6：margin常出现的bug
1):两个相邻元素上下的margin值 不会叠加 按照较大值设置。
2):如果父元素和第一个子元素没有浮动的情况下，给第一个子元素添加margintop,会错误放在父元素上面。
边框（border）用法
1：border是元素边框，改变原元素的大小
2：作用:给元素加上一个边框。
3：给单一方向添加border
border-left/right/top/bottom
4： border属性 border-color/style/width边框颜色/样式/宽度
5 ：border设置方法：
border-top/right/bottom/left-style: ; 上 右 下 左 边框样式
border-top/right/bottom/left-width: ; 上 右 下 左 边框宽度
border-top/right/bottom/left-color: ; 上 右 下 左 边框颜色
border-top/right/bottom/left：red solid 1px;上/右/下/左 边框颜色红色 实线 1像素 属性值顺序不分先后 上下左右四个方向
border:red solid 1px;边框颜色红色 实线 1像素 属性值顺序不分先后 上下左右四个方向
