CSS盒子模型及属性

在使用CSS进行网页布局时，我们常常使用的一个东西——盒子模型。

        所谓盒子模型就是把网页中的每一个元素都看做一个矩形的盒子，这些盒子可以盛装网页中的各个元素，将这些矩形的盒子进行嵌套\排列，就成为我们网页的骨架，让原本不堪入目的网页变得整齐、美观。

 

每一个盒子模型都由下面这四部分内容构成：

目录

在使用CSS进行网页布局时，我们常常使用的一个东西——盒子模型。

内容区

内边距

边框

外边距

盒子的大小

---

• 内容区

        内容区(content)是盒子模型的核心，他展示了网页中每一部分的信息、具体内容，这些内容是我们在网页中可以看见的文字、图片、链接等等。

                内容区主要有三个属性：width/height/overflow。

                其中width和height分别指盒子的宽度与高度，可以通过这两个属性来控制盒子的大小以便根据需求包裹我们的网页内容。当盒子里的内容过多，超出盒子的大小时，我们可以通过overflow来处理。

                overflow有这几个常用属性：

                        1.hidden:

                                当内容过多时，使用hidden属性可以将盒子以外多余部分的内容隐藏起来，只显示盒子大小的内容。

                        2.visible

                                visible属性是盒子的默认属性，当盒子里内容超过盒子大小时，内容会溢出，允许内容显示在盒子的外面。

                        3.scroll  

                                当盒子内容超出盒子范围时，scroll属性会在盒子内容区形成一个可以滚动的区域，以此来查看盒子里的所有内容。

                        4.auto 

                                auto属性允许浏览器自己处理溢出的内容，而不需要程序员自己手动进行设置处理。      

• 内边距

        内边距(padding)指的是盒子与内容区之间的距离，我们常常以此来调整内容在盒子内部的位置。

        内边距有以下几个属性：

                padding-left:调整内容区与盒子左边的距离

                padding-right:调整内容区与盒子右边的距离

                padding-top:调整内容区与盒子上边的距离

                padding-bottom:调整内容区与盒子下边的距离

        我们也可以直接通过padding来设置盒子的各个内边距：

                padding:5px;

                当属性后面只有一个数值时，表示该盒子四个内边距都为此大小

                padding:5px 10px;

                当属性后面为两个值时，第一个值表示的是盒子的上下内边距，第二个值表示的是盒子的左右内边距

• 边框

        边框（border）是盒子的边界线，通过边框我们可以直观地看到盒子的大小。边框有以下三个属性：

       1. style:边框的样式,它通常可以设置这么几个值：

               dotted：边框样式为小圆点组成的虚线

               dashed:边框样式为普通的虚线

               solid:边框样式为实现

               double:边框样式为双实线

        2.width:边框的宽度，指定了边框的粗细，可以用px或者%来设置

        3.color:指定了边框的颜色

我们通常直接使用border直接来设置它的三个属性：

        border:width style color;        这样依次设置边框的宽度\样式\颜色

 我们也可以搭配top\bottom\left\right来单独设置盒子的某一条边框的属性：

        border-top-style:

        border-bottom-color:

• 外边距

        外边距（margin）指该盒子与旁边另外一个盒子或者父盒子的距离，它同内边距一样有四个属性值：

        margin-top\margin-bottom\margin-left\margin-right：分别代表了盒子上下左右四个外边距。

        同样的，外边距也可以用margin来一次性设置四个属性值：

                margin:10px;

                当后面的值为一个时，代表上下左右的外边距都为此值。

                margin:10px 30px;

                当后面的值为两个时，第一个值表示的是上下外边距，第二个值表示的是左右外边距（通常我们可以设置margin的第二个值为auto,来让盒子其父盒子内居中）

---

• 盒子的大小

        盒子的大小指的是盒子的宽度和高度，大多数初学者很容易将盒子的宽度和高度理解为width和height,其实width和height只是内容区(content)的大小。而盒子的大小为：

        盒子的宽度：内容区的宽度+左内边距+右内边距+左边框+右边框

        盒子的高度：内容区的高度+上内边距+下内边距+上边框+下边框