盒子模型

時間 2019-12-09

標籤盒子模型欄目 CSS 简体版

原文原文鏈接

padding
padding: 10px; 表示上下左右的內邊距都是10像素
padding: 0 10px; 表示左右的內邊距爲10像素
padding: 5px 6px 10px; 5 是上內邊距像素 6 是左右內邊距像素， 10 是下邊距像素。
padding: 4px 5px 6px 10px; 4 是上邊距 5右邊距 6 是下邊距，10 是左邊距順時針旋轉可是內邊距像素值不能夠爲負數，負數無效。css

margin
margin:是外邊距，是一個盒子與另一個盒子的距離
margin:沒有浮動的狀況下上下疊加，取大值。有浮動的狀況下，兩個外邊距相加html

例如：工具

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

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

如上圖所示，理論上上面的margin 20px 和下面的margin 100 應該相加等於120，可是這裏注意了，取100（較大的值）做爲這2個盒子的距離。字體

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

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

若是上圖所示 div02加入的浮動 float:left; 外邊距不是取大值，而是相加spa

思考若是margin爲負數生效嗎？
例如：code

.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爲負數是生效的htm

如何在頁面上嵌入圖片
html繼承

<link rel="stylesheet" href="css/demo.css" type="text/css" />
</head>
<body>
  <div class="wrap">
    <dl>
       <dt><img src="images/b01.jpg"/></dt>
       <dd>英國倫敦</dd>
    </dl>
     <dl>
       <dt><img src="images/b02.jpg"/></dt>
       <dd>印度海濱</dd>
    </dl>
     <dl>
       <dt><img src="images/b03.jpg"/></dt>
       <dd>世界名車</dd>
    </dl>
     <dl>
       <dt><img src="images/b04.jpg"/></dt>
       <dd>世界新款</dd>
    </dl>
  </div>
</body>

1，首先清除頁面的內外間距圖片

*{
    margin:0;
     padding:0;
 }

/*
  1,1000px 是你想設置盒子的寬度 
  2，高度不寫是由於圖片會撐起高度
  margin: 0 auto; 主要用於圖片居中
  浮動元素的父級加上 overflow:hidden 是爲了處理內容高度的問題
 */
.wrap{
    width:1000px;
    margin: 0 auto;
    overflow:hidden;
 }

 /* 
  1，經過ps繪圖工具測量，圖片的寬度爲210px
  2，若是你想讓內容浮動，就讓裝東西的容器浮動就能夠了，浮動也是爲了讓內容橫向向左排列
  
  其實圖片實際的間距是40，可是靠邊的那張圖片只有20px，因此就
  外間距（左右外間距）20px
  */
 .wrap dl{
    width:210px;
    float:left;
    margin:0 20px;
    
 }

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

 /*
   1，文字的行高是固定的，無論你是如何的放大字體，測量出來的
   都是同樣的
   2，吸管吸收文字顏色的時候，必定要挑選文字顏色最深的那個
   3，文字類型的樣式是能夠繼承的 
  */
.wrap dl dd {
    font-size:12px;
    line-height:22px;
    color:#525252;
 }

在浮動元素的父標籤設置overflow:hidden; 就能夠看到高度，雖然沒有設置高度，以下圖：it

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