js正方形div

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

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

此外，提供一個(gè)清除浮動(dòng)元素周?chē)念?lèi)

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

若li為浮動(dòng)元素，則

GPU云服務(wù)器云服務(wù)器 js div div js函數(shù) js div靠右 js div數(shù)組

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

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

相關(guān)文章

css 滾動(dòng)視差之水波紋效果

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

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

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

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

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

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

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

Tecode 2019-08-29 15:34 評(píng)論0 收藏0
純CSS 常見(jiàn)3D實(shí)例

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

szysky 2019-08-29 16:22 評(píng)論0 收藏0