发表于: 2019-02-01 02:16:52
1 772
今日完成内容:
学习昨天未完的浮动“float”+“clear”内容,基本可以看懂实例,虽然想要自己打出来又是另外一回事了。
学习CSS “基础语法”、“高级语法”、“后代选择器“、”子元素选择器“、”相邻兄弟选择器“知识点。
理解”相对定位“和”绝对定位“
接下来动手操作:
通过自己的理解可以把正方形代码写出来,这个比较容易,设置了一个固定的px值。
根据对块的理解,加上了padding border margin值
然后让元素浮动,通通向左浮动。
可是向左浮动呈现的效果只是九个格子而已,这九个格子的排版是根据网页大小变化的,可能441三行,也可能22221五行。
第一想法是用clear,因为这个知识点和float是一起的,所以将第3、6、9个div 设置成”clear:right “ 希望这三个格子右侧没有其他块,失败。
查找热门问题受到启发,宽高应该用百分比设置,这样计算好数值就可以确定每行只有三个格子,可以自适应,但是只将px改为%,失败。
将宽和高改为左内边距和下内边距,成功。但是不知道为什么。。。。
明日期望内容:
学一些基础标签属性
搞清楚需不需要加父元素,怎么加
学会将正方形设置为圆角
理解”自适应“
区分px em % vw等单位
遇到的问题:
一开始以为正方形设置的是长和宽,发现不行,百度出来要设置宽和高(ˉ▽ˉ;)...。
并且还把高这个词打错了,显示不出来(太丢人了,捂脸)
九宫格结构通过热门问题解决,看完大神回复果然顿时就有思路了
收获:
在看实例的过程中,发现看代码是按照别人的思路理解,可是要是自己敲代码必须自己有思路
所以理解到构建框架的重要性,先骨后肉才行。
评论