简述css中的不同盒模型的特性，以及应用，介绍box-sizing属性

• 1.在css中盒模型分为2种：
  • 1）w3c标准盒子盒模型：
    默认情况下我们使用的都是标准盒子模型，他的计算规则：
    元素的实际宽度=width+左右padding+左右border
    元素的实际高度=height+上下padding+上下border
    width和height指的是内容区的宽度和高度，所以设置了内间距padding和边框线border之后盒子是会被撑大的。
  • 2）ie怪异盒子模型
    在ie盒模型中width和height就是元素的实际宽度和高度
    计算规则：
    元素内容区的宽度=width-左右padding-左右border
    元素内容区的高度=height-上下padding-上下border
    设置padding和border会使内容区变小。
• 2.我们可以通过box-sizing属性来更改盒子模型
  • 如果box-sizing:content-box;这种模式是w3c标准盒模型
  • 如果box-sizing:border-box;这种模式是ie怪异盒模型

陆荣涛前端学习交流Q群858752519
加群备注：CSDN推荐