理解css盒模型

     css盒模型是css可视化格式化系统的基石，它是理解样式表如何工作的核心概念。盒模型可以用于元素定位和网页布局。

根据css盒模型的规定，每个元素（不管是块级还是内嵌元素）都会产生一个矩形盒子围绕在元素内容之外，这个盒子我们称为元素盒。

                                                                 边框border

    边框border是围绕着元素内容区和padding区画的一条线。边框有三个特征可以指定:宽度以及颜色。这些属性可以单个指定，也可以用缩写方式一次指定。关于边框的行为，有如下几条

* 边框画在元素背景之上。

* 非可替换内嵌元素（文本元素）的边框对于该元素所在行的行高没有影响。

* 可替换元素的边框将影响行高。

                                                                  外边距margin

  外边距margin是围绕在元素边框之外的可选区域。使用margin—top,margin-right，，margin-bottom，margin-left四个属性，可以分别设置盒模型的顶部，右部，底部，左部外边距。这四个外边距也可以用margin属性一次性缩写完成。

                                                                 内边距padding

 内边距padding是元素的内容区和边框之间的可选区域。如果我们给元素设置了边框，最好也设置padding，以防止边框紧紧挤压在内容周围。

css