CSS盒子模型

什么是盒子模型？

HTML文档元素在页面中所占空间的矩形元素框，可以形象地将其看作是一个盒子

实际开发过程中的盒子模型

打开谷歌浏览器，按F12，选中一个自定义div标签元素，可以在右侧的Styles标签页查看到盒子模型，其中最外层是margin，接着是border，然后是padding，最里面的是content

盒子有哪些属性？

盒子模型中的盒子有这样几个属性：margin（外边距），border（边框），padding（内边距），content（内容区）

margin

margin在盒子的最外层，它使盒子之间不会紧凑地连接在一起，是页面元素布局一种方式，它的属性有五种 ，即margin-top、margin-bottom、margin- left、margin-right以及综合了以上四种方向的快捷空白边属性margin。

需要注意的是如果有两个相邻的盒子，他们的margin会重叠而不是相加，若两者margin不等，则取二者中较大的值。

当然我们也能将margin设置为负数，这时候margin被设置为负数的盒子会向被设置margin负数的反方向移动，整个盒子将向指定负值方向的相反方向移动

border

边框是环绕content和padding的边界。边框的属性有border-style、border-width和border-color 以及综合了以上三类属性的快捷边框属性 border。若无指定边框属性设置，则元素默认无边框。

边框的样式border-style有九种：solid（实线边框）、dashed（虚线边框）、dotted（点线边框）、double（双线边框）、inset（3D嵌入式边框，效果取决于边框的颜色值）、outset（3D突出式边框，效果取决于边框的颜色值）、groove（3D沟槽边框，效果取决于边框的颜色值）、ridge（3D脊边框，效果取决于边框的颜色值）

边框宽度border-width：其属性值可以是长度计量值，也可以是CSS规定的thin、medium 和thick。

边框颜色border-color：属性可以为边框指定相应的颜色，其属性值可以是RGB值，也可以是CSS 规定的17个颜色名 。在设定以上三种边框属性时，既可以进行边框四个方向整体的快捷设置，也可以进行四个方向的专向设置，如border: 2px solid green 或border-top-style: solid、border-left-color: red等。

padding

填充是内容区和边框之间的空间。填充的属性有五种 ，即padding-top、padding-bottom、padding-left、padding-right 以及综合了以上四种方向的快捷填充属性padding。使用这五种属性可以指定内容区信息内容与各方向边框间的距离。设置盒子背景色属性时，可使背景色延伸到填充区域。

content

容区是盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区有三个属性，width、height 和overflow。使用width和height属性可以指定盒子内容区的高度和宽度，当内容信息太多，超出内容区所占范围时，可以使用overflow 溢出属性来指定处理方法。当overflow 属性值为hidden时，溢出部分将不可见；为visible时，溢出的内容信息可见，只是被呈现在盒子的外部；当为scroll时，滚动条将被自动添加到盒子中，用户可以通过拉动滚动条显示内容信息；当为auto时，将由浏览器决定如何处理溢出部分。