概念：盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。

       css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容，填充（内边距），边框，        外边距这就是盒模型。

2.盒子模型的相关元素

    2.1内填充：padding

         概念：padding是设定页面中一个元素到元素的边框之间的距离，也叫补白。

         作用：1.用来调整内容在容器中的位置。2.用来调整子元素在父元素中的位置。3.padding值是额外加在元素原有的大小之上的，如果想保证元素大小不变，需从元素宽度或高度减掉添加的padding值的大小。

         注意：padding属性值需要添加在父元素上。padding不可以为负值。padding区域在border与content之间；背景颜色和背景图片会覆盖padding和content组成的区域。

         padding属性值单独设置的写法：

              padding：2px 4px 6px 8px     ----上、右、下、左

              padding：2px 4px 6px           ----上、左右、下

              padding：2px 4px                 ----上下、左右

              padding：2px                       ----上下左右

    2.2边框：border属性

              2.2.1边框宽度

                   border-width : value+单位。

                        边框的默认值为  3px   black ,也会加在父元素的宽高上。

              2.2边框样式

                   border-style：solid实线、dashed虚线、dotted点线、double双线。

              2.3边框颜色

                   border-color：颜色

              2.4简写

                   border:1px solid red;顺序不固定、也可以写border-left | top|right|bottom

    2.3外边距 margin属性

              margin在元素外边的空白区域，被称为边距。

              属性值的方式：

              margin：2px 4px 6px 8px     ----上、右、下、左

              margin：2px 4px 6px           ----上、左右、下

              margin：2px 4px                 ----上下、左右

              margin：2px                       ----上下左右

         如果只想设置某一方向的margin值，margin-left | top | right | bottom

              补充：宽 = 左右border + 左右padding + width。高 = 上下border + 上下padding + height

              注意：margin可以为负值

                 （1）margin塌陷

                                     若一个大盒子中包含一个小盒子,给小盒子设margin-top,大盒子会一起向下平移。

                                         解决方案：

                                             1）给大盒子加一个边框

                                             2）给大盒子设置一个overflow属性。overflow: hidden;

                                             3）给任意一个盒子设置浮动。

3.容器溢出设置

              3.1容器溢出

                   {overflow:visible/hidden/scroll/auto/inherit},visible默认值，内容不会被修剪，会呈现在元 素框之外。hidden内容会被修剪，并且其余内容不可见。scroll内容会被修剪，但是浏览器会显示滚 动条，可以查看其余的内容，不管内容超不超出都会显示滚动条。auto内容超出就显示滚动条，不超出就不出现。

              3.2空白空间                 

                     text-overflow属性仅是：当文本溢出时是否显示省略标记，出现省略号的条件：

                         1、容器宽度：width：value；（px、%，都可以）

                         2、强制文本在一行内显示:white-space：nowrap;

                         3、溢出内容为隐藏：overflow：hidden；

                       4、溢出文本显示省略号： text-overflow：ellipsis;