CSS 盒子模型的高度与宽度

width与height仅运用于元素内容content。

盒子的实际高度包括content的height、上下padding与上下border；实际宽度包括content的width、左右padding与左右border。margin影响盒子模型显示的位置，不影响盒子模型的大小。

正常的盒子模型， box-sizing的默认属性是content-box。

<style>
        div{
            width: 300px;
            height: 400px;
            margin: 20px;
            padding: 30px;
            border: 5px solid red;
            /* 盒子显示宽度370px,高度470px */
        }
    </style>

怪异盒模型， box-sizing的属性设置为border-box。

<style>
        div{
            width:370px;
            height: 470px;
            margin: 20px;
            padding: 30px;
            border: 5px solid red;
            box-sizing: border-box;
            /* 盒子显示宽度370px,高度470px */
        }
    </style>