天天看點
傳回

深入了解CSS中盒子模型

CSS中盒子模型介紹#

  • 什麼是盒子？
  • 盒子是用來存儲物品，我們可以将盒子了解為酒盒，酒盒有什麼組成的呢？ 有酒可以喝、有填充物保護酒防止酒被摔壞、紙盒子。
  • 我們怎麼了解

    CSS

     中的盒子呢，

    CSS

     中盒子有什麼組成的呢？有内容、内邊距、邊框、外邊距。

  • CSS

     中盒子的主要屬性有

    5

     種如：

    width

     寬度、

    height

     高度、

    padding

     内邊距、

    border

     邊框、

    margin

     外邊距。

CSS中盒子模型實踐#

  • CSS

     中盒子模型實踐，給大家看看我們

    CSS

     中的盒子長什麼樣。
  • 代碼塊

Copy

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
    div {
       /*這裡的寬度指的就是盒子内容的寬度*/
      width: 100px;
       /*這裡的高度值的就是盒子内容的高度*/
      height: 100px;
      /*内邊距就是盒子裡面的内容到邊框的距離*/
      padding: 30px;
      /*這個就是指盒子的外邊框*/
      border: 1px solid red;
      /*這個就是指盒子的外邊距，盒子與盒子之間的距離*/
      margin: 20px;
    }
  </style>
</head>

<body>
  <div>
    微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰。
  </div>
</body>

</html>
  • 結果圖
深入了解CSS中盒子模型
  • 如何計算一個盒子的總寬度和總高度，筆者那寬度舉例：

    一個盒子的總寬度

     =

    盒子内容寬度

      +

    左右2邊内邊距

     +

    左右2邊邊框線

     。
深入了解CSS中盒子模型
  • 注意：一個盒子的高度一般情況下不設定高度，因為一個盒子的高度它應該是由其内容來決定的。

padding内邊距介紹#

  • padding

     内邊距的意思就是指的盒子中間的内容與邊框的這段距離。

  • padding

     内邊距分為

    4

     個方向，是以我們能夠設定或描述這

    4

     個方向的内邊距。

  • padding

     内邊距屬性值說明表：
屬性值 描述
padding-top 設定向上的内邊距的距離。
padding-bottom 設定向下的内邊的距距離。
padding-left 設定向左的内邊距的距離。
padding-right 設定向右的内邊距的距離。
padding 設定上下左右内邊距的距離，是上面的屬性值縮寫。

padding内邊距實踐#

  • 我們将

    div

     标簽設定内邊距，實踐内容如：将

    div

     标簽

    上

     邊内邊距設定為

    20px

     、

    下

    30px

    左

     邊邊距設定為

    40px

    右

    50px

     
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
    div {
       /*這裡的寬度指的就是盒子内容的寬度*/
      width: 100px;
       /*這裡的高度值的就是盒子内容的高度*/
      height: 100px;
      border: 1px solid red;
      padding-top: 20px;
      padding-bottom: 30px;
      padding-left: 40px;
      padding-right: 50px;
    }
  </style>
</head>

<body>
  <div>
    微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰。
  </div>
</body>

</html>
深入了解CSS中盒子模型

padding内邊距縮寫實踐#

  • 縮寫是有方向的可以同時表示四個方向，但是這個

    padding

     屬性的方向是有順序的，順序規則如：

    上

    右

    下

    左

  • padding

     屬性值有

    4

     個，接下來我們就一一試試看看會有什麼效果呢。
  • 我們給

    padding

     屬性設定

    1

     個值實踐。 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
    div {
       /*這裡的寬度指的就是盒子内容的寬度*/
      width: 100px;
       /*這裡的高度值的就是盒子内容的高度*/
      height: 100px;
      border: 1px solid red;
      padding: 20px;
    }
  </style>
</head>

<body>
  <div>
    微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰。
  </div>
</body>

</html>
深入了解CSS中盒子模型
  • 注意：假設我們給

    padding

     屬性值設定了

    1

     個值為：

    padding: 20px;

     表示

    上

    右

    下

    左

     、方向的内邊距都為

    20px

     像素。

  • padding

    2

     
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
    div {
       /*這裡的寬度指的就是盒子内容的寬度*/
      width: 100px;
       /*這裡的高度值的就是盒子内容的高度*/
      height: 100px;
      border: 1px solid red;
      padding: 20px 30px;
    }
  </style>
</head>

<body>
  <div>
    微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰。
  </div>
</body>

</html>
深入了解CSS中盒子模型

  • padding

    2

     個值如：

    padding: 20px 30px;

     表示内邊距的

    （上、下）

     為

    20px

     像素、

    （左、右）

    30px

  • padding

    3

     
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
    div {
       /*這裡的寬度指的就是盒子内容的寬度*/
      width: 100px;
       /*這裡的高度值的就是盒子内容的高度*/
      height: 100px;
      border: 1px solid red;
      padding: 20px 30px 40px;
    }
  </style>
</head>

<body>
  <div>
    微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰。
  </div>
</body>

</html>
深入了解CSS中盒子模型

  • padding

    3

    padding: 20px 30px 40px;

    上

    20px

    （左、右

     ）為

    30px

    下

    40px

  • padding

    4

     
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
    div {
       /*這裡的寬度指的就是盒子内容的寬度*/
      width: 100px;
       /*這裡的高度值的就是盒子内容的高度*/
      height: 100px;
      border: 1px solid red;
      padding: 20px 30px 40px 50px;
    }
  </style>
</head>

<body>
  <div>
    微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰。
  </div>
</body>

</html>
深入了解CSS中盒子模型

  • padding

    3

     個值如

    padding: 20px 30px 40px 50px;

    上

    20px

    右

    30px

    下

    40px

    左

    50px

margin外邊距介紹#

  • margin

     外邊距的意思就是指的盒子與盒子之間的距離。

  • margin

     外邊距分為

    4

    4

     個方向的外邊距。

  • margin

     外邊距屬性值說明表：
margin-top 設定向上的外邊距的距離。
margin-bottom 設定向下的外邊的距距離。
margin-left 設定向左的外邊距的距離。
margin-right 設定向右的外邊距的距離。
margin 設定上下左右外邊距的距離，是上面的屬性值縮寫。
auto 自動。

margin上下外邊距實踐#

  • class

     屬性值為

    .top

     元素設定上外邊距為

    20px

     像素并且将

    class

    .bottom

     設定下外邊距為

    20px

     
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
    .bottom{
      width: 100px;
      height: 100px;
      background-color: red;
      margin-bottom: 20px;
    }
    .top{
      width: 100px;
      height: 100px;
      background-color: slateblue;
      margin-top: 20px;
    }
  </style>
</head>

<body>
   <div class="bottom"></div>
   <div class="top"></div>
</body>

</html>

  • calss

    .bottom
深入了解CSS中盒子模型

  • calss

    .top
深入了解CSS中盒子模型
  • 注意：兩張圖有什麼差別呢，事實證明外邊距豎直方向的

    margin

     的屬性值不會疊加，它會取最大的屬性值，大家要明白哦。

margin左右外邊距實踐#

  • class

    .right

     元素設定右外邊距為

    20px

    class

    .left

     設定左外邊距為

    20px

     
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
    
     .left{
       background-color: slateblue;
       margin-left: 20px;
     }
     .right{
        background-color: red;
        margin-right: 20px;
     }
  </style>
</head>

<body>
  <span class="right">right</span>
  <span class="left">left</span>
</body>
</html>

  • calss

    .right
深入了解CSS中盒子模型

  • calss

    .left
深入了解CSS中盒子模型
  • 注意：兩張圖有什麼差別呢，事實證明外邊距水準線方向

    margin

     的屬性值會疊加。大家要明白哦。
  • 若想讓豎直方向的

    margin

     屬性值疊加外邊距的距離咱也是有辦法如：将要設定

    margin

     屬性的元素進行浮動即可，元素浮動之後它的

    margin

     屬性值就會疊加，若有讀者朋友不熟悉浮動的可以看看筆者之間釋出的CSS中如果實作元素浮動和清除浮動，看這篇文章就足夠了文章。 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
     .box{
       width: 110px;
       border: 2px solid red;
       overflow: hidden;
     }
     .bottom{
       width: 100px;
       height: 100px;
       background-color: slateblue;
       float: left;
       margin-bottom: 20px;
      
     }
     .top{
        width: 100px;
        height: 100px;
        background-color: darkblue;
        float: left;
        margin-top: 20px;
     }
  </style>
</head>

<body>
   <div class="box">
     <div class="bottom"></div>
     <div class="top"></div>
   </div>
</body>

</html>

  • calss

    .bottom
深入了解CSS中盒子模型

  • calss

    .top
深入了解CSS中盒子模型

margin外邊距縮寫實踐#

  • margin

    上

    右

    下

    左

  • margin

    4

  • margin

    1

     
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
     .box {
     /*這裡的寬度指的就是盒子内容的寬度*/
     width: 100px;
     /*這裡的高度值的就是盒子内容的高度*/
     height: 100px;
     background-color: red;
     margin: 20px;
     }
  </style>
</head>

<body>
   <div class="box"></div>
</body>

</html>
深入了解CSS中盒子模型

  • margin

    1

     個值為： 

    margin: 20px;

    上

    右

    下

    左

     、方向的外邊距都為

    20px

  • margin

    2

     
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
     .box {
     /*這裡的寬度指的就是盒子内容的寬度*/
     width: 100px;
     /*這裡的高度值的就是盒子内容的高度*/
     height: 100px;
     background-color: red;
     margin: 20px 30px;
     }
  </style>
</head>

<body>
   <div class="box"></div>
</body>

</html>
深入了解CSS中盒子模型
  • 注意：假設我們

    margin

    2

    margin: 20px 30px;

     表示外邊距的

    （上、下）

    20px

    （左、右）

    30px

  • margin

    3

     
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
     .box {
     /*這裡的寬度指的就是盒子内容的寬度*/
     width: 100px;
     /*這裡的高度值的就是盒子内容的高度*/
     height: 100px;
     background-color: red;
     margin: 20px 30px 40px;
     }
  </style>
</head>

<body>
   <div class="box"></div>
</body>

</html>
深入了解CSS中盒子模型

  • margin

    3

    margin: 20px 30px 40px;

    上

    20px

    （左、右

    30px

    下

    40px

  • margin

    4

     
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
     .box {
     /*這裡的寬度指的就是盒子内容的寬度*/
     width: 100px;
     /*這裡的高度值的就是盒子内容的高度*/
     height: 100px;
     background-color: red;
     margin: 20px 30px 40px 50px;
     }
  </style>
</head>

<body>
   <div class="box"></div>
</body>

</html>
深入了解CSS中盒子模型

  • margin

    4

    margin: 20px 30px 40px 50px;

    上

    20px

    右

    30px

    下

    40px

    左

    50px

margin屬性居中介紹#

  • margin

     屬性值設定為

    auto

     ，

    auto

     表示自動的意思，當左外邊距與右外邊距的值都是

    auto

     時那麼這個盒子就會水準居中。
  • 用

    margin

     屬性設定水準居中注意事項如：
  • 1、一定要給盒子設定固定的寬高度。
  • 2、隻有塊級元素才可以實作水準居中，行内元素不能夠實作水準居中。
  • 3、隻有标準文檔流中的盒子才可以使用

    margin

     屬性來實作水準居中。
  • 4、

    margin

     屬性是用來實作盒子的水準居中，而不是文本的水準居中。

margin屬性值為auto實踐#

  • 我們将使用

    margin

    auto

     實作盒子水準線左居中的實踐。 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
    
     .box{
        width: 100px;
        height: 100px;
        background-color: red;
         margin-left:auto;
     }
  </style>
</head>

<body>
   <div class="box">
   </div>
</body>

</html>
深入了解CSS中盒子模型

  • margin

    auto

     實作盒子水準線居中的實踐。 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
    
     .box{
        width: 100px;
        height: 100px;
        background-color: red;
        margin-left:auto;
        margin-right: auto;
     
     }
  </style>
</head>

<body>
   <div class="box">
   </div>
</body>

</html>
深入了解CSS中盒子模型
  • 注意：

    margin

    auto

     設定

    上下

     外邊距不起任何作用。 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
    
     .box{
        width: 100px;
        height: 100px;
        background-color: red;
        margin-bottom:auto;
        margin-top: auto;
     
     }
  </style>
</head>

<body>
   <div class="box">
   </div>
</body>

</html>
深入了解CSS中盒子模型

注意事項一#

  • 用實踐來證明為什麼：一定要給盒子設定固定的寬高度。 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
    
     .box{
   
        height: 100px;
        background-color: red;
        margin-left: auto;
        margin-right: auto;
     
     }
  </style>
</head>

<body>
   <div class="box">
   </div>
</body>

</html>
深入了解CSS中盒子模型
  • 注意：如果該元素沒有設定固定的寬度，那麼該元素會占據其父元素的

    100%

     寬度，是以不能夠實作水準線居中。

    注意事項二#

  • 用實踐來證明為什麼：隻有塊級元素才可以實作水準居中，行内元素不能夠實作水準居中。 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
    
     .box{
        width: 100px;
        height: 100px;
        background-color: red;
        margin-left: auto;
        margin-right: auto;
     
     }
  </style>
</head>

<body>
   <span class="box">微笑是最初的信仰
   </span>
</body>

</html>
深入了解CSS中盒子模型
  • 注意：因為行内元素不能設定寬度，是以無法實作水準線居中。

注意事項三#

  • 用實踐來證明為什麼：隻有标準文檔流中的盒子才可以使用

    margin

     
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
    
     .box{
        width: 100px;
        height: 100px;
        background-color: red;
        margin-left: auto;
        margin-right: auto;
        float: left;
     }
  </style>
</head>

<body>
    <div class="box">
    </div>
</body>

</html>
深入了解CSS中盒子模型
  • 注意：筆者給

    class

    .box

     設定了一個

    float: left;

     左浮動，浮動的元素已經脫離了标準文檔流，是以無法實作水準線居中。

注意事項四#

  • 用實踐來證明為什麼：

    margin

     屬性是用來實作盒子的水準線居中，而不是盒子的内容文本水準線居中。 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
    
     .box{
        width: 200px;
        height: 100px;
        background-color: red;
        margin-left: auto;
        margin-right: auto;
     }
  </style>
</head>

<body>
   <div class="box">
     微笑是最初的信仰
   </div>
</body>

</html>
深入了解CSS中盒子模型

注意事項五#

  • 如果想讓文本居中怎麼辦呢，使用

    text-align

     屬性并且屬性值為

    center

     才可以實作文本水準線居中。 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
    
     .box{
        width: 200px;
        height: 100px;
        background-color: red;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
     }
  </style>
</head>

<body>
   <div class="box">
     微笑是最初的信仰
   </div>
</body>

</html>
深入了解CSS中盒子模型

作者： 微笑是最初的信仰

出處：https://www.cnblogs.com/lq0001/p/11992092.html

上一篇: 利用javascript和WebGL繪制地球 【翻譯】
下一篇: 利用link标簽的disabed屬性大面積的對其他标簽元素的CSS樣式進行替換操作