盒子的大小由内容区、内边距和边框共同决定

盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width

盒子可见框的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-width

                             盒子的宽度=  width + 左右两边边框的宽度 + 左右两边的内边距

                              盒子的高度=  height + 上下的内边距 +上下边框

padding-内边距：盒子的内容区与盒子边框之间的距离  

margin-外边距：当前盒子与其他盒子之间的距离    

浏览器在页面中没有样式时，有一个比较好的显示效果，所以为很多的元素都设置了一些默认的margin和padding，正常情况下我们是不需要使用的。

所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉

               * {  margin: 0;

                     padding: 0;

                  }

盒模型分成内容区、内边距、边框、外边距四部分。

               内联元素不能设置width和height

               设置水平内边距，内联元素可设置水平方向的内边距

               垂直方向内边距，内联元素可以设置垂直方向的内边距，不会影响页面布局

                为元素设置边框，内联元素可以设置边框边框，垂直的边框不会影响到页面的布局

                水平外边距，内联元素支持水平方向的外边距

                为右边的元素设置一个左外边距，水平方向的相邻外边距不会重叠，而是求和

                内联元素不支持垂直外边距

display  、  visibility   和  overflow ：

 display：将内联元素变块元素，通过display样式可以修改元素类型,选值：

      inline：将一个元素作为内联元素显示

       block：将一个元素设置块元素显示

       inline-block：将一个元素转换行内块元素

                             可使一个元素既有行内元素的特点又有块元素的特点，既可设置宽高，又不独占一行

        none：不显示元素，并不会再页面中继续占有位置

visibility：用来设置样式的隐藏和显示的状态，选值：

            visible：默认值，元素默认会在页面显示

            hidden：元素会隐藏不显示，但是位置会在。

overflow：子元素存在父元素的内容区中，子元素最大等于父元素大小，如果超出，显示在父元素之外的内容，称溢出内容。

如何处理溢出：可选值：

                visible：默认值，不作处理

                hidden：会被修剪，不显示

                 scroll：添加滚动条，通过拖动滚动条查看内容

                              不论是否溢出，会添加水平与垂直双方向的滚动条

                 auto：会根据需求添加滚动条

文档流：

           元素在文档流的特点：

           块元素：

           1>   独占一行，会自上而下排列

           2>    默认宽度是父元素的100%

           3>    高度默认被内容撑开

            内联元素：

            1> 只占自身大小，默认从左向右排列

            2> 宽度和高度默认都被内容撑开

元素值为auto时，此时指定内边距不会影响可见框的大小，会自动修改宽度，以适应内边距

就算跌倒，也要豪迈的笑