css盒子模型实验报告总结_CSS盒子模型边框borderCSS入门基础（022）

---

今天我们接着分享关于盒子模型的内容。边框border：前面的章节，我们已经深入学习了边框的属性。这里就再次强调一下，对于border属性，在实际开发中，我们更习惯使用简介写法。语法：

border: 像素值 边框类型 颜色值；

示例代码：

      边框          #main {        width:300px;        height:150px;        border: 2px dashed gray;      }              

内边距padding：内边距padding，又常常被称为补白，指的是内容区到边框之间的那一部分。

从CSS盒子模型中，我们可以看出，内边距padding分为4个方向：padding-top，顶部，padding-bottom，底部，padding-left，左侧，padding-right，右侧，语法：

padding-top:像素值；padding-bottom:像素值；padding-left:像素值；padding-right:像素值；

示例代码：

      内边距          #outer {        display:inline-block;        border: 1px solid #cccccc;      }      #inner {        display:inline-block;        padding-top:30px;        padding-right:60px;        padding-bottom:30px;        padding-left:120px;        margin:50px;        border: 1px solid red;        background-color:#fce9b8;      }      span {        border: 1px solid blue;        background-color: #c5fcdf;      }            

  预览浏览器效果，可以看见，inner与outer之间有50像素的空白区域，这就是inner的外边距撑起来的，然后inner的内部边距，上下相同，左侧是右侧的2倍，所以我们看到span内容区靠右侧显示。padding简洁写法：在实际开发中，我们一般使用padding的简洁写法，设置属性，这样更加高效。padding简洁写法分为三种，1、padding: 20px；，这样表示4个方向的内边距都是相等的，均是20像素；2、padding: 20px 40px; ，这样表示上下相同，左右相同，即padding-top,padding-bottom，20px，而padding-left，padding-right，40px；3、padding: 10px 20px 30px 40px;，这样表示上右下左，即padding-top=10px，padding-right=20px，padding-bottom=30px，padding-left=40px，这个顺序是固定，不能随便写，如果觉得记不住，就在脑中默念，顺时针，上右下左。语法：

padding: 像素值；padding: 像素值上下 像素值左右；padding: 像素值上 像素值右 像素值下 像素值左；

示例代码：

      简洁写法           #outer {        display:inline-block;        border: 1px solid #cccccc;      }      #inner {        display:inline-block;        padding: 40px 80px 40px 80px;        margin: 60px;        border: 1px solid red;        background-color: #fce9b8;      }      span {         border: 1px solid blue;        background-color: #c5fcdf;      }            

外边距margin:外边距margin，指的是边框到父元素或者同级元素之间的那一部分。

从CSS盒子模型中，我们可以看出，外边距也分为4个方向：margin-top，margin-right，margin-bottom，margin-left。这一点与内边距非常相似。语法：

margin-top:像素值；margin-bottom：像素值；margin-left：像素值；margin-right：像素值；

示例代码：

      外边距          #outer {        display:inline-block;        border: 1px solid black;      }      #inner {        display:inline-block;        margin-top: 20px;        margin-right:40px;        margin-bottom: 20px;        margin-left: 80px;        border: 1px solid red;        background-color:#fce9b8;      }            

  简洁写法：margin跟padding一样，也有简洁写法。在实际开发中，我们通常使用margin的简洁写法，这样高效。margin简洁写法有三种，分别是,1、margin：30px；，表示4个方向的外边距均是30px；2、margin：30px 60px；，表示上下是30px，即margin-top，marginbottom，30px，左右相同，即margin-left，margin-right，60px；3、margin：10px 20px 30px 40px，表示margin-top=10px，margin-right：20px，margin-bottom：30px，margin-left：40px，顺序依然是顺时针方向，上右下左。语法：

margin: 像素值；margin: 像素值上下 像素值左右；margin：像素值上 像素值右 像素值下 像素值左；

示例代码：

      外边距          #outer {        display:inline-block;        border: 1px solid black;      }      #inner {        display: inline-block;        margin: 30px 60px 30px 60px;        border: 1px solid red;        background-color: #fce9b8;      }            

CSS盒子模型这节内容，很重要，因为使用css样式布局时，很多方面都需要理解盒子模型后，才能顺利的进行布局设置，不然页面效果始终不能按照你的意图展示，调试会很累，很麻烦的。希望初学者能够多加练习，理解盒子模型的概念和用法。

---