发表于: 2017-05-29 22:31:40
1 1021
今天完成的事情:上午完成公司详情页的静态页面,开始职位详情页的静态页面代码编写,下午准备小课堂的内容,晚上继续职位详情页的代码编写,目前除右侧logo和公司基本信息外,其余已经全部完成。
明天计划的事情:继续按照禅道拆分好的计划进行,目前比原计划慢了半天左右,尽力在追赶计划。
遇到的问题:
主要还是细节上的一些问题,比如做完了一个区域,在浏览器中查找一下总高,有时候发现比ui图多了许多像素,有时候又少了许多像素,然后就开始找原因,往往在这个上边会花费不少时间,基本上10—30分钟吧,等着调整的差不多了,对比一下基本的布局,细节上显示的位置是否一致等。抠细节上也是一块很花时间的事情,也在做的过程中总结经验,尽量快速发现问题,调整好上下左右的尺寸还有字体大小等。
对于布局,经常是做着做着感觉旧的布局思路行不通,这个地方需要嵌套一个div,那个地方的能不能少嵌套一个div也能叨叨不错的效果等地方,可能前期规划不足,也会引起时间上的消耗。这里当然还有可以进步的地方,希望接下来几天努力总结经验,规划好布局。
收获:由于一些布局或者细节问题,时间上消耗了一些,对于此,也在努力争取尽量一次性想好就立马做,不要有太多改动的地方,方方面面的问题尽可能都要考虑到吧!总结一下小课堂的内容:
1.背景介绍
在做任务的过程中,假如我们要在一个父级元素中的多个子集元素设置一些相同的属性,这些属性恰好也是父级也使用到的,那么我们就可以使用继承的方法来实现。有时候,我们并不想使用继承,那就重新设置,或者还原到其默认状态。这时候就用到了标题中提到的三个关键字。
2.知识剖析
CSS关键字:inherit、initial、unset。
2.1 inherit
inherit 关键字指定一个属性应从父元素继承它的值。
inherit 关键字可用于任何 HTML 元素上的任何 CSS 属性
该属性值支持IE8及以上。
demo:http://www.runoob.com/cssref/css-inherit.html
2.2 initial
initial 关键字用于设置 CSS 属性为它的默认值。
initial 关键字可用于任何 HTML 元素上的任何 CSS 属性。
该属性值支持IE不支持。
demo:http://www.runoob.com/cssref/css-initial.html
2.3 unset
unset 关键字,可以简单按其字面意思,理解为不设置。
unset 关键字既然是不设置,那属性值应该如何取值呢?
unset 是关键字 initial 和 inherit 的组合。也就是说,如果该属性是默认继承属性,该值等同于 inherit 如果该属性是非继承属性,该值等同于 initial。
demo:https://codepen.io/Chokcoco/pen/eWJOqB
2.4 inherit、initial、unset 的区别
这里我们引入一个张鑫旭大神的demo来直观地区分一下其中的区别。
demo:http://www.zhangxinxu.com/study/201603/css3-all.html
3.常见问题
问题: 哪些属性可以继承?
4.解决方案
内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
块状元素可继承:text-indent和text-align。
列表元素可继承:list-style、list-style-type、list-style-position、list-style-image
表格元素可继承:border-collapse
5.编码实战
参看前边引用的demo演示。
6.扩展思考
问题:标题标签H系列和段落标签的initial效果?
demo:https://ptteng.github.io/PPT/PPT/css-06-inheritance%20of%20css%20attribute.html
7.参考文献
参考一:谈谈一些有趣的CSS题目(十五)-- 谈谈 CSS 关键字 initial、inherit 和 unset :http://www.cnblogs.com/coco1s/p/6733022.html
参考二:张鑫旭大神的博客:简单了解CSS3的all属性:http://www.zhangxinxu.com/wordpress/2016/03/know-about-css3-all/
参考三:【CSS】initial、inherit、unset、revert:http://www.jianshu.com/p/e8e6f251aeee
8.更多讨论
讨论点:大家有没有使用到过以上的关键字,遇到过哪些有意思的问题?
评论