web.jpeg

我們看到的網(wǎng)頁是由有一個盒子模型一個盒子模型組成的,那么什么盒子模型，盒子模型包括哪些呢?
我們通常使用的 div nav section sapn都可以認為是盒模型

盒模型的組成

• 每一個盒模型都包含 一下幾個內(nèi)容
  • width：寬度,在CSS中是指內(nèi)容的寬度，并不是盒子的寬度
  • height：高度，和寬度一樣的原理
  • padding:內(nèi)邊距，內(nèi)容和邊框之間的距離
  • border：變框
  • margin:外邊距 盒子和盒子之間的距離

width.png

image.png

1. border邊框?qū)傩?/h4>

從上面的圖中我們可以知道 邊框是真實存在的 ，那么邊框有哪些屬性？

• border-width 邊框的寬度
• border-style邊框的樣式
• border-color 邊框的顏色

 div{
            width: 200px;
            height: 200px;
            background-color: aliceblue;
            padding: 10px;
            /* 邊框?qū)挾?*/
            border-width: 1px;
            /* 邊框顏色 */
            border-color: blue;
            /* 邊框樣式 solid實線 dash虛線 dotted點線 double 雙實線 */
            border-style: solid;
        }

綜合屬性: border: 1px solid orange;

image.png

2. padding內(nèi)邊距（內(nèi)容區(qū)域和邊框之間的距離）

• padding是有方向的
  • padding-left: ,padding-top:,padding-right: , padding-bottom: ,等 四個方向
  • 復合屬性

    • 按照順時針排序，上，右，下，左

    • padding:30px 20px 40px 100px;

    • padding: 20px 30px 40px; 表示上是20 ，左右是30，下是40
      

      image.png

    • padding: 30px 40px; 表示上下是30 左右是40

    • 小屬性可以層疊大屬性

      • padding: 20px;
      • padding-left: 30px;
      • 上面的 左邊的屬性會變成30px

注意:如果盒子沒有設(shè)置寬度和高度，那么padding是不起作用的

image.png

  <style>
        *{
            padding: 0;
            margin: 0;
        }
        .demo{
            width: 380px;
            height: 263px;
            border: 1px solid #cccccc;
            margin: 100px;
            padding: 20px 15px 0;

        }
        .demo h4{
            color: #202026;
            font-size: 22px;
            border-bottom: 1px solid #cccccc;
            padding-bottom: 5px;
        }
        .demo ul li{
            height: 38px;
            line-height: 38px;
            /* 取出小圓點 */
            list-style: none;
            border-bottom: 1px dashed #cccccc;
            text-indent: 2em;
            
            
        }
        .demo li a {
            color: #333333;
            text-decoration: none;
        }
        .demo ul{
            margin-top: 12px;
        }

    </style>

image.png

image.png

3.margin外邊距(盒子與盒子之間的距離)

• 設(shè)置margin的 左邊和上邊距 自身位置發(fā)生變化， 右邊距和下邊距 相鄰盒子發(fā)生變化

  <style>
        div{
           width: 200px;
           height: 200px;
           border: 10px solid yellowgreen; 
           margin-left: 100px;
           margin-top: 100px; 
           /* margin 左邊和上邊距 自身位置發(fā)生變化， 右邊距和下邊距 相鄰盒子發(fā)生變化 */
        }
    </style>

image.png

• 設(shè)置margin的auto屬性, 一般之設(shè)置水平方向的margin，
  如果指定 左或者右外邊距 則設(shè)置左或者有邊距設(shè)置最大

 div{
           width: 200px;
           height: 200px;
           border: 10px solid yellowgreen; 
       
           /* 
            margin auto自動發(fā)生變化 一般之設(shè)置水平方向的margin，
            如果指定 左或者右外邊距 則設(shè)置左或者有邊距設(shè)置最大
            */
            margin-left: auto;
     
       
        }

image.png

• 如果設(shè)置margin的左右邊距都是auto那么盒子是居中的
• margin: 100px auto;
• 注意:必須是塊級元素,盒子指定了寬度

 <style>
        div{
           width: 200px;
           height: 200px;
           border: 10px solid yellowgreen; 
            /* 
            垂直方向 設(shè)置外邊距auto ,則外邊距默認是 0；
             */
             margin: 100px auto;
        }
    </style>

image.png

margin的合并現(xiàn)象(盒子與盒子之間是兄弟關(guān)系)

• 垂直方向上的 盒子與盒子之間的距離 取 最大值

image.png

image.png

• margin塌陷現(xiàn)象:兩個盒子是包含關(guān)系，如果讓子盒子在父盒子之內(nèi)向下平移

  • 在給盒子設(shè)置margin-top(這里有一個bug，如果父盒子沒有邊框，那么將來給子盒子設(shè)置以后父盒子也會隨著子盒子一起向下掉)
    • 解決方式
      • 給父盒子添加邊框 border
      • 給父盒子設(shè)置屬性：overflow(溢出),hidden(隱藏)

• 盒子居中對齊

  • 1.必須是塊級元素
  • 2.盒子必須指定了寬度
  • 3. 設(shè)置 左右的外邊距是 auto

• 注意：行內(nèi)元素的margin上下不起作用的