2. 程式人生 > >（負值）-margin在頁面佈局中的應用

（負值）-margin在頁面佈局中的應用

阿新 • • 發佈：2018-11-19

主要有以下幾種情況：

一、左右列固定，中間列自適應佈局 ；

此例適用於左右欄寬度固定，中間欄寬度自適應的佈局。由於網頁的主體部分一般在中間，很多網頁都需要中間列優先載入，而這種佈局剛好滿足此需求。

二、去除列表右邊框 ；

專案中經常會使用浮動列表展示資訊，為了美觀通常為每個列表之間設定一定的間距（margin-right）,當父元素的寬度固定式，每一行的最右端的li元素的右邊距就多餘了，去除的方法通常是為最右端的li新增class，設定margin-right:0; 這種方法需要動態判斷為哪些li元素新增class，麻煩！！！利用負margin就可以實現這種效果；

三、負邊距+定位：水平垂直居中 ；

使用絕對定位將div定位到body的中心，然後使用負margin（content寬高的一半），將div的中心拉回到body的中心，已到達水平垂直居中的效果。

四、去除列表最後一個li元素的border-bottom；

列表中我們經常會新增border-bottom值，最後一個li的border-bottom往往會與外邊框重合，視覺上不雅觀，往往要移除。

五、多列等高 ；

此例關鍵是給每個框設定大的底部內邊距，然後用數值相似的負外邊距消除這個高度。這會導致每一列溢位容器元素，如果把外包容器的overflow屬性設為hidden，列就在最高點被裁切。

有關margin的原理可以看看這篇文章：

http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812

有關margin負值的幾個案例可以參考：http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html

相關推薦

（負值）-margin在頁面佈局中的應用

主要有以下幾種情況： 一、左右列固定，中間列自適應佈局 ； 此例適用於左右欄寬度固定，中間欄寬度自適應的佈局。由於網頁的主體部分一般在中間，很多網頁都需要中間列優先載入，而這種佈局剛好滿足此需求。 二、去除列表右邊框 ； 專案中經常會使用浮動列表展示資訊，為了美觀通常為每個列表之間設

初識DOJO（2）DOJO頁面佈局教程例子

學習dojo，首先都會學習到如何對dojo的頁面進行佈局。dojo的頁面是有很多個div組成的，主要需要引入元件是dijit.layout。 dijit.layout在dojo的線上API中有十分詳細的介紹，國內網站上也能搜尋到大量的佈局教程，但是大多都是針對dojo1.6

關於馬爾科夫隨機場（MRF）在影象分割中應用的個人理解

首先明確幾個基本概念（個人理解）： 先驗概率： 基於歷史經驗得到的當前事件發生的概率 後驗概率： 根據資料或證據得到的事件發生的概率 （由因到果） 似然概率： 已知事件發生的概率下資料或證據發生的概率 （由果到因） 影象分割和目標識別都可以看成一個影象中各個畫素點做l

（轉）基於MVC4+EasyUI的Web開發框架經驗總結（6）--在頁面中應用下拉列表的處理

ica new web開發 don ext images 如果 bob 獲取 http://www.cnblogs.com/wuhuacong/p/3840321.html 在很多Web界面中，我們都可以看到很多下拉列表的元素，有些是固定的，有些是動態的；有些是字典內容，

基於MVC4+EasyUI的Web開發框架經驗總結（6）--在頁面中應用下拉列表的處理

在很多Web介面中，我們都可以看到很多下拉列表的元素，有些是固定的，有些是動態的；有些是字典內容，有些是其他表裡面的名稱欄位；有時候引用的是外來鍵ID，有時候引用的是名稱文字內容；正確快速使用下拉列表的處理，可以提高我們程式介面的美觀性和友好型，本文主要介紹在我的Web開發框架以及相關的擴充套件Web應用中用

卷積神經網路（CNN）在語音識別中的應用

卷積神經網路（CNN）在語音識別中的應用 作者：侯藝馨 前言 總結目前語音識別的發展現狀，dnn、rnn/lstm和cnn算是語音識別中幾個比較主流的方向。2012年，微軟鄧力和俞棟老師將前饋神經網路FFDNN（Feed Forward Deep Neural Network）引入到聲學模

卷積神經網絡（CNN）在語音識別中的應用

現狀 each htm 介紹 產品 都在 color pcnn tmp 卷積神經網絡（CNN）在語音識別中的應用作者：侯藝馨前言總結目前語音識別的發展現狀，dnn、rnn/lstm和cnn算是語音識別中幾個比較主流的方向。2012年，微軟鄧力和俞棟老師將前饋神經網絡FFDN

Revit二次開發高階應用（二）——怎樣在Revit中使用多執行緒

在Revit中完全可以使用多執行緒，只是需要滿足一定的規則：不改變Revit的Document文件的工作都可以線上程中完成，改變Document文件的工作都需要在主執行緒中完成。 如下：不改變文件，只是在執行緒裡建立輔助的線，執行之後，絲毫不錯。 namespace RevitUseTh

Java8中 stream，filter 等功能代替for迴圈（及）isPresent( ) 和 ifPresent() 簡單應用

直接上程式碼，比較實在。 物件A public Class A{ private Long id; private String userName; ....省略get和set方法 } 在List<A>中，查詢 userNa

Android 應用開發（50）---GridLayout(網格佈局)

GridLayout(網格佈局) 今天要介紹的佈局是Android 4.0以後引入的一個新的佈局,和前面所學的TableLayout(表格佈局) 有點類似,不過他有很多前者沒有的東西,也更加好用, 可以自己設定佈局中元件的排列方式 可以自定義網格佈局有多少行,多少

Deeplearning4j 實戰（3）：簡介Nd4j中JavaCPP技術的應用

Deeplearning4j中張量的計算是由一個叫Nd4j的庫來完成的。它類似於python中的numpy，對高維向量的計算有比較好的支援。並且，為了提高運算的效能，很多計算任務是通過呼叫C++來完成的。具體來說，底層C++執行張量計算可以選擇的backend有：BLAS，OpenBLAS， Int

Kubernetes（k8s）中文文件 管理應用： 在生產環境中使用Pods和容器_Kubernetes中文社群

譯者：張鑫 永久性儲存 容器中的檔案系統會隨著容器的停止而消失；如果容器重啟或出錯停止，則會使得容器檔案中的資料丟失，而且容器即使重新執行也會忘記之前的資料和狀態。如果需要比容器的生命更為長久的儲存方案，我們需要使用資料卷。這個需求對於有狀態服務更為重要，例如 資料庫，健－值儲存等。 舉例來說，Re

Machine Learning第七講SVM -- （三）SVM在實踐中的應用

Using SVM in Practice(SVM在實踐中的應用) 在實際應用中，並不推薦 自己寫SVM的演算法，可以使用別人已經寫好的，那我們需要做什麼呢？ 如下圖： 對於核函式的選型，我們一般會選擇線性核函式和高斯核函式。  一般情況下，我們需要自己提供核函式，必

java中byte（負值）作&運算時0xff的作用

1.問題由來 專案中遇到一個將byte位元組流轉換成有符號整數和無符號整數的，發現： byte aByte = ByteBuffer.get();----對應的二進位制各位 如果byte為正數：int

自然語言處理技術（NLP）在推薦系統中的應用

作者： 張相於，58集團演算法架構師，轉轉搜尋推薦部負責人，負責搜尋、推薦以及演算法相關工作。多年來主要從事推薦系統以及機器學習，也做過計算廣告、反作弊等相關工作，並熱衷於探索大資料和機器學習技術在其他領域的應用實踐。 責編：何永燦（[email 

卷積神經網路（CNN）在無人駕駛中的應用

無人駕駛的感知部分作為計算機視覺的領域範圍，也不可避免地成為CNN發揮作用的舞臺。本文是無人駕駛技術系列的第八篇，深入介紹CNN（卷積神經網路）在無人駕駛3D感知與物體檢測中的應用。 CNN簡介 卷積神經網路（Convolutional Neural Network，CNN）是一種適合使用在連續值輸入訊號上

最大似然估計 （MLE）與 最大後驗概率（MAP）在機器學習中的應用

最大似然估計 MLE 給定一堆資料，假如我們知道它是從某一種分佈中隨機取出來的，可是我們並不知道這個分佈具體的參，即“模型已定，引數未知”。 例如，對於線性迴歸，我們假定樣本是服從正態分佈，但是不知道均值和方差；或者對於邏輯迴歸，我們假定樣本是服從二項分佈，但是不知道

淺談Scrum（二）-- EduSoho在Scrum中的應用及擴充套件

上一次我們介紹了Scrum的背景，工具及大致流程（點選檢視）。本次我們對估點及燃盡圖進行詳細講解。 估點 具體操作為，先指定一個使用者故事作為基準點數(1點，半點，或2點，一般不建議超過2點)。其他任務，跟這個使用者故事作比較，進行評估。 為什麼不按時間來估？

JAVA中（分組）正則表示式的應用

分組表示式的應用 分組語法 (?\exp) 匹配exp,並捕獲文字到名稱為name的組裡，也可以寫成(?’name’exp) demo public static void main(String[] args){

mean average precision（MAP）在計算機視覺中是如何計算和應用的

在影象中，尤其是分類問題中應用AP，是一種評價ranking方式好不好的指標：舉例來說，我有一個兩類分類問題，分別5個樣本，如果這個分類器效能達到完美的話，ranking結果應該是+1，+1，+1，+1，+1，-1，-1，-1，-1，-1.但是分類器預測的label，和實際的score肯定不會這麼完美。按照從