CSS盒子模型及属性

 一丶CSS盒子模型

1.概念

        CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。

2.盒子模型中部分的说明：

（1）Margin(外边距) - 清除边框外的区域，外边距是透明的。
（2）Border(边框) - 围绕在内边距和内容外的边框。
（3）Padding(内边距) - 清除内容周围的区域，内边距是透明的。
（4）Content(内容) - 盒子的内容，显示文本和图像。

二丶属性

        CSS中规定每个盒子分别为：内容区域（content）、内边距区域（padding）、外边距区域（margin）、边框区域（border），这四个部分就构成了完整的CSS盒子模型。

 

1.外边距（margin）

      外边距位于盒子模型的最外围，是边框之外的空间。我们通常使用 margin-top 、 margin-bottom 、 margin-left 、margin-right 及它们的简写属性 margin 来设置外边距，即控制盒子和盒子之间的距离。

它由margin-top，margin-left，margin-right，margin-button组成。表示盒子的上右下左的边距。一般我们写其复合属性margin，如果属性值有一个则表示上右下左的外边距，有两个属性值则第一个值表示上下，第二个值表示左右，三个值则表示第一个值表示上，第二个值表示左右，第三个值表示下。（注：margin可以使盒子居中。使用方法 margin：0 auto;）

margin:1px; 【速写形式】外边距上右下左都有1px

margin:1px 2px; 上下为1px;右左为2px

margin:1px 2px 3px; 上1px ,右左2px,下3px

margin:1px 2px 3px 4px; 上1px ,右px,下3px,左4px

margin-top:1px;

margin-bottom:2px;

margin-left:10px;

margin-right:5px;

2.内边框（border）

        它是来表示盒模型的边框，介于margin与padding两块域之间，默认为无线条。它同样是有上左下右四方向，一般我们写复合属性：border:1px（线的大小）solid（是实线还是其他样式） color（线条颜色）；

         除了可以单独对每一条边进行样式设置之外，还可以分别对边界的宽度、样式和颜色进行设置（下面的属性会对四条边进行设置），同样可以使用简写属性border进行设置。
           border-width：边界宽度
           border-style：边界样式
           border-color：边界颜色

3.内边距（padding）

        padding表示盒子的内边距。与外边距不同，padding不是只能完全透明的，可以设置背景颜色和图片。与margin类似，padding包含了上下左右四条边，开发者可以单独设置每一条边的边距。
        padding-top：上部填充
        padding-bottom：下部填充
        padding-left：左部填充
        padding-right：右部填充
        开发者也可以直接使用简写属性padding同时设置四条边的宽度。这一部分的用法与margin类似。

4.Content（内容）

       内容区是整个盒子模型的中心，其中存放了网页的主要元素(文本 、 图像等）。内容区有 width 、 height 、 overflow 三个属性。其中 width 和 height 属性用来指定盒子内容区域的宽度和高度。

———————————————————————————————————————————

        以上便是对本节知识点CSS盒子模型及属性的讲解，大家做好笔记，重在理解，希望对大家有所帮助。