发表于： 2018-06-05 20:45:26
1 661
今天重新使用display:inline-block写了一下任务1，使用伪元素撑开高度,display:inline-block布局，和以往一样，设置宽度30%;
box:after{content:"";display:block;padding-top:30%}
发现不是正方形，是因为padding/margin的值是相对于其父元素的宽度设置，伪元素的父元素不再是自己本身的父元素，而是自己，这里，把padding-top:100%后，是正方形。接下来就是九宫格的布局，运用display:inline-block后，三个正方形排成一排，并且本身是有间距的？？？
翻资料之后发现说是编写代码时，代码之间的间距导致的，在其父元素设置font-size:0;即可消失。
因为不用伪元素设置padding时，会出现文字溢出的情况，然后我给div放了文字。然后，，，文字不见了！！
这里要记得文字属性是可以继承的，正方形盒子继承了其父元素的font-size:0,文字消失，在正方形上重新设置字体大小即可。
然后盒子就被撑开了。。。！
还有一个问题就是发现使用:after时，文字在顶部。
使用:before时，文字在底部。
so :after是指在内容之后加载，:before是指在内容前面加载？？
有没有办法，在内容填充的情况下保持正方形不变形。。
明天有时间就解决这个问题或者去做任务4吧
返回列表
评论