CSS盒子模型入門學習

CSS盒子模型

• 內容區(Content)
  存放在body之間的元素
• 內邊距(Padding)
  padding內邊距指的是盒子的內容區與盒子邊框之間的距離，一共有四個方向的內邊距
  分別是padding-top、padding-left、padding-bottom、padding-right,需要注意的是內邊距會影響盒子可見框的大小。

<div class="c1">
</div>

.c1 {
   width: 100px;
   height: 100px;
   background-color: blue;
   border: red solid 10px;
   border-right: none;
}

出現效果如下圖所示：

當我CSS中設置上內邊距爲50px如下所示：

效果如下圖所示：可以很清晰看到元素變大。

爲了更清晰驗證內邊距對內容區的影響，可以在原div的元素上在創建一個子Div元素如下所示：

<div class="c1">
   <div class="c2"></div>
</div>

.c1 {
   width: 200px;
   height: 200px;
   background-color: blue;
   border: red solid 10px;
   padding-top: 100px;
   padding-bottom: 100px;
   padding-left: 100px;
   padding-right: 100px;
}

.c2 {
   width: 100%;
   height: 100%;
   background-color: gold;
}

然後頁面可見框模型如下圖所示：

• 邊框(Border)
  爲一個元素設置邊框必須設置以下屬性：

1. 邊框寬度
2. 邊框顏色
3. 邊框樣式
   一個簡單的邊框元素設置如下所示：

<div class="div1">
</div>

.div1 {
    /**
    若屬性設置四個值即爲
    設置邊框上、右、下、左長度
    若設置爲三個值則爲
    設置邊框上 左右 下 長度
    若設置兩個值則爲
    設置邊框上下 左右
    若設置一個值
    則設置所有方向的值長度

    除此之外還提供有border-bottom-width
    border-left-width
    border-right-width
    border-top-width
    */
    border-width: 10px 20px 30px 40px;


    border-color: red;
    /**
        實線邊框樣式
     */
    border-style: solid;
    width: 100px;
    height: 100px;
    background-color: black;
}

效果如下圖所示：

• 外邊距(margin)
  外邊距指的是當前盒子與其他盒子之間的距離，不會影響盒子的大小，但是會影響此盒子在頁面的位置。

<div class="c1"></div>

.c1 {
    width: 200px;
    height: 200px;
    border: aqua solid 10px;
    background-color: gold;
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 100px;
    margin-left: 100px;
    /**
    以上需要注意的是
    margin-top與margin-left改變的是元素本身的位置
    而margin-right與margin-bottom改變的是其他元素的位置
     */
}

頁面效果如下所示：這裏設置的外邊距指的是當前div元素距離父元素body元素的距離

新建一個div元素作爲c1類的兄弟元素，頁面及css設置如下所示：

<div class="c1"></div>
<div class="c2"></div>

.c2 {
    width: 200px;
    height: 200px;
    border: yellow solid 10px;
    background-color: red;
}

頁面效果如下圖所示：

以上需要注意的是 margin-top與margin-left改變的是元素本身的位置而margin-right與margin-bottom改變的是其他元素的位置，而margin還可以設置爲auto。一般只設置水平方向即margin-left與margin-right，若設置auto則外邊距最大值，例如設置margin-left爲auto，css設置元素如下所示：

.c1 {
    width: 200px;
    height: 200px;
    border: aqua solid 10px;
    background-color: gold;
    margin-top: 100px;
    margin-bottom: 100px;
    margin-left: auto;
}

可以看到 margin-left設置外邊距最大值的效果。

若是margin-left與margin-right 都設置auto則元素水平居中如下所示：

CSS盒子垂直外邊距垂直問題

• 相鄰元素垂直外邊距
  請看下面頁面元素以及css樣式設置如下所示：

<div class="c1"></div>
<div class="c2"></div>

.c1 {
    background-color: red;
    width: 200px;
    height: 200px;
    border: yellow solid 10px;
    margin-bottom: 100px;
}

.c2 {
    background-color: gold;
    width: 200px;
    height: 200px;
    border: fuchsia solid 10px;
    margin-top: 100px;
}

此時的頁面效果如下所示：

當設置c2元素margin-top 100px 結果發現頁面元素位置沒有任何變化，這個現象就是由於垂直外邊距的重疊。這是因爲兄弟兩個元素髮生垂直外邊距重疊時候不是取兩個元素外邊距之和而是取兩者之中的最大值。

• 父子元素垂直外邊距離
  新增兩個div元素，c3與c4。

<div class="c3">
    <div class="c4"></div>
</div>
<div class="c1"></div>
<div class="c2"></div>

.c3 {
    height: 400px;
    width: 400px;
    background-color: brown;
}

.c4 {
    height: 200px;
    width: 200px;
    background-color:gray;
}

頁面效果顯示如下所示：如果要使c4向下移動200px距離二c3保持位置不變如何做呢？

我們修改c4的css代碼爲其上外邊距移動200px

頁面效果如下所示：我們發現c4確實向下移動了200px單位，但是父元素c3也跟着向下移動了200px，造成這個原因是垂直外邊距外邊距具有傳遞性的緣故，相當於父元素也同樣設置了margin-top: 200px,所以當我們爲父元素c3也同樣設置了margin-top: 200px，頁面依然是下面這樣的效果。
我們可以讓c3元素增加其盒子長度，即c3向上延伸200px，然後在對c3本身的高度進行減少1/2長度即可如下所示：

.c3 {
    height: 200px;
    width: 400px;
    background-color: brown;
    padding-top: 200px;
}

頁面實現效果如下所示：