谈谈盒子模型?

来源:互联网 发布:农行软件中心面试 编辑:程序博客网 时间:2024/06/05 06:57

什么是盒子模型?


a、CSS盒子模式都具备:内容(content)、填充(padding)、边框(border)、边界(margin)


b、标准的盒模型:width = 内容宽度


c、IE的盒模型:width = 内容的宽度 + 加上内边距的宽度 + 边框的宽度



 如何设置盒子模型的模式?


a、box-sizing:content-box: padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和,即 ( Element width = width + border + padding,但占有页面位置还要加上margin ) 


b、box-sizing:border-box: padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值,即使定义有border和padding也不会改变对象的实际宽度,即 ( Element width = width )



原创粉丝点击