发表于： 2019-03-17 13:30:50
4 863
day 2
今天完成了任务一，九宫格布局；
学习过程：
方法一：学习vw、vh视窗单位,弹性布局方式flex，和视口的概念；通过对父盒子添加felx属性，局实现九宫格布局；对父盒子进行宽高均设为100vw，然后对子盒子的宽高设为30%，添加子盒子之间的margin值和圆角比例；这样就实现了类似于任务一gif图的九宫格等比缩放的效果；
方法二：利用浮动让子盒子脱离文档流，给父盒子添加伪元素的方法来清除浮动，然后给子盒子设置30%的宽度，同时给子盒子添加一个padding-bottom：30%的属性，使子盒子宽高按父盒子宽度的30%等比缩放；
明天计划：学习em pm rem单位的应用
返回列表
评论