盒子模型详情

什么是盒子模型？

盒子模型是指将网页设计页面中的内容元素看作一个个装了东西的矩形盒子。每个矩形盒子都由内容、内边距、边框和外边距4个部分组成。 

 盒子模型的大小？

盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

盒子模型的作用

通过定义一系列与盒子相关的属性，可以丰富和促进各个盒子以及整个HTML文档的表现效果和布局结构 。

盒子模型属性介绍

一个盒子由内到外分为四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。

margin（外边距）属性

语法

  盒子有四个方向的外边距

      margin-top     上边距，可设置正值，元素会向下移动； 也可以设置负值，元素向上移动 

      margin-right    默认情况下不会产生效果

      margin-bottom 下外边距，设置一个正值，其下面的元素会向下移动，挤别人

      margin-left      左外边距  设置正值，元素向右移动   

padding （内边距）属性

padding表示盒子的内边距（填充）。与外边距不同，padding不是只能完全透明的，可以设置背景颜色和图片。
与margin类似，padding包含了上下左右四条边，开发者可以单独设置每一条边的边距。

属性	作用
padding-left	左内边距
padding-right	右边距
padding-top	上边距
padding-bottom	下边距

应用：padding内边距可以撑开盒子所以在导航栏的应用中，由于每个导航栏里面的字数不一样多，我们可以不用给每个盒子宽度，直接用padding撑开盒子最合适，可以保证每个盒子的字都可以居中显示。 

border（边框） 属性

border-top-width：上边界宽度         border-top-style：上边界样式

border-top-color：上边界颜色         border-bottom-width：下边界宽度

border-bottom-style：下边界样式   border-bottom-color：下边界颜色

border-left-width：左边界宽度       border-left-style：左边界样式

border-left-color：左边界颜色       border-right-width：右边界宽度

border-right-style：右边界样式     border-right-color：右边界颜色

边框样式

 border-top-left-radius：左上角

 border-top-right-radius：右上角

 border-bottom-left-radius：左下角

 border-bottom-left-radius：右下角

content（内容）属性

内容区是整个盒子模型的中心，  其中存放了网页的主要元素，  这些元素可以是 文本、图像等。

内容区有 width、height、overflow 三个属性 。其中 width 和  height 属性用来指定盒子内容区域的宽度和高度。

当内容信息过多，超出内容区设置的范围时，可以使用overflow属性设置溢出内容的处理方式overflow属性的四个可选值：

属性值	描述
hidden	隐藏溢出的部分
visible	显示溢出的部分  ( 溢出部分显示在盒子外部)
scroll	为内容区添加⼀个滚动条，  可以通过滑动滚动条来查看内容区的全部内容
auto	由浏览器决定如何处理溢出部分