CSS-box-sizing

优质
小牛编辑
126浏览
2023-12-01

box-sizing

box-sizing是CSS3的box属性之一。

box-sizing : content-box || border-box || inherit

初始值 content-box

关键字:

box-sizing: content-box;
box-sizing: border-box;

全局值:

box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;

CSS的盒模型(Box model)

CSS中Box model是分为两种,第一种是W3C的标准模型,另一种是IE的传统模型.

W3C的标准Box Model:

外盒尺寸计算(元素空间尺寸):

Element Height = content height + padding + border + margin

Element Width = content width + padding + border + margin

内盒尺寸计算(元素大小):

Element Height = content height + padding + border (Height为内容高度)

Element Width = content width + padding + border (Width为内容宽度)

IE传统下Box Model(IE6以下,不含IE6版本或“QuirksMode下IE5.5+”):

外盒尺寸计算(元素空间尺寸):

Element Height = content Height + margin (Height包含了元素内容宽度,边框宽度,内距宽度)

Element Height = content Width + margin (Width包含了元素内容宽度、边框宽度、内距宽度)

内盒尺寸计算(元素大小):

Element Height = content Height(Height包含了元素内容宽度,边框宽度,内距宽度)

Element Width = content Width(Width包含了元素内容宽度、边框宽度、内距宽度)

content-box

content-box:此值为其默认值,其让元素维持W3C的标准Box Model(标准盒子模型)。

width 与 height 只包括内容的宽和高, 不包括边框(border),内边距(padding),外边距(margin)。注意: 内边距, 边框 & 外边距 都在这个盒子的外部。

元素的宽度/高度(width/height)=元素边框宽度(border)+ 元素内边距(padding)+元素内容宽度/高度(content width/height)

即:Element Width/Height = border+padding+content width/height。

比如:

如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;

border-box

border-box:此值让元素维持IE传统的Box Model(IE6以下版本),或文档处于 Quirks模式 时Internet Explorer使用的盒模型。也就是说元素的宽度/高度 等于 元素内容的宽度/高度 。填充和边框将在盒子内。

width 和 height 属性包括内容,内边距和边框,但不包括外边距。

这里的content width/height包含了元素的border,padding内容的width/height

content width/height=width/height-border-padding

例如:

.box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为350px的盒子。

这里的维度计算为:

Element width = content width,

Element height = content height

即:Element Width/Height = width/height。