盒模型 什么是盒子模型？盒子模型有哪些属性

在body中的每一个HTML标签实际上都被包围在一个看不见的矩形中，这个矩形就叫做"盒"。

padding属性

2）设置三个关于border的属性

h1 { border-width: 6px; border-style: solid; border-color: #ffff00; }

margin属性

当上下和左右参数一致的时候，也可以这样设置，如下：

h1 { margin: 6px 0; }

margin属性

3、计算盒子的尺寸

在所有标签中都有padding，border，margin一层层的包围在内容区域的外面，四个部分被设置后，整个盒子的尺寸计算方法如下：

整个盒子的宽度

=内容区域的宽度+左padding+右padding+左border+右border+左margin+右margin

整个盒子的高度

=内容区域的高度+上padding+下padding+上border+下border+上margin+下margin

4、默认浏览器的样式

当你没有为网页定义样式的时候，浏览器会使用默认的样式，把下面的这段代码加入到你的css开始部分覆盖浏览器的默认样式，代码包含我们前面介绍过的标签，这样我们就可以根据自己需求自由控制网页了，这个过程称之为CSS的初始化，在实际的项目中，初始化是必不可少的部分。

html, body, h1, h2, h3, p, ol, ul, li, a { padding: 0; border: 0; margin: 0 }

设置默认浏览器样式

总结：

每个标签都填充在一个看不见的盒子中块标签所在的盒会占据浏览器一整行的位置使用padding可以设置边框到内容区域的距离使用margin可以设置边框之外的距离