发表于: 2018-07-20 22:29:39
1 727
今天完成的事情:
1.完成任务12;
2.学习CSS样式重置;
明天计划:
1.完成任务13;
2.深入研究sass中混合宏和插值的用法;
3.巩固前面的知识;
遇到的问题:
sass使用得很浅显,结果发现并没有真正简便多少,要尽量提高代码的简便性;
收获总结:
1.学习CSS样式重置:
CSS reset:在HTML标签在浏览器里有默认的样式,有些默认样式往往会给我们带来麻烦,影响开发效率。所以有经验的前端设计者都会自定义一个重置浏览器默认样式的CSS文件,在这个文件中定义一些针对不同浏览器最终表现一致的代码;解决的方法就是一开始就将浏览器的默认样式全部去掉,更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。CSS reset就是把浏览器提供的默认样式覆盖掉。
NORMALIZE:Normalize.css 是一个很小的CSS文件,但它在默认的HTML元素样式上 提供了跨浏览器的高度一致性。用于保护有用的浏览器默认样式而不是完全去掉它们修复浏览器自身的bug并保证各浏览器的一致性;
CSS reset的不足:
1.CSS reset平白无故的增加了CSS文件的大小,虽然,增加的大小可能有限,但是,要知道,即使0.1秒的载入时间差异也会影响互联网企业的收入的。
2.许多的CSS样式要重写与重新覆盖,典型的多此一举。
3.CSS的渲染这可以说是最大的问题,样式无缘无故增加了很多的渲染,想想看,一个项目或是一个页面中有多少个div标签,居然使用div{margin:0; padding:0;}当然,*{margin:0; padding:0;}更是无法容忍的。
2.分享css元素溢出:
当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置。
overflow的设置项:
1、visible 默认值。内容不会被修剪,会呈现在元素框之外。
2、hidden 内容会被修剪,并且其余内容是不可见的,此属性还有清除浮动、清除margin-top塌陷的功能。
3、scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
4、auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
5、inherit 规定应该从父元素继承 overflow 属性的值。
3.任务12的任务总结:
链接:http://new.wiki.jnshu.com/pages/viewpage.action?pageId=23103862
任务名称:CSS任务12
成果链接:https://zzzheli.github.io/task12/task12-1.html
任务耗时:7.19~7.20 共计2天
技能脑图:
个人脑图:
官网脑图:
任务总结:
1.任务进度符合预期,无延期。
2.任务要点:任务十二使用sass重任务五六,而且还不能使用bootstrap,这里的主要目的一个是让我们更熟悉sass,宁一个是在
不使用bootstrap的情况下仍能完成任务五六;bootstrap的有点就是在于里面已经帮我们写好了各种样式,我们只需要改改样式就能套
用,不使用bootstrap就意味着让我们学会自己编写好一套属于自己的框架,方便使用;sass的优点也在于其便捷性,能够反复套用,
所以熟悉了sass的话对与以后的编程速度肯定会很有帮助。
3.遇到的问题:
回过头来重新用sass来写任务五六而且不使用bootstrap,可能在下拉选项和框架方面我们需要用一种全新的方法来写,而不是像以前一样直
接套用bootstrap,这一点难度可能稍微增加了点;但是再来看看之前写过的代码,就能发现以前很多的不足之处,比如编码不规范啊,用的方
式比较单一啊,所以当我们用更规范的代码,和更多的方式去解决以前的问题的时候,你就会发现这就是我们成长的地方,这一点很有意思。
评论