HTML盒模子之"五环之歌"演习

五环之歌HTML5盒模子演习

html任何一个元素都能够看做一个盒子，这个盒子不可见，然则它存在于页面的每一个角落，也恰是因为它不可见、不直观，许多人在初学CSS的时刻不能透辟得明白盒模子的观点，致使在页面规划中涌现林林总总的题目。下面是一个盒子模子图，一个盒子包含了content（现实内容）、border（边框）、padding（内边距）和margin（外边距）。
content（现实内容）

盒子的内容，显现文本和图象。我们给元素设置的width和height现实上是content的宽高，

假如指定高度大于显现内容所需高度，过剩的高度会发作相似内边距一样的结果；假如指定高度小于显现内容所需高度，会涌现滚动条。假如元素内容的高度大于元素框的高度，浏览器的详细行动取决于overflow属性。

border（边框）

元素的边框是缭绕元素内容的内边距的一条或多条线。边框由粗细、款式和色彩三部份构成。

padding（内边距）

消灭内容四周的地区，内边距是通明的，取值不能为负，受盒子的Background属性影响，padding是有背景的。

margin（外边距）

在元素外建立分外的空缺，空缺通常指不能放其他元素的地区，而且在这个地区中能够看到父元素的背景（padding所带的是自身的背景而非父元素）。margin常常取负值完成定位的作用。

外边距有一个兼并题目，常常使人们殽杂，简朴来讲，外边距兼并指的是，当两个垂直外边距相遇时，它们将构成一个外边距。兼并后的外边距的高度即是两个发作兼并的外边距的高度中的较大者。
在html入门时学的盒模子,这个演习对盒模子的闇练应用有协助,由6个盒构成

代码以下: