CSS基礎（四）：盒模型

時間 2019-12-04

標籤 css 基礎模型欄目 CSS 简体版

原文原文鏈接

CSS盒模型css

HTML文檔中能夠將每一個元素都看做是長方形的盒子。而CSS盒模型規定了元素框處理元素內容content、內邊距padding、邊框border和外邊距margin的方式。下圖是W3C對於盒模型的描述圖。html

使用Firebug，能夠輕鬆地查看到盒子的佈局大小。佈局

盒子自己的大小是這樣計算的：url

width: width + padding-left + padding-right + border-left + border-rightspa

height: height + padding-top + padding-bottom + border-top + border-bottomcode

靜態定位或相對定位的盒子htm

當放置一個塊級元素於頁面上時，而且不設置它的定位屬性(relative,absolute,fixed),即position:static,或者設置了position:relative的狀況下，塊的寬度是延伸自動填充滿它的父元素的寬度區域。blog

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>盒子模型</title>
    <style type="text/css">
      .box1
        { 
            background:black;
            color:White;
            height:100px;
            padding:10px;
            border:20px solid Red;
            margin:30px;
        }
    </style>
  </head>

  <body>
    <h2>靜態定位和相對定位的盒子</h2>
    <div class="box1">靜態定位和相對定位的盒子</div>
  </body>
</html>

注意上面的盒子是沒有聲明寬度的，因此默認寬度爲100%，padding 和 border 會向內推進，而不是向外擴展。utf-8

可是當聲明寬度後，那麼 padding 就會向外延展。文檔

浮動和絕對定位的盒子

當設置浮動float元素和絕對定位元素，他們的結果卻偏偏相反，他們會收縮以至包裹緊貼內容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>盒子模型</title>
    <style type="text/css">
      .box1
        { 
            background:black;
            color:White;
            height:100px;
            padding:10px;
            border:20px solid Red;
            margin:30px;

            position:absolute;
        }
    </style>
  </head>

  <body>
    <h2>浮動和絕對定位的盒子</h2>
    <div class="box1">浮動和絕對定位的盒子</div>
  </body>
</html>