css：盒子模型邊框（邊框、內外邊距）

時間 2020-06-04

標籤 css 盒子模型邊框內外邊距欄目 CSS 简体版

原文原文鏈接

一、概念css

所謂盒子模型，就是把HTML頁面中的佈局元素看做是一個矩形的盒子，也就是一個盛裝內容的容器。css盒子模型本質上就是一個盒子，封裝周圍的HTML元素，它包括：邊框、外邊距、內邊距和實際內容html

二、邊框程序員

屬性：寬度、樣式、顏色瀏覽器

（1）普通方式佈局

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
             div{
                 width: 300px;
                 height: 200px;
                 border-width: 5px;
                 border-style: dashed;
                 border-color: red;             
             }
        </style>
    </head>

    <body>
    <div></div>
    </body>

</html>

（2）複合方式spa

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
             div{
                 width: 300px;
                 height: 200px;
                 border: 5px dashed red;         
             }
        </style>
    </head>

    <body>
    <div></div>
    </body>

</html>

（3）邊框的局部設置3d

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
             div{
                 width: 300px;
                 height: 200px;
                 border-bottom: 5px dashed red;     
                 border-top:10px dotted purple;
                 border-right:3px dashed beige ;
                 border-left: 2px dotted bisque;    
             }
        </style>
    </head>

    <body>
    <div></div>
    </body>

</html>

下面的樣式會覆蓋上面的樣式：code

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
             div{
                 width: 300px;
                 height: 200px;
                 border: 5px dashed red;     
                 border-top:10px dotted purple;
             }
        </style>
    </head>

    <body>
    <div></div>
    </body>

</html>

（4）表格的細線邊框htm

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            table{
                width: 300px;
                height: 100px;
            }
            table,td{
                border: 1px solid blue;
                border-collapse:collapse;  <!--把相鄰的邊框合併在一塊兒-->
                font-size: 14px;
                text-align: center;
                
            }
        </style>
    </head>

    <body>
    <table align="center" cellspacing="0">
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    </body>

</html>

（5）邊框會影響盒子的實際大小blog

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div{
                width: 200px;
                height: 200px;
                background-color: chartreuse;
                border: 10px red solid;
            }
        </style>
    </head>

    <body>
           <div></div>
    </body>

</html>

盒子的實際大小是內部顏色的大小，邊框會使得盒子變大，所以，實際測量的時候要減去邊框的寬度

（6）內邊距

padding屬性用於設置內邊距，即邊框與內容之間的距離

不加padding屬性：

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div{
                width: 200px;
                height: 200px;
                background-color: chartreuse;
            }
        </style>
    </head>

    <body>
           <div>牀前明月光，疑是地上霜</div>
    </body>

</html>

內容與邊框的距離沒有辦法控制

添加padding屬性：

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div{
                width: 200px;
                height: 200px;
                background-color: chartreuse;
                padding-left: 15px;
                padding-top: 10px;
            }
        </style>
    </head>

    <body>
           <div>牀前明月光，疑是地上霜</div>
    </body>

</html>

（7）內邊距：padding

圖片來源：黑馬程序員pink老師

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div{
                width: 200px;
                height: 200px;
                background-color: chartreuse;
                padding: 10px;
            }
        </style>
    </head>
    <body>
           <div>牀前明月光，疑是地上霜</div>
    </body>

</html>

（8）padding屬性對盒子大小的影響

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div{
                width: 200px;
                height: 200px;
                background-color: chartreuse;
                padding: 10px;
            }
        </style>
    </head>
    <body>
           <div>牀前明月光，疑是地上霜</div>
    </body>

</html>

定義的div的大小是100*100，可是實際的div大小是220*220，也就是說div的大小是加上內邊距以後的大小

三、盒子模型外邊距margin

（1）不設置外邊距：

<html>

    <head>
        <meta charset="utf-8">
        <title>盒子模型外邊距</title>
        <style>
           div{
               width: 100px;
               height: 50px;
               background-color: mediumvioletred;
           }
        </style>
    </head>
    <body>
      <div>1</div>
      <div>2</div>
    </body>

</html>

兩個盒子是鏈接到一塊兒的

（2）設置外邊距：

<html>

    <head>
        <meta charset="utf-8">
        <title>盒子模型外邊距</title>
        <style>
           div{
               width: 100px;
               height: 50px;
               background-color: mediumvioletred;
           }
           .div2{
               margin-top: 3px;
           }
        </style>
    </head>
    <body>
      <div>1</div>
      <div class="div2">2</div>
    </body>

</html>

margin的簡寫方式和padding徹底一致

（3）塊級元素水平居中

<html>

    <head>
        <meta charset="utf-8">
        <title>盒子模型外邊距</title>
        <style>
           div{
               width: 600px;
               height: 50px;
               background-color: mediumvioletred;
               margin: 0 auto;
           }
        </style>
    </head>
    <body>
      <div></div>
    </body>
</html>

（4）行內元素和行內塊元素水平居中：給父元素添加text-align

<html>

    <head>
        <meta charset="utf-8">
        <title>盒子模型外邊距</title>
        <style>
           div{
               width: 600px;
               height: 50px;
               background-color: mediumvioletred;
               margin: 0 auto;
               text-align: center;
           }
        </style>
    </head>
    <body>
      <div>
          <span>你們好</span>
      </div>
    </body>
</html>

行內塊元素：

<html>

    <head>
        <meta charset="utf-8">
        <title>盒子模型外邊距</title>
        <style>
           div{
               width: 600px;
               height: 50px;
               background-color: mediumvioletred;
               margin: 0 auto;
               text-align: center;
           }
        </style>
    </head>
    <body>
      <div>
          <img src="#" />
      </div>
    </body>
</html>

四、嵌套塊元素的塌陷

（1）塌陷問題：

對於兩個嵌套關係（父子關係）的塊元素，父元素有上外邊距，同時，子元素也有上外邊距，此時父元素會塌陷較大的外邊距值

<html>

    <head>
        <meta charset="utf-8">
        <title>盒子模型外邊距</title>
        <style>
           .father{
               width: 400px;
               height: 400px;
               background-color: purple;
               margin-top:50px ;
           }
           .son{
               width: 200px;
               height: 200px;
               background-color: paleturquoise;
               margin-top: 100px;
           }
        </style>
    </head>
    <body>
      <div class="father">
            <div class="son"></div>
      </div>
    </body>
</html>

此時，子元素並無向下移動

解決方案：

方案一：爲父元素定義上邊框

<html>

    <head>
        <meta charset="utf-8">
        <title>盒子模型外邊距</title>
        <style>
           .father{
               width: 400px;
               height: 400px;
               background-color: purple;
               margin-top:50px ;
               border: 1px solid red;
           }
           .son{
               width: 200px;
               height: 200px;
               background-color: paleturquoise;
               margin-top: 100px;
           }
        </style>
    </head>
    <body>
      <div class="father">
            <div class="son"></div>
      </div>
    </body>
</html>

方案二：爲父元素定義上內邊距

<html>

    <head>
        <meta charset="utf-8">
        <title>盒子模型外邊距</title>
        <style>
           .father{
               width: 400px;
               height: 400px;
               background-color: purple;
               margin-top:50px ;
               padding: 1px;
           }
           .son{
               width: 200px;
               height: 200px;
               background-color: paleturquoise;
               margin-top: 100px;
           }
        </style>
    </head>
    <body>
      <div class="father">
            <div class="son"></div>
      </div>
    </body>
</html>

方案三：爲父元素添加：overflow:hidden

<html>

    <head>
        <meta charset="utf-8">
        <title>盒子模型外邊距</title>
        <style>
           .father{
               width: 400px;
               height: 400px;
               background-color: purple;
               margin-top:50px ;
             overflow: hidden;
           }
           .son{
               width: 200px;
               height: 200px;
               background-color: paleturquoise;
               margin-top: 100px;
           }
        </style>
    </head>
    <body>
      <div class="father">
            <div class="son"></div>
      </div>
    </body>
</html>

五、清除內外邊距

<html>

    <head>
        <meta charset="utf-8">
        <title>盒子模型外邊距</title>
        <style>
    
        </style>
    </head>
    <body>
      <div>
            <div>123</div>
      </div>
    </body>
</html>

能夠看到內容「123」並無考瀏覽器的邊緣顯示，而是有一個較小的邊距。

有一個默認爲8的外邊距，不一樣的網頁元素，內外邊距的默認值是不一樣的

內外邊距的清除：

<html>

    <head>
        <meta charset="utf-8">
        <title>盒子模型外邊距</title>
        <style>
          *{
              margin: 0;
              padding: 0;
          }
        </style>
    </head>
    <body>
    
     <div>
         123
     </div>
     
    </body>
</html>

相關標籤/搜索

每日一句

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