HTML盒模型之"五环之歌"练习

时间 2019-11-08

标签 html 模型五环之歌练习栏目 HTML 繁體版

原文原文链接

五环之歌HTML5盒模型练习html

html任何一个元素均可以看做一个盒子，这个盒子不可见，可是它存在于页面的每一个角落，也正是因为它不可见、不直观，不少人在初学CSS的时候不能透彻得理解盒模型的概念，致使在页面布局中出现各类各样的问题。下面是一个盒子模型图，一个盒子包括了content（实际内容）、border（边框）、padding（内边距）和margin（外边距）。
content（实际内容）浏览器

盒子的内容，显示文本和图像。咱们给元素设置的width和height实际上是content的宽高，布局

若是指定高度大于显示内容所需高度，多余的高度会产生相似内边距同样的效果；若是指定高度小于显示内容所需高度，会出现滚动条。若是元素内容的高度大于元素框的高度，浏览器的具体行为取决于overflow属性。spa

border（边框）code

元素的边框是围绕元素内容的内边距的一条或多条线。边框由粗细、样式和颜色三部分组成。htm

padding（内边距）blog

清除内容周围的区域，内边距是透明的，取值不能为负，受盒子的Background属性影响，padding是有背景的。图片

margin（外边距）页面布局

在元素外建立额外的空白，空白一般指不能放其余元素的区域，并且在这个区域中能够看到父元素的背景（padding所带的是自己的背景而非父元素）。margin常常取负值实现定位的做用。it

外边距有一个合并问题，常常令人们混淆，简单来讲，外边距合并指的是，当两个垂直外边距相遇时，它们将造成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
在html入门时学的盒模型,这个练习对盒模型的熟练运用有帮助,由6个盒组成

代码以下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>五环之歌</title>
  <style media="screen">
    .div1 {
      border: 1px dashed black;
      padding: 27px;
      width: 350px;
      height: 350px;
      margin: 100px auto;
    }
    .div2 {
      width: 300px;
      height: 300px;
      padding: 20px;
      border: 5px solid #d7effe;
    }
    .div3 {
      background-color: #ffa0df;
      overflow: hidden;
    }
    .div4 {
      margin: 40px;
      border: 1px dashed white;
      width: 218px;
      height: 218px;
    }
    .div5 {
      margin: 3px;
      border: 1px dotted white;
      width: 210px;
      height: 210px;
    }
    .div6 {
      margin: 49px;
      border: 5px solid #fcff00;
      width: 100px;
      height: 100px;
      background-color: #96ff38;
    }
  </style>
</head>
<body>
  <div class="div1">
    <div class="div2">
      <div class="div3">
        <div class="div4">
          <div class="div5">
            <div class="div6"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>