css3中的box-sizing属性

2017-08-16  本文已影响6人  手中握著格桑花

css中的盒模型分为两种,W3C的标准模型与IE的传统模型:


一、W3C的标准盒模型

外盒尺寸:

1、Element Height = content height + margin + padding + border

2、Element Width= content width+ margin + padding + border

内盒尺寸:

1、Element Height= content height+ padding + border

2、Element Width = content width + padding + border

二、IE的传统盒模型(IE6以下)

外盒尺寸:

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

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

内盒尺寸:

1、Element Height = content height(height包含了元素内容高度,边框高度,内边距高度)

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


box-sizing语法:

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


box-sizing:content-box 维持了W3C标准(默认值);

box-sizing:border-box维持了IE的标准;

                                                                                                 

                                                                                                                                                     内容摘自部分网页

上一篇下一篇

猜你喜欢

热点阅读