css3技术

突破CSS学习中的瓶颈(2)

字号+ 作者:H5之家 来源:H5之家 2015-09-14 14:13 我要评论( )

看看这张图: 我们很自然想到,要从A到B阶段,只要向下,向深度发展就可以了。所以,如果您觉得现在CSS这块学到的东西不多了,试试向垂直方向学习。 补充: 1. 有时候,如果我们CSS的基础足够得扎实与强大,我们会

看看这张图:

我们很自然想到,要从A到B阶段,只要向下,向深度发展就可以了。所以,如果您觉得现在CSS这块学到的东西不多了,试试向垂直方向学习。

补充:
1. 有时候,如果我们CSS的基础足够得扎实与强大,我们会自热而然进入到B阶段,但这种完全经验积累的进阶学习需要很长的时间周期。
2. 如果没有一定的CSS基础以及经验做支撑,我们是无法进入B阶段的。
3. 深度才是你的核心竞争力。深入的细节掌握,深入的机制理解等,这些都是要下苦功才能掌握的,这是你有别于其他千千万万自认为会写页面的CSSer们的地方!

瓶口间的跳跃
CSS3的出现似乎让一些CSSer们的学习有了新的方向:CSS2.1中的那些CSS代码我闭着眼睛都能敲出来,实在太无趣了,终于出来个小三 – CSS3来调剂生活!

然而,从CSS2到CSS3的学习增加的只是一点广度的知识,多点时间,谁都可以达到你这种程度(学习门槛低啊!)。在我看来,无非就是从一个瓶口跳到另外一个稍显时髦的瓶口而已。

视角的局限
武侠中,主角们的进阶似乎都离不开所谓的“高人指点”;就算现实生活中,我们的人生也可能因为一句话而发生重大改变。那“指点”的是什么呢?“改变”的又是什么呢?——看待问题的方式以及角度!据说阿里有个倒立文化,换个视角看问题,会得到不同的答案。

我们很多人找不到学习的突破口,可能就是由于视角的问题。

我们往往不是这样子看的:

而是从上往下,只看到瓶口——

看不出水有多深,看不到瓶颈在哪里!想起了一部美剧——《迷失》,想起了一句古话——“只缘身在此山中”。

三、瓶颈在哪?

我先问几个问题,看看你是否能够回答上来?

  • dl, dt, dd三个标签浏览器默认margin值多少?是否有标签默认文字粗体?
  • line-height:150%和line-height:1.5的区别是?
  • float为何会让外部容器高度塌陷?这是bug?
  • vertical-align的表现为何在IE7, IE8, IE9下表现不尽相同?其中的渲染机制是?
  • 以上问题可以大致判别你是A阶段还是B阶段。倒不是问题本身,而是问题所指的类别。

    问题1, 2表示“深入的细节掌握”;3, 4表示“深入的机制理解”。再往后可能就是“网页大事,为我所控”,“天下页面,听我号令”,这要C阶段了,先不予讨论。

    换句话说,您现在的瓶颈可能在于“细节掌握不够”、“机制等理解不够”。

    关于细节
    有人可能会反问:我为什么要知道dl, dd, dt标签默认的margin值大小?我一般都是直接在CSS reset中设置:

    body,h1,... ,dl,dt,dd,...,th,td { margin:0; padding: 0; }

    你看,淘宝网首页就是这么干的(global-min.css)!从实际应用来看,我无需关心!

    这样的想法,类似于:我根本不需要知道我的前任、现任、后任女友是否是处女,因为我都直接让她们做处女膜修复!从实际应用来看,我无需关心!

    很多事情,如果你足够了解之,就能灵活掌控之!即所谓的驾驭能力。CSS细节了解,有助于你更好地驾驭CSS, 而不是被CSS调试,被浏览器劫持。

    3~4两的大闸蟹虽然也有人要,但是,多啊,不值几个钱;但是半斤以上的大闸蟹的单价就要翻番。
    盲从CSS reset的人也有人要,但是,多啊,不值几个钱;但是,知根究底的人这身价就要翻番了。

    如果你有自己想法,知根知底,你可能就是这样做reset的:

    body, h1, ..., dl, dd { margin: 0; }

    dt标签的reset只是白白浪费,增加页面渲染负荷;padding属性值仅极少标签(ol, ul)有,其他标签无需浪费渲染重新设置。
    //zxx: 对于淘宝首页的渲染速度我就不说什么了 

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • HTML CSS网页基础开发教程第1讲01

      HTML CSS网页基础开发教程第1讲01

      2015-10-02 16:42

    • HTML CSS网页基础开发教程第1讲02

      HTML CSS网页基础开发教程第1讲02

      2015-10-02 16:42

    • HTML CSS网页基础开发教程第1讲03

      HTML CSS网页基础开发教程第1讲03

      2015-10-02 16:42

    • HTML CSS网页基础开发教程第1讲04

      HTML CSS网页基础开发教程第1讲04

      2015-10-02 16:42

    网友点评
    p