CSS3 盒模型尺寸计算

时间:2024-05-19 14:23:16

css假定每个元素都会生成一个或多个矩形框,这称为元素框。各元素框中心有一个内容区。这个内容区周围有可选的内边距,边框和外边距。

CSS3 盒模型尺寸计算

W3C的标准盒模型

内盒尺寸计算(元素大小):
元素高度 = 内容高度 + 内边距 + 边框
元素宽度 = 内容宽度 + 内边距 + 边框

外盒尺寸计算(元素空间大小)
元素空间高度 = 内容高度 + 内边距 + 边框 + 外边距
元素空间宽度 = 内容宽度 + 内边距 + 边框 + 外边距

IE盒模型

内容大小:高=height-(border+padding)*2
宽=width-(border+padding)*2

实际大小:高=height+margin*2
宽=width+margin*2