js正方形div

vvpvvp 發(fā)布于2019-08-20 13:30 / 1967人閱讀

上面代碼中，類為.content的div表示一個正方形，其高度為零，padding-top的百分比是基于父元素的寬度的，又因為該div的寬度為100%，即為父元素的寬度，所以padding-top的高度和該div的寬度是相等的，也就是正方形，在這個正方形里面可以定義我們想放在正方形里面的內(nèi)容，并置其position為absolute，left,top均為0.這樣內(nèi)容區(qū)就可以放在類為.content的div正方形中了，并且由于該正方形是用百分比的形式，所以是響應(yīng)式的。該正方形的寬度隨著類為.container的div的寬度的變化而變化。

此外，提供一個清除浮動元素周圍的類

.clearfix:after{
  content: "020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

若li為浮動元素，則

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/81092.html

相關(guān)文章

css 滾動視差之水波紋效果

摘要：我們來看個例子代碼很簡單，讓視口出現(xiàn)滾動條，然后它是這樣的很普通的一個滾動效果，然后我們把注釋去掉，就是加上這句話華麗變身由于它相對視口固定，看起來就好像只有一個背景一樣。核心屬性： background-attachment 這個屬性就牛逼了，它可以定義背景圖片是相對視口固定，還是隨著視口滾動，加上這個屬性網(wǎng)頁瞬間就從屌絲變成高大上。我們來看個例子： html: d...

番茄西紅柿 2019-04-22 17:02 評論0 收藏0
css 滾動視差之水波紋效果

摘要：我們來看個例子代碼很簡單，讓視口出現(xiàn)滾動條，然后它是這樣的很普通的一個滾動效果，然后我們把注釋去掉，就是加上這句話華麗變身由于它相對視口固定，看起來就好像只有一個背景一樣。核心屬性： background-attachment 這個屬性就牛逼了，它可以定義背景圖片是相對視口固定，還是隨著視口滾動，加上這個屬性網(wǎng)頁瞬間就從屌絲變成高大上。我們來看個例子： html: d...

番茄西紅柿 2019-04-22 16:34 評論0 收藏0
css 滾動視差之水波紋效果

摘要：我們來看個例子代碼很簡單，讓視口出現(xiàn)滾動條，然后它是這樣的很普通的一個滾動效果，然后我們把注釋去掉，就是加上這句話華麗變身由于它相對視口固定，看起來就好像只有一個背景一樣。核心屬性： background-attachment 這個屬性就牛逼了，它可以定義背景圖片是相對視口固定，還是隨著視口滾動，加上這個屬性網(wǎng)頁瞬間就從屌絲變成高大上。我們來看個例子： html: d...

番茄西紅柿 2019-04-22 16:12 評論0 收藏0
【CSS練習】IT修真院--練習1-九宮格

摘要：用于顯示日志信息及輸入一些命令請求監(jiān)聽?？色@得請求列表，點開某一項將看到數(shù)據(jù)頭部數(shù)據(jù)。包含本次請求的請求方法狀態(tài)碼請求服務(wù)器的地址其他一些設(shè)置響應(yīng)頭部包含用戶代理，幫服務(wù)器識別設(shè)備用預覽。九宮格——用html+css制作一個網(wǎng)頁一. 目標效果： showImg(https://segmentfault.com/img/bVbbxBA?w=872&h=644); 二. 效果描述圓角...

Tecode 2019-08-29 15:34 評論0 收藏0
純CSS 常見3D實例

摘要：一正方體我認為正方體可以算是圖像的基礎(chǔ)吧，首先正方體是由六個相同的面所組成，其次就需要我們依次構(gòu)造。一、正方體我認為正方體可以算是3D圖像的基礎(chǔ)吧，首先正方體是由六個相同的面所組成，其次就需要我們依次構(gòu)造。（據(jù)體構(gòu)造在代碼中）成平圖如下:showImg(https://segmentfault.com/img/bVbffpd?w=608&h=504); 代碼如下： ...

szysky 2019-08-29 16:22 評論0 收藏0