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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。