盒子模型的属性

1.margin （外边距）

 盒子四周的区域

2.padding（内间距）

内容与边界之间产生的空间

3.border（边框）

在padding的外边缘与margin的内边缘之间，默认为0

4.width & height

用于显示内容的内容区的宽和高，盒子高度默认为内容区的高度

盒子的种类

使用box-sizing属性可改变盒子模型，默认的盒子模型属性值为content-box，内容盒子，即第一类盒子模型。

1.wsc盒子/标准盒子/内容盒子：

如图：

 注意点：

• 标准盒子的宽度：

width + padding-left + padding-right + border-left + border-right

• 标准盒子的高度：

 height + padding-top + padding-bottom + border-top + border-bottom

• 标准盒子所占页面的宽度： 

标准盒子的宽度  + margin-left + margin-right 

• 标准盒子所占页面的高度：

标准盒子的高度 + margin-top + margin-bottom 

 2.边框盒子/IE盒子/怪异盒子

边框盒子的box-sizing属性值为border-box

边框盒子设置的宽度是给整个盒子设置的

• 边框盒子的宽度：

width = contentWidth + padding-left + padding-right + border-left + border-right

• 边框盒子的高度：

 height = contentHeight + padding-top + padding-bottom + border-top + border-bottom

• 边框盒子所占页面的宽度： 

width  + margin-left + margin-right 

• 边框盒子所占页面的高度：

height + margin-top + margin-bottom 

oo面试题oo

说一说盒子模型？区别？

1.盒子种类：

        1.w3c盒子/内容盒子/标准盒子  box-sizing:content-box

        2.边框盒子 IE盒子 怪异盒子   box-sizing:border-box

   2.盒子区别：

        1.w3c盒子的width是设置给内容区的

        盒子的宽：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

        2.边框盒子的width是设置给盒子的

        盒子的宽：width

        所占页面的宽：width + margin-left + margin-right        

        盒子的高：height

        所占页面的高：height + margin-top + margin-bottom