盒模型

一、 盒模型的基本概念

  盒模型是CSS控制页面时的重要概念，它指定了元素如何显示以及如何相互交织。

  盒模型将页面中的每个元素看作一个矩形框。如下图：

1、盒模型的宽度=margin-left+border-left+padding-left+内容宽度width+padding-right+border-right+margin-right

2、盒模型的高度=margin-top+border-top+padding-top+内容高度height+padding-bottom+border-bottom+margin-bottom

3、由于各个浏览器有不同的margin和padding的默认值，所以为了网页排版方便，通常要清除margin、padding的默认值。

4、利用盒模型控制内容之间的距离

二、块元素和内联元素

   1、块元素是从新的一行开始，高度、行高、宽度、内边距、外边距等都是可控制的；

   2、内联元素一般显示在一行上，高度、宽度、上下margin、上下padding都是不可改变的，他的宽度是根据他的显示文本和图像的宽度决定

  3、内联元素与块元素之间的转换

         将内联元素改变为块元素   display：block； 

         将块元素改变为内联元素   display：inline；

盒模型与基础选择器的使用示范：