css佈局之負margin妙用及其他實現-css教學-PHP中文網

首頁

web前端

css教學

css佈局之負margin妙用及其他實現

高洛峰

Feb 16, 2017 pm 01:32 PM

cssmargin佈局

相信大家在專案的開發上都曾經遇過這樣的需求，一行放X（X>1）個區塊且相鄰區塊之間的間距相同。

css佈局之負margin妙用及其他實現

大概就是上面這個樣子，下面介紹幾種實現的方式。

1.負margin大法

設定好元素的寬度和留白佔滿父級的寬度，然後設定父級的margin-left為留白的負留白的寬度

Code複製內容到剪貼簿

<style type="text/css">    
*{   
 margin: 0;   
 padding: 0;   
}   
img{   
 vertical-align: middle;   
}   
  
ul>li{   
 float: left;   
}   
  
ul>li>img{   
 width: 100%;   
}   
    
.test1{   
padding: 0 2%;   
margin-left: -3.3%;   
}   
    
.test1>li{   
width: 30%;   
margin-left: 3.3%;   
}   
  
</style>   
 <p>1.关于负margin的实现，由于margin是基于父级计算的，会有一定的偏差，但是用于移动端上，误差可以忽略不计</p>   
        <ul class="test1 clearfix">   
            <li><img  src="/static/imghwm/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="css佈局之負margin妙用及其他實現" ></li>   
            <li><img  src="/static/imghwm/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="css佈局之負margin妙用及其他實現" ></li>   
            <li><img  src="/static/imghwm/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="css佈局之負margin妙用及其他實現" ></li>   
        </ul>

上面的誤差是因為ul的margin和li的margin百分比的計算基於的元素不一樣導致的，但是在移動端上因為視窗的範圍有限，這個差異很小，在pc上一般使用px，所以可以忽略。（下面還有更多的辦法）

2.各大網站的實現，在元素內部進行填充,使用box-sizing，需要ie8以上才支持

CSS CodeSS到剪貼簿

<style type="text/css">   
*{   
    margin: 0;   
    padding: 0;   
}   
img{   
    vertical-align: middle;   
}   
.test1{   
    padding: 0 2%;   
    margin-left: -3.3%;   
}   
ul>li{   
    float: left;   
}   
.test1>li{   
    width: 30%;   
    margin-left: 3.3%;   
}   
ul>li>img{   
    width: 100%;   
}   
.test2>li{   
    width: 33.3%;   
    padding: 0 2%;   
    box-sizing: border-box;   
}   
.test3{   
    display: flex;   
    justify-content: space-between;   
       
}   
.test3>li{   
    width: 31.3%;   
    padding: 0 2%;   
    float: none;   
}   
.test4{   
    width: 1200px;   
    border: 1px solid red;   
    margin-left: -3.33%;   
}   
.test4>li{   
    width: 30%;   
    margin-left: 3.33%;   
}   
</style>   
<p>2.各大网站的实现，在元素内部进行填充,使用box-sizing，需要ie8及以上才支持</p>   
        <ul class="test2 clearfix">   
            <li><img  src="/static/imghwm/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="css佈局之負margin妙用及其他實現" ></li>   
            <li><img  src="/static/imghwm/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="css佈局之負margin妙用及其他實現" ></li>   
            <li><img  src="/static/imghwm/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="css佈局之負margin妙用及其他實現" ></li>   
        </ul>

這種實現暫時還沒發現什麼缺點，程式碼也簡單易懂（建議）

3.彈性盒模型flex的實現，需要做相容處理（舊盒子+新盒子）

CSS Code

複製內容到剪貼板

<style type="text/css">   
*{   
    margin: 0;   
    padding: 0;   
}   
img{   
    vertical-align: middle;   
}   
.test1{   
    padding: 0 2%;   
    margin-left: -3.3%;   
}   
ul>li{   
    float: left;   
}   
.test1>li{   
    width: 30%;   
    margin-left: 3.3%;   
}   
ul>li>img{   
    width: 100%;   
}   
.test2>li{   
    width: 33.3%;   
    padding: 0 2%;   
    box-sizing: border-box;   
}   
.test3{   
    display: flex;   
    justify-content: space-between;   
       
}   
.test3>li{   
    width: 31.3%;   
    padding: 0 2%;   
    float: none;   
}   
.test4{   
    width: 1200px;   
    border: 1px solid red;   
    margin-left: -3.33%;   
}   
.test4>li{   
    width: 30%;   
    margin-left: 3.33%;   
}   
</style>   
<p>3.弹性盒模型flex的实现，需要做兼容处理（旧盒子+新盒子），仅为演示，没做兼容处理</p>   
        <ul class="test3">   
            <li><img  src="/static/imghwm/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="css佈局之負margin妙用及其他實現" ></li>   
            <li><img  src="/static/imghwm/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="css佈局之負margin妙用及其他實現" ></li>   
            <li><img  src="/static/imghwm/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="css佈局之負margin妙用及其他實現" ></li>   
        </ul>

這種情況怎麼能少了我們呢，盒模型應該是專門用來處理吧新舊盒子模型之分，各瀏覽器實現的都不太一樣。所以一般情況兩套盒子模型的屬性都需要加上。（喜歡折騰就上吧，效果棒棒的）

4.classname實現

將需要特殊處理的元素加上單獨的class，再做相應的處理。可以後台處理也可以前端處理（建議後台處理）

CSS Code

複製內容到剪貼簿

<style type="text/css">   
*{   
    margin: 0;   
    padding: 0;   
}   
img{   
    vertical-align: middle;   
}   
.test1{   
    padding: 0 2%;   
    margin-left: -3.3%;   
}   
ul>li{   
    float: left;   
}   
.test1>li{   
    width: 30%;   
    margin-left: 3.3%;   
}   
ul>li>img{   
    width: 100%;   
}   
.test2>li{   
    width: 33.3%;   
    padding: 0 2%;   
    box-sizing: border-box;   
}   
.test3{   
    display: flex;   
    justify-content: space-between;   
       
}   
.test3>li{   
    width: 31.3%;   
    padding: 0 2%;   
    float: none;   
}   
.test4{   
    padding: 0 2%;   
}   
.test4>li{   
    width: 30%;   
    margin-left: 5%;   
}   
.test4>li.first{   
    margin: 0;   
}   
.test5{   
    padding: 0 2%;   
}   
.test5>li{   
    width: 30%;   
    margin-left: 5%;   
}   
.test5>li:first-child{   
    margin: 0;   
}   
</style>   
<p>4.classname实现</p>   
        <ul class="test4 clearfix">   
            <li class="first"><img  src="/static/imghwm/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="css佈局之負margin妙用及其他實現" ></li>   
            <li><img  src="/static/imghwm/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="css佈局之負margin妙用及其他實現" ></li>   
            <li><img  src="/static/imghwm/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="css佈局之負margin妙用及其他實現" ></li>   
        </ul>

: 實動內容到剪貼板

<style type="text/css">   
*{   
    margin: 0;   
    padding: 0;   
}   
img{   
    vertical-align: middle;   
}   
.test1{   
    padding: 0 2%;   
    margin-left: -3.3%;   
}   
ul>li{   
    float: left;   
}   
.test1>li{   
    width: 30%;   
    margin-left: 3.3%;   
}   
ul>li>img{   
    width: 100%;   
}   
.test2>li{   
    width: 33.3%;   
    padding: 0 2%;   
    box-sizing: border-box;   
}   
.test3{   
    display: flex;   
    justify-content: space-between;   
       
}   
.test3>li{   
    width: 31.3%;   
    padding: 0 2%;   
    float: none;   
}   
.test4{   
    padding: 0 2%;   
}   
.test4>li{   
    width: 30%;   
    margin-left: 5%;   
}   
.test4>li.first{   
    margin: 0;   
}   
.test5{   
    padding: 0 2%;   
}   
.test5>li{   
    width: 30%;   
    margin-left: 5%;   
}   
.test5>li:first-child{   
    margin: 0;   
}   
</style>   
<p>5.css选择器实现(注意ie兼容性)</p>   
        <ul class="test5 clearfix">   
            <li><img  src="/static/imghwm/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="css佈局之負margin妙用及其他實現" ></li>   
            <li><img  src="/static/imghwm/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="css佈局之負margin妙用及其他實現" ></li>   
            <li><img  src="/static/imghwm/default1.png"  data-src="img/test.jpg"  class="lazy"  / alt="css佈局之負margin妙用及其他實現" ></li>   
        </ul>

: 實作-type-of :nth-child() 這些實現都沒有什麼技術難點，大家可以去查閱一下css文檔，注意一下兼容性沒問題了

CSS Code

複製內容到剪貼板 rrreee

貼上全部的DEMO

差點忘了還有一種情況X=2時，設定好width，左邊左浮動，右邊右浮動。

其實X=3時，還有一種處理方式，左右元素分別左右浮動，中間元素相對於父級設定絕對定位，居中定位。

注意，由於不能整除的原因，不能像box-sizing那樣完美的計算，但是合理的應用在項目上完全沒問題。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持PHP中文網。

更多css佈局之負margin妙用及其他實現相關文章請關注PHP中文網！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

@KeyFrames vs CSS過渡：有什麼區別？May 14, 2025 am 12:01 AM

@keyframesandCSSTransitionsdifferincomplexity:@keyframesallowsfordetailedanimationsequences,whileCSSTransitionshandlesimplestatechanges.UseCSSTransitionsforhovereffectslikebuttoncolorchanges,and@keyframesforintricateanimationslikerotatingspinners.

使用頁面CMS進行靜態站點內容管理May 13, 2025 am 09:24 AM

我知道，我知道：有大量的內容管理系統選項可用，而我進行了幾個測試，但實際上沒有一個是一個，y＆＃039;知道嗎？怪異的定價模型，艱難的自定義，有些甚至最終成為整個＆

鏈接HTML中CSS文件的最終指南May 13, 2025 am 12:02 AM

鏈接CSS文件到HTML可以通過在HTML的部分使用元素實現。 1)使用標籤鏈接本地CSS文件。 2)多個CSS文件可通過添加多個標籤實現。 3)外部CSS文件使用絕對URL鏈接，如。 4)確保正確使用文件路徑和CSS文件加載順序，優化性能可使用CSS預處理器合併文件。

CSS Flexbox與網格：全面評論May 12, 2025 am 12:01 AM

選擇Flexbox還是Grid取決於佈局需求：1)Flexbox適用於一維佈局，如導航欄；2)Grid適合二維佈局，如雜誌式佈局。兩者在項目中可結合使用，提升佈局效果。

如何包括CSS文件：方法和最佳實踐May 11, 2025 am 12:02 AM

包含CSS文件的最佳方法是使用標籤在HTML的部分引入外部CSS文件。 1.使用標籤引入外部CSS文件，如。 2.對於小型調整，可以使用內聯CSS，但應謹慎使用。 3.大型項目可使用CSS預處理器如Sass或Less，通過@import導入其他CSS文件。 4.為了性能，應合併CSS文件並使用CDN，同時使用工具如CSSNano進行壓縮。

Flexbox vs Grid：我應該學習兩者嗎？May 10, 2025 am 12:01 AM

是的，youshouldlearnbothflexboxandgrid.1）flexboxisidealforone-demensional，flexiblelayoutslikenavigationmenus.2）gridexcelstcelsintwo-dimensional，confffferDesignssignssuchasmagagazineLayouts.3）blosebothenHancesSunHanceSlineHancesLayOutflexibilitibilitibilitibilitibilityAnderibilitibilityAndresponScormentilial anderingStruction

軌道力學（或我如何優化CSS KeyFrames動畫）May 09, 2025 am 09:57 AM

重構自己的代碼看起來是什麼樣的？約翰·瑞亞（John Rhea）挑選了他寫的一個舊的CSS動畫，並介紹了優化它的思維過程。

CSS動畫：很難創建它們嗎？May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

See all articles