盒子模型

BigTomato 發布于2019-08-29 13:53 / 3234人閱讀

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

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

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

例如：

 第一個盒子的樣式
    .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; 外邊距不是取大值，而是相加

思考如果margin為負數生效嗎？
例如：

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

如何在頁面上嵌入圖片
html

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; 就可以看到高度，雖然沒有設置高度，如下圖：

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

GPU云服務器云服務器盒子模型比價盒子盒子比價電視盒子

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112773.html

盒子模型的理解

摘要：盒子模型就是在網頁設計中經常用到的技術所使用的一種思維模型。盒子模型是中一個重要的概念，理解了盒子模型才能更好的排版。標準盒子模型從上圖可以看到標準盒子模型的范圍包括，并且部分不包含其他部分。概述網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)，CSS盒子模型都具備這些屬性，也主要是這些屬性。這些屬性我們可以把它...

xiangzhihong 2019-08-30 12:49 評論0 收藏0
盒子模型的理解

摘要：盒子模型就是在網頁設計中經常用到的技術所使用的一種思維模型。盒子模型是中一個重要的概念，理解了盒子模型才能更好的排版。標準盒子模型從上圖可以看到標準盒子模型的范圍包括，并且部分不包含其他部分。概述網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)，CSS盒子模型都具備這些屬性，也主要是這些屬性。這些屬性我們可以把它...

myshell 2019-08-01 15:05 評論0 收藏0
小白都能讀懂的 Cell 模型：一個被施展了魔法的盒子

摘要：為了讓大家更好的理解公鏈的模型，我們為大家帶來兩期小白都能讀懂的模型文章。該篇是小白都能讀懂的模型系列文章之一秘猿科技區塊鏈小課堂第期只能存放數字的盒子我們先從區塊鏈鼻祖說起。設計一條好的底層公鏈，必須從技術角度、經濟角度、以及共識角度進行全方位的考量。我們花了 4 期（第 16/17/18/19 期）向大家解釋了底層公鏈 CKB 技術實現中的關鍵點之一：Cell 模型。為了讓大家更...

syoya 2019-06-27 19:20 評論0 收藏0
【前端】CSS盒子模型

摘要：盒子模型及更早的版本使用的是盒模型。盒子模型組成為。盒子模型盒子模型的盒子模型的意味著盒子的和的大小是上述屬性相加的最大總和。標準盒子模型盒子模型的盒子模型的盒子模型大小計算就簡單多，設置的和就是內容大小。盒子模型 IE5.5及更早的版本使用的是IE盒模型。IE6及其以上的版本在標準兼容模式下使用的是W3C的盒模型標準。盒子模型組成為：margin、border、padding、...

Keagan 2019-08-30 15:55 評論0 收藏0
「前端早讀君」css進階之徹底理解視覺格式化模型

摘要：視覺格式化模型是用來處理和在視覺媒體上顯示文檔時使用的計算規則。匿名塊盒子在某些情況下進行視覺格式化時，需要添加一些增補性的盒子，這些盒子不能用選擇符選中，因此稱為匿名盒子。因此最好不要將其用于正式項目。今日勵志不論你在什么時候開始，重要的是開始之后不要停止。前言對于部分前端工程師來講，有時候CSS令他們很頭疼，明明設置了某個樣式，但是布局就是不起作用。 showImg(htt...

Eidesen 2019-08-23 14:25 評論0 收藏0