深入瞭解CSS中盒子模型

CSS中盒子模型介紹

什麼是盒子？
盒子是用來儲存物品，我們可以將盒子理解為酒盒，酒盒有什麼組成的呢？有酒可以喝、有填充物保護酒防止酒被摔壞、紙盒子。
我們怎麼理解CSS中的盒子呢，CSS中盒子有什麼組成的呢？有內容、內邊距、邊框、外邊距。
CSS中盒子的主要屬性有5種如：width寬度、height高度、padding內邊距、border邊框、margin外邊距。

CSS中盒子模型實踐

CSS中盒子模型實踐，給大家看看我們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>
    div {
       /*這裡的寬度指的就是盒子內容的寬度*/
      width: 100px;
       /*這裡的高度值的就是盒子內容的高度*/
      height: 100px;
      /*內邊距就是盒子裡面的內容到邊框的距離*/
      padding: 30px;
      /*這個就是指盒子的外邊框*/
      border: 1px solid red;
      /*這個就是指盒子的外邊距，盒子與盒子之間的距離*/
      margin: 20px;
    }
  </style>
</head>

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

</html>

結果圖

如何計算一個盒子的總寬度和總高度，筆者那寬度舉例：一個盒子的總寬度=盒子內容寬度 +左右2邊內邊距+左右2邊邊框線。

注意：一個盒子的高度一般情況下不設定高度，因為一個盒子的高度它應該是由其內容來決定的。

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>

結果圖

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>

結果圖

注意：假設我們給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>

結果圖

注意：假設我們給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>

結果圖

注意：假設我們給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>

結果圖

注意：假設我們給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結果圖

calss屬性值為.top結果圖

注意：兩張圖有什麼區別呢，事實證明外邊距豎直方向的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結果圖

calss屬性值為.left結果圖

注意：兩張圖有什麼區別呢，事實證明外邊距水平線方向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結果圖

calss屬性值為.top結果圖

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>

結果圖

注意：假設我們給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>

結果圖

注意：假設我們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>

結果圖

注意：假設我們給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>

結果圖

注意：假設我們給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>

結果圖

我們將使用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>

結果圖

注意：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>

結果圖

注意事項一

用實踐來證明為什麼：一定要給盒子設定固定的寬高度。
程式碼塊

<!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>

結果圖

注意：如果該元素沒有設定固定的寬度，那麼該元素會佔據其父元素的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>

結果圖

注意：因為行內元素不能設定寬度，所以無法實現水平線居中。

注意事項三

用實踐來證明為什麼：只有標準文件流中的盒子才可以使用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>

結果圖

注意：筆者給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>

結果圖

注意事項五

如果想讓文字居中怎麼辦呢，使用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中盒子模型

CSS中盒子模型介紹什麼是盒子？盒子是用來儲存物品，我們可以將盒子理解為酒盒，酒盒有什麼組成的呢？有酒可以喝、有填充物保護酒防止酒被摔壞、紙盒子。我們怎麼理解CSS中的盒子呢，CSS中盒子有什麼組成的呢？有內容、內邊距、邊框、外邊距。 CSS中盒子的主要屬性有5種如：width寬度、height高度

CSS中盒子模型的真實寬高怎麼計算

盒子一共有四個屬性：分別為外邊距（margin)、邊框（border)、內邊距（padding)、內容（content). 關係如下圖所示：而我們平常設定盒子的寬和高往往是指的內容的寬和高 div{ width:200px; height:18px; }

內容(content)、填充(padding)、邊框(border)、邊界(margin)：CSS中盒子模型有何區別？

什麼是CSS的盒子模式呢？為什麼叫它是盒子？先說說我們在網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)，CSS盒子模式都具備這些屬性。一個盒子模型由 content(內容)、border(邊

CSS中盒子模型的總結

所謂盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子，也就是一個裝內容的容器。每個矩形都由元素的內容、內邊距（padding）、邊框（border）和外邊距（margin）組成。內邊距（padding）：內容與邊框之間的距離外邊距（margin）: 盒子與盒

CSS之盒子模型

12px overflow 都是 padding ash ted markdown style 文字行高瀏覽器默認文字大小：16px 行高是==基線與基線==之間的距離行高=文字大小+上下邊距行高的單位單位文字大小值 px 20px 20px

CSS的盒子模型有哪些，區別是什麽

post 分享 clas src ont bubuko 模型 content 圖片 1）盒模型：內容(content)、填充(padding)、邊界(margin)、邊框(border) 2）有兩種， IE 盒子模型、標準 W3C 盒子模型；IE的content部分

JavaScript 深入瞭解物件中的屬性

轉載：JavaScript 深入瞭解物件中的屬性 JavaScript 深入瞭解物件中的屬性　　本篇主要介紹JS中物件的屬性，包括：屬性的分類、訪問方式、檢測屬性、遍歷屬性以及屬性特性等內容。目錄 1. 介紹：描述屬性的命名方式、查詢路徑以及分類 2. 屬

前端-CSS-6-盒子模型

上面的佈局寬度div{ width: 200px; height: 200px; border: 10px solid red; padding: 20px; } ----

深入理解CSS中的層疊上下文和層疊順序

零、世間的道理都是想通的在這個世界上，凡事都有個先後順序，凡物都有個論資排輩。比方說食堂排隊打飯，對吧，講求先到先得，總不可能一擁而上。再比如說話語權，老婆的話永遠是對的，領導的話永遠是對的。在CSS屆，也是如此。只是，一般情況下，大家歌舞昇平，看不出什麼差異，即所謂的眾生平等。但是，當

#Java乾貨分享：一篇文章讓你深入瞭解Java中的包和介面

很多新手程式設計師對於Java中兩個具創新性的特徵————包與介面不是非常清楚，所以我特意發了這篇文章來闡述什麼是包，什麼是介面。包（package）是多個類的容器，它們用於保持類的名稱空間相互隔離。如果有想學習java的程式設計師，可來我們的java學習扣qun：79979，2590免

深入學習keras中Sequential模型及方法

Sequential 序貫模型　　序貫模型是函式式模型的簡略版，為最簡單的線性、從頭到尾的結構順序，不分叉，是多個網路層的線性堆疊。　　Keras實現了很多層，包括core核心層，Convolution卷積層、Pooling池化層等非常豐富有趣的網路結構。我們可以通過將層的列表傳遞給Sequential

Java——深入瞭解Java中的迭代器

Java集合框架的集合類，我們有時候稱之為容器。容器的種類有很多種，比如ArrayList、LinkedList、HashSet...，每種容器都有自己的特點，ArrayList底層維護的是一個數組；LinkedList是連結串列結構的；HashSet依賴的是雜湊表，每種容器都有自己特有的資料結構。

深入瞭解幾種IO模型（阻塞非阻塞，同步非同步）

一般來說，Linux下系統IO主要就是通過以下幾個函式open(),close(),read(),write(),send(),recv(),lseek()，今天就以recv()為例來介紹下IO模型中的同步非同步，阻塞非阻塞的區別。先說阻塞與非阻塞的區別，recv()函式預設

簡述對CSS的盒子模型理解？

CSS盒子模型也叫做框模型，具備內容(content)、填充(padding)、邊框(border)、邊界(margin)這些屬性。在CSS中，每一個元素都被視為一個框，而每個框都有三個屬性： border:元素的邊框（可能不可見），用於將框的邊緣與其他框分

深入瞭解CSS字型度量，行高和vertical-align

本文英文出處:http: //iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align 著作權歸作者所有。轉載自https: //www.w3cplus.com/css/css-font-metrics-l

深入理解css中position屬性及z-index屬性

在網頁設計中，position屬性的使用是非常重要的。有時如果不能認識清楚這個屬性，將會給我們帶來很多意想不到的困難。　　position屬性共有四種不同的定位方法，分別是static、fixed、relative、absolute,sticky。最後將會介紹和positio

【CSS】盒子模型

一、什麼是CSS？ CSS（Cascading Style Sheet）：層疊樣式表是將網頁的內容與樣式進行分離的一種語言，也就是在aspx或html中設計網頁的內容，在CSS中設定網頁的樣式

深入瞭解JavaScript 中的For迴圈之詳解

轉載地址：https://segmentfault.com/a/1190000017569850 尊重原創正文: 在程式碼示例中我會用到es6中的語言，如果你還不是很瞭解，你可以看看阮老師的es6.(= =我也是一點一點跟著看的。) 1.map 先說一下最常用的map.利用ma

HTML中盒子模型上下左右(水平和垂直方向)都居中

有兩種方式：直接上程式碼：使用定位對div元素進行水平垂直居中，效果如下：第一種： <style type="text/css">*{margin:0;padding:0;}.box{width:200px;height:200px;background:r

解決在網頁前段開發中盒子模型的寬度包含padding和border的問題

在網頁前段開發中，由於各大瀏覽器廠商核心技術不一樣，出現了瀏覽器相容性的問題，經常會出現在盒子模型中包含padding和border的問題，遇到這樣的問題我們該如何解決呢？首先，我們先看一下標準的盒子模型：盒子模型由四部分組成：content

深入瞭解CSS中盒子模型

CSS中盒子模型介紹

CSS中盒子模型實踐

padding內邊距介紹

padding內邊距實踐

padding內邊距縮寫實踐

margin外邊距介紹

margin上下外邊距實踐

margin左右外邊距實踐

margin外邊距縮寫實踐

margin屬性居中介紹

margin屬性值為auto實踐

注意事項一

注意事項二

注意事項三

注意事項四

注意事項五

相關推薦