Java教程

两种盒子模型区别

本文主要是介绍两种盒子模型区别，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

W3C 标准盒模型

box-sizing=“content-box”;
当我们对一个元素设置他的 width 和 height 的时候，标准盒模型只是对content 设置了宽 高，那么这个元素真正的宽高就还要加上他的 padding，border，margin。

公式：

  • width = 内容的宽度
  • height = 内容的高度

IE 盒模型(怪异盒模型)

box-sizing=“border-box”;
当我们对一个元素设置它的 width 和 height的时候，怪异盒模型把整个盒子看成是一个整 体。对整个盒子设置宽高，同时再设置额外的边距和边框时，
中间的 content 就要受到挤压,变小。

公式：

  • width = border + padding + 内容的宽度
  • height = border + padding + 内容的高度
这篇关于两种盒子模型区别的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航