8.CSS盒子模型

1.CSS盒子模型

1.CSS盒模型本质上是一个盒子，封装周围的HTML元素。
2.外边距Margin、边框Border、内边距Padding、实际内容Content。

2.元素宽度和高度

1.完整大小的元素，必须添加内边距，边框和外边距、内容区域的宽度（width）和高度。

<style>
div {
    background-color: lightgrey;
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}
</style>

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

浏览器的兼容性问题

1.然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。