元素的padding 和 margin百分比都是想对应父元素的width(父元素必须有width这个值 否则往上查找知道body)来说的, 如下通用的css正方形方案
设置一个伪元素,伪元素用的是利用 padding-bottom撑起父元素的高度,padding相对高度为 父元素的 width
1、首先打开hbuilder软件,新建几个默认的复选框。
2、然后在上方的style标签设置input的样式,先设置input的display属性为none,将默认的单选框去掉,在设置一下各个单选框的margin的距离。
3、接着在下方继续设置样式,设置label标签的before和after伪元素,将原有before的单选框选中状态的属性“checked+label”设置变为红色实心框,同时未选中的状态的“label::after”为白色空心方框。
4、最后打开浏览器,即可看到设置好的样式,其中被选中的是红色的实心方框,没被选择的则是没有颜色的方框。