用三層盒子結(jié)構(gòu)實現(xiàn)多邊框

guyan0319 發(fā)布于2019-04-23 13:38 / 424人閱讀

摘要：代碼如下消除多個邊緣的溢出的邊界消除觸發(fā)就可以在瀏覽器看到使用三層盒子模型做出效果給消除右邊和下面的總邊距拿來撐開以便一行能容納個拿來給

　　如圖為jd的廣告頁面

　　如果想給每個盒子加上美觀的border，實現(xiàn)如下效果

　　如果給每個li加border的話盒子就會被撐開，則依照浮動特性一行就容納不下4個li,li會自動掉下來。這時，可以給ul一個寬度，li就不會掉下來，如下圖所示

　　這時，剛好ul會比外面的盒子高幾像素和幾及像素（如果不清除浮動ul的高度是0），這時再給最外面的盒子overflow-hidden就能達到目的。如圖所示

　　把最外面盒子的border去掉就能得到想要的效果了。

?　　代碼如下


"en">

    "UTF-8">
    消除多個邊緣的margin
    


    class="box">

云服務(wù)器 GPU云服務(wù)器三層結(jié)構(gòu) html 盒子邊框多文件結(jié)構(gòu) java實現(xiàn)樹形結(jié)構(gòu)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/2150.html

相關(guān)文章

純干貨！jQuery之DOM操作解析

摘要：本人的兩篇原創(chuàng)文章純干貨一切關(guān)于選擇器和純干貨之操作解析，發(fā)布不到個月，就被博客園某賬號認領(lǐng)為他的原創(chuàng)，并且他還精心地將慕課網(wǎng)原創(chuàng)文章的版權(quán)聲明和文章中關(guān)于我的點點滴滴，刪除地干干凈凈，很專業(yè)。　　本人的兩篇原創(chuàng)文章純干貨！一切關(guān)于jquery選擇器和純干貨！jQuery之DOM操作解析，發(fā)布不到1個月，就被博客園某賬號認領(lǐng) 為他的原創(chuàng)，并且他還精心地將慕課網(wǎng)原創(chuàng)文章的版權(quán)聲明和文...

yzd 2019-08-21 11:17 評論0 收藏0
HTML補充+CSS基礎(chǔ)

摘要：文件的編碼格式頁面的編碼格式設(shè)置當(dāng)前頁面的編碼格式在瀏覽器運行當(dāng)前頁面時，告訴瀏覽器當(dāng)前的編碼格式字符集概念存放所使用的所有的字符漢字分類美國歐洲中國萬國碼主要使用計算機的存儲方式利用二進制方式和中國存儲將文件的編碼格式 - UTF-8 HTML頁面的編碼格式 - UTF-8 設(shè)置當(dāng)前HTML頁面的編碼格式在瀏覽器運行當(dāng)前HTML頁面時，告訴瀏覽器當(dāng)前的編碼格式字符...

CoorChice 2019-08-29 12:39 評論0 收藏0
深入理解line-height

摘要：初學(xué)者也許會對這句話嗤之以鼻，但隨著我學(xué)習(xí)的深入，漸漸意識這句話還是有一定道理的。然而，我們真的了解它嗎又是由什么來決定的首先推薦一篇文章，深入了解的行高屬性假設(shè)你已經(jīng)讀完了這篇文章并且已經(jīng)大致理解那么這張圖應(yīng)該能看懂了。 HTML和CSS因為其所見即所得的直觀特性，往往被冠上簡單易學(xué)的名號。我一開始也是這么想的，不就是那幾個控制浮動、顏色、位置的標(biāo)簽嗎！CSS3不就是加了些花哨的特效...

Java3y 2019-08-02 15:55 評論0 收藏0
深入理解line-height

摘要：初學(xué)者也許會對這句話嗤之以鼻，但隨著我學(xué)習(xí)的深入，漸漸意識這句話還是有一定道理的。然而，我們真的了解它嗎又是由什么來決定的首先推薦一篇文章，深入了解的行高屬性假設(shè)你已經(jīng)讀完了這篇文章并且已經(jīng)大致理解那么這張圖應(yīng)該能看懂了。 HTML和CSS因為其所見即所得的直觀特性，往往被冠上簡單易學(xué)的名號。我一開始也是這么想的，不就是那幾個控制浮動、顏色、位置的標(biāo)簽嗎！CSS3不就是加了些花哨的特效...

chemzqm 2019-08-30 13:04 評論0 收藏0
CSS 布局方式

摘要：中間左欄右欄清除浮動如下圖缺點結(jié)構(gòu)不正確多了一層標(biāo)簽布局左欄中間右欄如下圖缺點兼容性問題參考文章 W3C標(biāo)準由萬維網(wǎng)聯(lián)盟制定的一系列標(biāo)準，包括：結(jié)構(gòu)化標(biāo)準語言（HTML和XML）表現(xiàn)標(biāo)準語言（CSS）行為標(biāo)準語言（DOM和ECMAScript） CSS中的定位機制在CSS中存在三種定位機制：標(biāo)準文檔流（Normal flow）浮動（Floats）絕對定位（Abs...

LancerComet 2019-08-29 15:27 評論0 收藏0