CSS 小結筆記之盒子模型

Assist發表於2018-08-22
CSS筆記模型

網頁標籤可以看成是一個個盒子，頁面設計就像壘積木一樣，在網頁中將盒子擺好顯示出來。在瀏覽器中可以很清楚的去看到一個標籤的盒子，具體方法如下：

開啟瀏覽器的開發人員工具，在Elements中選中一個標籤，在右側的styles拉倒最後可以看到這個標籤的盒子模型。具體如下圖所示：

1、邊框 border : border-width || border-style || border-color

border-style 代表邊框的樣式，常用的樣式有以下幾種

  • none：無邊框
  • hidden：與none類似，不過應用於表格時時解決邊框衝突。
  • dotted：點狀邊框 
  • dashed：虛線邊框
  • solid：實線
  • double：雙線
  • groove：凹槽邊框，主要取決於border-color的取值
  • ridge：3D壟狀邊框
  • inset ：3Dinset邊框
  • outset：3Doutset邊框

邊框的樣式既可以單獨指定每條線，也可以一起指定上下左右四條線。具體用法如下

單獨指定可以使用border-left（bottom | right |top）-style（color | width）

一起指定：

  • border-style：上  右  下  左
  • border-style：上  左右  下
  • border-style： 上下  左右 
        p.p1 {
            border-style: none;
        }
        
        p.p2 {
            border-style: hidden;
        }
        
        p.p3 {
            border-width: 3px;
            border-style: solid;
            border-color: red;
        }
        
        p.p4 {
            border-width: 1px 2px 3px 4px;
            border-style: dashed;
            border-color: orange;
        }
        
        p.p5 {
            border-width: 3px;
            border-color: black;
            border-style: dotted;
        }
        
        p.p6 {
            border-width: 3px;
            border-color: black blue red green;
            border-style: double;
        }
        
        p.p7 {
            border-width: 3px;
            border-color: green;
            border-style: groove;
        }
        
        p.p8 {
            border-width: 3px;
            border-color: orange red green;
            border-style: ridge;
        }
        
        p.p9 {
            border-width: 3px;
            border-color: orange green;
            border-style: inset;
        }
        
        p.p10 {
            border-width: 3px;
            border-color: orange blue red green;
            border-style: outset;
        }
    <p class="p1">p1</p>
    <p class="p2">p2</p>
    <p class="p3">p3</p>
    <p class="p4">p4</p>
    <p class="p5">p5</p>
    <p class="p6">p6</p>
    <p class="p7">p7</p>
    <p class="p8">p8</p>
    <p class="p9">p9</p>
    <p class="p10">p10</p>

結果如下：

在Css3中有一種新的邊框：圓角邊框，border-radius後邊指定百分數或畫素；

這個與邊框類似都可以同時制定四個角也可以單獨指定每一個角。

        div {
            width: 200px;
            height: 200px;
            border: 1px solid red
        }
        
        div:first-child {
            border-radius: 20px;
        }
        
        div:nth-of-type(2) {
            border-radius: 20%;
        }
        
        div:nth-of-type(3) {
            border-radius: 50%;
        }
        
        div:nth-of-type(4) {
            border-radius: 10px 50px;
        }
        
        div:nth-of-type(5) {
            border-radius: 10px 50px 100px;
        }
        
        div:nth-of-type(6) {
            border-radius: 10px 30px 60px 90px;
        }
        
        div:nth-of-type(7) {
            border-radius: 100px;
            height: 100px;
        }
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

2、內邊距 padding

內邊距的指定和邊框的指定類似，可以使用padding-left（top|right|bottom）一一指定，也可以直接同時指定四個邊距，同時指定時與border-style同時指定時的規律一致。

 div {
            width: 200px;
            height: 200px;
            border: 1px red solid;
            /* padding-left: 10px;
            padding-right: 30px;
            padding-top: 50px;
            padding-bottom: 100px; */
            padding: 50px 30px 100px 10px;
        }

此時盒子模型為:,border框出的大小為240*350。

3、外邊距 margin

 margin指定方式與padding類似 可以指定單個，也可以同時指定多個邊距

div {
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 100px;
            /* margin-left: 100px;
            margin-top: 100px; */
        }

此時盒子模型為

可以通過設定margin的左右都是auto來使盒子水平居中（必須是塊元素，且設定了寬度）。

 div {
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 100px auto;
            /* margin-left: 100px;
            margin-top: 100px; */
        }

 外邊距注意事項：

（1）、行內元素只有左右外邊距沒有上下外邊距，指定內邊距時也會出現問題。

（2）、上下垂直放置的兩個盒子，如果設定上盒子的margin-bottom和下盒子的margin-top，則在顯示效果上兩個邊距會合併為一個，顯示較大的那個邊距。

（3）、巢狀的兩個盒子，如果設定內盒子的外邊距，則顯示效果是是整體的外邊距，而不是內部盒子與外部盒子的邊距。解決方案：

  • 給外盒子設定邊框
  • 給外盒子設定內邊距
  • 設定overflow:hidden　　

4、盒子大小的計算方法 　

（1）、空間尺寸：內容的寬（高）+padding的寬（高）+border的寬（高）+margin的寬（高）

（2）、可見尺寸：內容的寬（高）+padding的寬（高）+border的寬（高）

（3）、如果一個盒子沒有給定寬度或高度大小，或者是從父元素繼承寬或高，則padding的寬或高不會影響盒子的大小。　　　

相關文章