css盒子模型HTML,css的盒子模型由什么组成？

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型，指在一个网页文档中，每个元素都被呈现为一个矩形的盒子，描述了元素所占空间的内容。

盒子模型是CSS中一个重要概念，理解了盒子模型才能更好的排版。

盒子模型(Box Modle)可以用来对元素进行布局，由实际内容(content)、内边距(padding)、边框(border)与外边距(margin)这几个部分组成。

内容区(content)

内容区是盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区有三个属性，width、height 和overflow。

使用width和height属性可以指定盒子内容区的高度和宽度，当内容信息太多，超出内容区所占范围时，可以使用overflow 溢出属性来指定处理方法。

当overflow 属性值为hidden时，溢出部分将不可见；为visible时，溢出的内容信息可见，只是被呈现在盒子的外部；当为scroll时，滚动条将被自动添加到盒子中，用户可以通过拉动滚动条显示内容信息；当为auto时，将由浏览器决定如何处理溢出部分。

填充(padding)

填充是内容区和边框之间的空间。填充的属性有五种 ，即padding -top、padding -bottom、padding -left、padding-right 以及综合了以上四种方向的快捷填充属性padding。

使用这五种属性可以指定内容区信息内容与各方向边框间的距离。设置盒子背景色属性时，可使背景色延伸到填充区域。

边框(border)

边框是环绕内容区和填充的边界。边框的属性有border-style、border-width和border-color 以及综合了以上三类属性的快捷边框属性 border。

border-style 属性是边框最重要的属性，如果没有指定边框样式，其他的边框属性都会被忽略，边框将不存在。CSS规定了dotted(点线)、dashed(虚线)、solid(实线)等九种边框样式。

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

使用border-color属性可以为边框指定相应的颜色，其属性值可以是RGB值，也可以是CSS 规定的17个颜色名 。

在设定以上三种边框属性时，既可以进行边框四个方向整体的快捷设置，也可以进行四个方向的专向设置，如border: 2px solid green 或border-top-style: solid、border-left-color: red等。

设置盒子背景色属性时，在IE中背景不会延伸到边框区域，但在FF等标准浏览器中，背景颜色可以延伸到边框区域，特别是单边框设置为点线或虚线时能看到效果。

空白边(margin)

空白边位于盒子的最外围，是添加在边框外周围的空间。空白边使盒子之间不会紧凑地连接在一起，是CSS 布局的一个重要手段。

空白边的属性有五种 ，即margin-top、margin-bottom、margin- left、margin-right以及综合了以上四种方向的快捷空白边属性margin，其具体的设置和使用与填充属性类似。

对于两个相邻的(水平或垂直方向 )且设置有空白边值的盒子，他们邻近部分的空白边将不是二者空白边的相加，而是二者的并集。

若二者邻近的空白边值大小不等，则取二者中较大的值。

同时，CSS 容许给空白边属性指定负数值，当指定负空白边值时，整个盒子将向指定负值方向的相反方向移动，以此可以产生盒子的重叠效果。

采用指定空白边正负值的方法可以移动网页中的元素，这是CSS 布局技术中的一个重要方法。