关于盒子模型的介绍

1、什么是Box model

在HTML中的每个element(元素)都可以看作一个矩形的盒子，矩形从内到外依次由元素的内容(content)、内边距(padding)、边框(border)、外边距(margin)组成。

在CSS的布局中，元素的矩形被称为"Box Model"，即盒子模型。在浏览器渲染页面时，盒子模型决定了元素的大小和位置

2、盒子模型的结构

如下图：

content：内容区域；文本、图片出现的位置。CSS中的width、height属性直接作用的区域。

padding：内边距区域，存在于content 和 border 之间的区域。可使用CSS的属性有padding-top、padding-right、padding-bottom、padding-left以及padding。

border：边框区域，存在于padding 和 margin 之间的区域。在默认布局中border的宽度会设置为0，从而不显示元素的边框。

margin：外边距区域。控制其他元素与当前元素的边距距离。可使用CSS的属性有margin-top、margin-right、margin-bottom、margin-left以及margin

盒子的宽高

默认情况下，CSS中的width、height属性是指content(内容)区域的宽高。

在DOM中，获取元素高宽有以下属性：clientWidth/clientHeight、offsetWidth/offsetHeight、scrollWidth/scrollHeight。

 

元素的宽度和高度

当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和外边距。

下面的例子中的元素的总宽度为 450px：

实例：

div {

        width: 280px;

        border: 30px solid blue;

        padding: 30px;

        margin: 30px; }