html结构也很简单,只有一个div即可
<html> <body> <div class="square"> </div> </body> </html>
.square{ width: 50vw; height: 50vw; background: blue; }
要点:
html结构:
<html> <body> <div class="container"> <div class="square"> </div> </div> </body> </html>
css:
*{ margin: 0; } /* 设置撑满页面可见区域 */ .container{ height: 100vh; width: 100vw; background: palegoldenrod; } .square{ width: 50%; /* 相对与container的width */ padding-bottom: 50%; /* 相对与container的width */ background: palegreen; }
行了吧,两种就可以了,你也可以使用margin,不过会有塌陷的危险,所以,就这两个够用啦~~
如对本文有疑问, 点击进行留言回复!!
CSS中的两个特殊值用于控制层叠的inherit和initial的方法
CSS3 input框的实现代码类似Google登录的动画效果
CSS 容器背景 10 种颜色渐变Demo(linear-gradient())
详解CSS文件中的4种引入方式:行内,内联式,外部式,导入式
网友评论