发表于: 2017-03-26 23:54:21
2 625
今天完成的事:完成了task6的编写,过程中使用overflow出现了些问题,比如针对几个div组成的content中overflow:auto失效,结果我在几个div外面再加个div,然后在主content添加overflow属性就成功了;能用float浮动就多用点,少用绝对定位,今天多用了2个absolute导致了修改代码后自适应没了。。。。而且谷歌和火狐的分辨率不一样更加让响应式GG了。。。对于task6,除了header和footer之类必须用fixed,对于其他应该多用其他来布局比如flex,对于task6的完成能加快很多(之前还是对2个绝对定位没有太多的认知,错误的使用浪费了很多时间,就如同“任务详解”里面写的,做任务前要先把布局先想好,然后不要急着敲代码,应该多想想是否能用相对方便的布局解决任务要求,而不是写繁琐的布局)。
这次task6需要一些垂直居中的方法,针对不一样的内容比如图片文字,使用vertical-align:middle、text_align: center、margin:0 auto等,但要注意各自对应的div属性,是块状的还是行状的。
今天还顺便看了task7新的html5和css3的新标签,但对于range input.......还有当中的函数还是没看进去,(不过当中的各类css设置倒是直接看明白了,代码敲得多果然会熟练)。
明天计划的事:继续task7.
遇到的困难:range input还是有点懵逼,overflow:auto的使用还是不够熟练。
收获:overflow:hidden清除浮动很好用,这次用在task6也比较舒服。查看百度的时候发现了一段经验,针对clear: both用overflow:hidden代替对于父元素自适应更符合。
下面box为父元素:#box{
width:500px;
background:#000;
height:500px;
}
#content {
float:left;
width:600px;
height:600px;
background:red;
}
评论