盒子模型

魏明發(fā)布于2019-08-02 15:58 / 2285人閱讀

摘要：是外邊距，是一個(gè)盒子與另外一個(gè)盒子的距離沒有浮動(dòng)的情況下上下疊加，取大值。有浮動(dòng)的情況下，兩個(gè)外邊距相加例如第一個(gè)盒子的樣式第二個(gè)盒子的樣式如上圖所示，理論上上面的和下面的應(yīng)該相加等于，但是這里注意了，取較大的值作為這個(gè)盒子的距離。

padding
padding: 10px; 表示上下左右的內(nèi)邊距都是10像素
padding: 0 10px; 表示左右的內(nèi)邊距為10像素
padding: 5px 6px 10px; 5 是上內(nèi)邊距像素 6 是左右內(nèi)邊距像素， 10 是下邊距像素。
padding: 4px 5px 6px 10px; 4 是上邊距 5右邊距 6 是下邊距，10 是左邊距順時(shí)針旋轉(zhuǎn) 但是內(nèi)邊距像素值不可以為負(fù)數(shù)，負(fù)數(shù)無效。

margin
margin:是外邊距，是一個(gè)盒子與另外一個(gè)盒子的距離
margin:沒有浮動(dòng)的情況下上下疊加，取大值。有浮動(dòng)的情況下，兩個(gè)外邊距相加

例如：

 第一個(gè)盒子的樣式
    .div01 {
     width:300px;
     height:100px;
     background-color:gray;
     margin:20px;
   }

 第二個(gè)盒子的樣式
   .div02 {
    width:300px;
    height:100px;
    background-color:red;
    margin:100px 0px 0px 20px;
  }

如上圖所示，理論上上面的margin 20px 和下面的margin 100 應(yīng)該相加等于120，但是這里注意了，取100（較大的值）作為這2個(gè)盒子的距離。

 第一個(gè)盒子的樣式
    .div01 {
     width:300px;
     height:100px;
     background-color:gray;
     margin:20px;
   }

 第二個(gè)盒子的樣式
   .div02 {
    width:300px;
    height:100px;
    background-color:red;
    margin:100px 0px 0px 20px;
    float:left; -- 加入浮動(dòng)
  }

如果上圖所示 div02加入的浮動(dòng) float:left; 外邊距不是取大值，而是相加

思考如果margin為負(fù)數(shù)生效嗎？
例如：

   .div01 {
     width:300px;
     height:100px;
     background-color:gray;
     padding:0px;
     margin-bottom:150px; -- 下邊距為150px
   }

  .div02 {
    width:300px;
    height:100px;
    background-color:red;
    padding:0px;
    margin-top:-50px; -- 上邊距為-50
  }

如圖所示 margin為負(fù)數(shù)是生效的

如何在頁面上嵌入圖片
html

1，首先清除頁面的內(nèi)外間距

*{
    margin:0;
     padding:0;
 }

/*
  1,1000px 是你想設(shè)置盒子的寬度 
  2，高度不寫是因?yàn)閳D片會(huì)撐起高度
  margin: 0 auto; 主要用于圖片居中
  浮動(dòng)元素的父級(jí)加上 overflow:hidden 是為了處理內(nèi)容高度的問題
 */
.wrap{
    width:1000px;
    margin: 0 auto;
    overflow:hidden;
 }

 /* 
  1，通過ps繪圖工具測(cè)量，圖片的寬度為210px
  2，如果你想讓內(nèi)容浮動(dòng)，就讓裝東西的容器浮動(dòng)就可以了，浮動(dòng)也是為了讓內(nèi)容橫向向左排列
  
  其實(shí)圖片實(shí)際的間距是40，但是靠邊的那張圖片只有20px，所以就
  外間距（左右外間距）20px
  */
 .wrap dl{
    width:210px;
    float:left;
    margin:0 20px;
    
 }

 /*
  用ps測(cè)量圖片與問題之間的距離 
  */
 .wrap dt {
    margin-bottom:19px;
 }

 /*
   1，文字的行高是固定的，不管你是如何的放大字體，測(cè)量出來的
   都是一樣的
   2，吸管吸取文字顏色的時(shí)候，一定要挑選文字顏色最深的那個(gè)
   3，文字類型的樣式是可以繼承的 
  */
.wrap dl dd {
    font-size:12px;
    line-height:22px;
    color:#525252;
 }

在浮動(dòng)元素的父標(biāo)簽設(shè)置overflow:hidden; 就可以看到高度，雖然沒有設(shè)置高度，如下圖：

頁面嵌入圖片和文字的整體效果圖：