css 盒模型内容

盒模型

 <div style=" width: 500px;   height: 300px;  border:1px solid red;"></div>

w3c:width:content
IE:width:content+padding+border

    margin(外边距) - 清除边框外的区域，外边距是透明的。
    border(边框) - 围绕在内边距和内容外的边框。
    padding(内边距) - 清除内容周围的区域，内边距是透明的。
    content(内容) - 盒子的内容，显示文本和图像。

    W3C盒子模型：width指content部分的宽度
    IE盒子模型：width表示content+padding+border这三个部分的宽度


    切换盒模型
    box-sizing: content-box 是W3C盒子模型
    box-sizing: border-box 是IE盒子模型