使用CSS定義乙個和螢幕寬度一樣正方形容器

2021-08-09 06:47:44 字數 763 閱讀 8711

介紹一下如何使用css定義乙個和螢幕寬度一樣正方形容器。

有時候,我們在移動端需要做乙個商品展示頁面,一開啟頁面,螢幕的上面一半展示為商品的,下面才是商品的文字資訊介紹,那麼我們要怎麼實現在載入之前預留乙個正方形區域給,防止一開始因為沒有導致文字往上跑然後等載入出來後瀏覽器再對介面重排這一不優雅的情況發生,怎麼設定的寬高使其寬高剛好等於螢幕的寬度呢。

其實很簡單,我們只需要設定包裹的父元素(同時也是 body 的子元素,也就是這裡類名為 square 的 div )其寬度為100%還有padding-top 為100%,這樣,在載入之前相對於區域就有乙個和螢幕寬度一樣的正方形容器。

檢視css手冊我們可以知道,當我們給padding賦值為百分比的時候,其數值時基於父元素的寬度的百分比的內邊距,而這裡的父元素寬度為100%即螢幕的寬度,所以其我們就可以獲得乙個和螢幕寬度一樣的正方形容器。

然後我們再對標籤進行定位和設定其寬度和高度都為100%,其數值為基於包含它的塊級物件的百分比寬度和高度,也就是之前預留出來的正方形區域。

python定義乙個 Python定義乙個類

在物件導向的世界裡,你的 通常稱為 類的方法 method,而資料通常稱為 類的屬性 attribute,例項化的資料物件通常稱為 例項 instance。python使用class建立類。每個定義的類都有乙個特殊的方法,名為 init 可以通過這個方法控制如何初始化物件。類中方法的定義與函式的定義...

求乙個思路和乙個定義的方法

程式 百錢買百雞.prg screen.visible f.formheight 280 formwidth 375 objform createobject fm1 objform.show read events define class fm1 as form windowtype 1 sho...

同級css使用乙個樣式 純CSS樣式寫乙個內凹圓

廢話不多說,直接上效果圖!這是html 單元管理 車位管理 商鋪管理 這是css 內凹圓 property left list list one list one before list one after list one after,list one before list one div be...