[TOC] >[info]盒子模型是CSS的基石之一，布局最重要的概念，它指 定元素如何呈现在页面当中。网页就是由许多个盒子通 过不同的排列方式（纵向排列，横向排列，嵌套排列） 堆积而成。 页面上的每个元素都被浏览器看成是一个矩形的盒子， 这个盒子由元素的内容、填充、边框和边界组成。 默认情况下盒子的边框是无，背景色是透明，所以我们 在默认情况下看不到盒子。 ## 盒子实例1  ## 盒子实例2  ## 一、盒子的几个概念和属性 ### 1、内容 >[danger]盒子里面所包含的元素和内容 ### 2、填充(内边距) (padding) >[danger]盒子里面的内容到盒子的边框之间的距离。 <table class="dataintable"> <tbody> <tr> <th> 属性 </th> <th> 描述 </th> </tr> <tr> <td> <a title="CSS padding 属性"> padding </a> </td> <td> 简写属性。作用是在一个声明中设置元素的所内边距属性。 </td> </tr> <tr> <td> <a title="CSS padding-bottom 属性"> padding-bottom </a> </td> <td> 设置元素的下内边距。 </td> </tr> <tr> <td> <a title="CSS padding-left 属性"> padding-left </a> </td> <td> 设置元素的左内边距。 </td> </tr> <tr> <td> <a title="CSS padding-right 属性"> padding-right </a> </td> <td> 设置元素的右内边距。 </td> </tr> <tr> <td> <a title="CSS padding-top 属性"> padding-top </a> </td> <td> 设置元素的上内边距。 </td> </tr> </tbody> </table> ### 3、边框(border) >[danger]盒子本身没有边框(border)。 <table class="dataintable"> <tbody> <tr> <th> 属性 </th> <th> 描述 </th> </tr> <tr> <td> <a title="CSS border 属性"> border </a> </td> <td> 简写属性，用于把针对四个边的属性设置在一个声明。 </td> </tr> <tr> <td> <a title="CSS border-style 属性"> border-style </a> </td> <td> 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 </td> </tr> <tr> <td> <a title="CSS border-width 属性"> border-width </a> </td> <td> 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。 </td> </tr> <tr> <td> <a title="CSS border-color 属性"> border-color </a> </td> <td> 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。 </td> </tr> <tr> <td> <a title="CSS border-bottom 属性"> border-bottom </a> </td> <td> 简写属性，用于把下边框的所有属性设置到一个声明中。 </td> </tr> <tr> <td> <a title="CSS border-bottom-color 属性"> border-bottom-color </a> </td> <td> 设置元素的下边框的颜色。 </td> </tr> <tr> <td> <a title="CSS border-bottom-style 属性"> border-bottom-style </a> </td> <td> 设置元素的下边框的样式。 </td> </tr> <tr> <td> <a title="CSS border-bottom-width 属性"> border-bottom-width </a> </td> <td> 设置元素的下边框的宽度。 </td> </tr> <tr> <td> <a title="CSS border-left 属性"> border-left </a> </td> <td> 简写属性，用于把左边框的所有属性设置到一个声明中。 </td> </tr> <tr> <td> <a title="CSS border-left-color 属性"> border-left-color </a> </td> <td> 设置元素的左边框的颜色。 </td> </tr> <tr> <td> <a href="/cssref/pr_border-left_style.asp" title="CSS border-left-style 属性"> border-left-style </a> </td> <td> 设置元素的左边框的样式。 </td> </tr> <tr> <td> <a title="CSS border-left-width 属性"> border-left-width </a> </td> <td> 设置元素的左边框的宽度。 </td> </tr> <tr> <td> <a title="CSS border-right 属性"> border-right </a> </td> <td> 简写属性，用于把右边框的所有属性设置到一个声明中。 </td> </tr> <tr> <td> <a title="CSS border-right-color 属性"> border-right-color </a> </td> <td> 设置元素的右边框的颜色。 </td> </tr> <tr> <td> <a title="CSS border-right-style 属性"> border-right-style </a> </td> <td> 设置元素的右边框的样式。 </td> </tr> <tr> <td> <a title="CSS border-right-width 属性"> border-right-width </a> </td> <td> 设置元素的右边框的宽度。 </td> </tr> <tr> <td> <a title="CSS border-top 属性"> border-top </a> </td> <td> 简写属性，用于把上边框的所有属性设置到一个声明中。 </td> </tr> <tr> <td> <a title="CSS border-top-color 属性"> border-top-color </a> </td> <td> 设置元素的上边框的颜色。 </td> </tr> <tr> <td> <a title="CSS border-top-style 属性"> border-top-style </a> </td> <td> 设置元素的上边框的样式。 </td> </tr> <tr> <td> <a title="CSS border-top-width 属性"> border-top-width </a> </td> <td> 设置元素的上边框的宽度。 </td> </tr> </tbody> </table> ### 4、外边距(margin) >[danger]边框外和其它盒子之间。 <table class="dataintable"> <tbody> <tr> <th> 属性 </th> <th> 描述 </th> </tr> <tr> <td> <a title="CSS margin 属性"> margin </a> </td> <td> 简写属性。在一个声明中设置所有外边距属性。 </td> </tr> <tr> <td> <a title="CSS margin-bottom 属性"> margin-bottom </a> </td> <td> 设置元素的下外边距。 </td> </tr> <tr> <td> <a title="CSS margin-left 属性"> margin-left </a> </td> <td> 设置元素的左外边距。 </td> </tr> <tr> <td> <a title="CSS margin-right 属性"> margin-right </a> </td> <td> 设置元素的右外边距。 </td> </tr> <tr> <td> <a title="CSS margin-top 属性"> margin-top </a> </td> <td> 设置元素的上外边距。 </td> </tr> </tbody> </table> ## 盒子属性的简写 >[danger] 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。 **例1** ~~~ <style type="text/css"> p{ margin: 10px; } </style> ~~~ >[info] 所有 4 个外边距都是 10px **例2** ~~~ <style type="text/css"> p{ margin: 10px 5px; } </style> ~~~ >[info] 上外边距和下外边距是 10px 右外边距和左外边距是 5px **例3** ~~~ <style type="text/css"> p{ margin: 10px 5px 15px; } </style> ~~~ >[info] 上外边距是 10px 右外边距和左外边距是 5px 下外边距是 15px **例4** ~~~ <style type="text/css"> p{ margin: 10px 5px 15px 20px; } </style> ~~~ >[info] 上外边距是 10px 右外边距是 5px 下外边距是 15px 左外边距是 20px **图例**  ## 二、 常见问题 * 大部分html元素的盒子属性(margin,padding )默认 值都为0，有少数html元素的(margin,padding)浏 览器默认值不为0，例如：body,p,ul,li,form 标记等，因此我们有时有必要先设置它们的这些属性为0。css全局reset。 * 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。  * 当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：  * 盒子的宽高：如果没有指定宽度，那么块级元素宽度默认是100%，行级元素根据内容需要来自动设置宽度，如果没设置高度，那么高度就会随着内容的改变而改变。 * 设定一个块级元素居中：margin:0 auto。 * margin可以设置负值，padding不可以。 * 行内元素的margin值，只有左右，没有上下的值。 ## 三、CSS overflow 属性 >[info] overflow 属性规定当内容溢出元素框时发生的事情。 <table class="dataintable"> <tbody> <tr> <th> 值 </th> <th> 描述 </th> </tr> <tr> <td> <a>visible</a> </td> <td> 默认值。内容不会被修剪，会呈现在元素框之外。 </td> </tr> <tr> <td> <a>hidden</a> </td> <td> 内容会被修剪，并且其余内容是不可见的。 </td> </tr> <tr> <td> <a>scroll</a> </td> <td> 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 </td> </tr> <tr> <td> <a>auto</a> </td> <td> 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 </td> </tr> <tr> <td> <a>inherit</a> </td> <td> 规定应该从父元素继承 overflow 属性的值。 </td> </tr> </tbody> </table> >[danger]**作业：**练习盒子，理解盒子的边框，外边距，内边距。