html盒⼦模型包含哪些部分,CSS盒⼦模型由哪四部分组成？CSS盒⼦模型就是在⽹页设计中经常⽤到的CSS技术所使⽤的⼀种思维模型，指在⼀个⽹页⽂档中，每个元素都被呈现为⼀个矩形的盒⼦，描述了元素所占空间的内容。
CSS盒⼦模型由哪四部分组成？
盒⼦模型由元素内容(content)、内边距(padding)、边框(border)和外边距(margin)⼏个要素组成。
可以发现margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒⼦的这三个部分。⽽content则是HTML元素的内容。
内容区(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(实线)等九种边框样式。html网页设计css
使⽤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 布局技术中的⼀个重要⽅法。
盒⼦的⼤⼩
盒⼦的⼤⼩指的是盒⼦的宽度和⾼度。⼤多数初学者容易将宽度和⾼度误解为width和height属性，然⽽默认情况下width和height属性只是设置content(内容)部分的宽和⾼。盒⼦真正的宽和⾼按下⾯公式计算：盒⼦的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 +左边距 + 右边距
盒⼦的⾼度 = 内容⾼度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距
为了显得专业⼀点，我们还可以⽤带属性的公式表⽰：盒⼦的宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
盒⼦的⾼度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
上⾯说到的是 默认 情况下的计算⽅法，另外⼀种情况下，width和height属性设置的就是盒⼦的宽度和⾼度。盒⼦的宽度和⾼度的计算⽅式由box-sizing属性控制。box-sizing属性值
content-box：默认值，width和height属性分别应⽤到元素的内容框。在宽度和⾼度之外绘制元素的内边距、边框、外边距。
border-box：为元素设定的width和height属性决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和⾼度内进⾏绘制。通过从已设定的宽度和⾼度分别减去外边距、边框和内边距才能得到内容的宽度和⾼度。
inherit：规定应从⽗元素继承box-sizing属性的值。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。