CSS盒子模型有哪些意思？-百分百源码网

CSS盒子模型有哪些意思？

发布时间：09/01 来源：未知浏览：关键词：

CSS盒子模型都具备内容content、内边距padding、边框border、外边距margin这些属性，这些属性可以用日常生活中的常见事物“盒子”作一个比方来懂得，所以称作为盒子模型。

CSS （Cascading Style Sheet）可译为“层叠样式表 ”或“级联样式表”，它定义怎样显示HTML 元素，用于操纵Web页面的外不雅。通过使用CSS实现页面的内容与展现情势别离，极大提高了工作效力。CSS 假定所有的HTML 文档元素都生成了一个描写该元素在HTML文档规划中所占空间的矩形元素框，可以形象地将其看作是一个盒子。CSS 环绕这些盒子发生了一种“盒子模型”概念，通过定义一系列与盒子相关的属性，可以极大地丰硕和促进各个盒子乃至整个HTML文档的展现结果和规划构造。关于是盒子的元素，假如没有非凡设定，其默许总是占独立的一行，宽度为阅读器窗口的宽度，在其前后的元素不管是不是盒子，都只能摆列在它的上面或者下面，即上下累加着停止摆列。HTML文档中的每个盒子都可以看成是由从内到外的四个部分构成，即内容区（content）、填充(padding)、边框(border)和空白边(margin)。 CSS 为四个部分定义了一系列相关属性，通过对这些属性的设定可以丰硕盒子的展现结果。

视频教程引荐：《CSS教程汇合-PHP中文网》

盒子模型组成

内容区（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 规划技术中的一个重要办法。