最近因為需要用到繪製類似九宮格的需求，所以研究了一下響應式矩形的實現方案。
有如下幾種方案：
使用js來設定元素的高度
使用vw單位 div
使用偽元素設定padding的方式來實現正方形（也就是本次使用的方式）
1.square
2position: relative
3width: 100%45
&::before
6content: ''
7display: block
8padding-top: 100%
1<
div
class
="square"
>
div>
我們的做法就是使用偽元素的 padding-top: 100%
來撐開元素本身。
因為 pading-top
與 padding-bottom
的百分比取值來自於元素的寬度，所以，設定值為100%就實現了我們想要的功能。
想要實現更多比例的形狀，其實就是修改 ::before
中的 pading-top
或者 padding-bottom
的值即可。
1// 16: 9
2.square::before
3padding-top: (9 / 16 * 100%)45
// 4: 3
6.square::before
7padding-top: (3 / 4 * 100%)89
// 1: 2
10.square::before
11padding-top: 200%
當然，上邊的實現都只是乙個簡單的矩形，如果你的矩形裡邊還要有一些內容的話，需要給元素新增以下幾個屬性：
1.content
2position: absolute
3top: 0
4right: 0
5bottom: 0
6left: 0
1<
div
class
="square"
>
2<
div
class
="content"
>
3awesome
4div
>
5div
>
要注意的有以下幾點：
ie7-不支援
元素不要設定 height
以及 overflow: hidden
w3-padding
如何利用Python繪製乙個愛心
剛學習python幾周，閒來無事，突然想嘗試畫乙個愛心，步驟如下 開啟介面 開啟python shell介面，具體是python語言的idle軟體指令碼。2.建立指令碼 單擊左上角 file 再單擊 new file 建立乙個新的指令碼檔案。3.如下 1 from turtle import 2de...
python使用turtle繪製乙個正方形
今天發現乙個繪圖的包turtle，非常簡單和有趣。turtle 中文海龜的意思 從python2.5開始，turtle被包含在python庫中，官網文件在 turtle turtle graphics for tk 操作turtle命令可以分為兩類，一種為運動命令，一種為畫筆控制命令 1 運動命令 ...
使用konva來繪製乙個矩形
1 doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title document title 6 style 7body 13style 14 script src konva.js script 15head 16 body 17...