Html5中关于对盒模型的概念理解

• List item

  盒子模型是Html+CSS中最核心的基础知识，只有理解了这个重要的概念才能对网页进行合理的排版以及页面布局。
  1、盒模型的基本概念：CSS盒子模型也叫做框模型，具备内容(content)、填充(padding)、边框(border)、边界(margin)这些属性。在CSS中，每一个元素都被视为一个框，而每个框都有三个属性：
  border:元素的边框(可能不可见)，用于将框的边缘与其他框分开
  margin：外边距，表示框的边缘与相邻框之间的距离，及相邻盒子的距离(可理解为，盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出)
  padding:内边距，表示框内容和边框之间的空间(可理解为，怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料)
  所以，总结如下：盒子从内到外是如下组成的：
  盒子模型 = 内容区域(height,width)+内边距(padding)+边框(border)+外边距(margin)同时一个盒子大小的计算方式也是如此。

  2、盒模型分为两种（W3C标准 和 IE标准盒子模型）今天我主要说的是w3c的标准盒模型，如下图所示：

  
  padding为内填充，一般用调整网页中内容与边框的距离：其语法结构如下图：
  当padding的值为四个的话，则是上/右/下/左的钟面原则方位。
  
  使用padding时同时也需要注意以下几点：
  
  margin则为外边距，一般用来调整元素与元素之间的位置关系，其语法结构如上图padding的使用方法一样，但使用margin时也需要注意一下几点：
  
  边框属性(也是占据空间的)，其语法结构通常是复合式的写法 border:border-width border-style border-color;具体如下图：