CSS的一些思考(一)

时间:2021-05-05 04:36:39

迈入前端行业已经8个多月了,从之前懵懵懂懂到现在的能根据设计图迅速成型页面,自我感觉良好。最近看到张大牛的一篇博客《说说CSS学习中的瓶颈》,突然意识到,自己不就处在快速学习和成长后的一个瓶颈期吗?每天努力工作,也去花时间学习基础知识,只是每次运用的似乎更多的是经验的积累:熟悉各个CSS属性,基本盒模型,兼容性问题如何修复熟悉等。然而,CSS的属性就那么多,如果只是了解每个CSS属性名称、属性值上来看,肯定会有一天达到饱和的。觉得似乎没有什么新的东西可学了,CSS的那点东西我都知道了,似乎工作就成了每天的重复。

(一)瓶颈在哪儿?

1.一些习惯性的CSS写法和通用方法会解决大部分工作中遇到的问题,这也慢慢会导致我们对一些底层的原理和模型的理解丧失,例如:通常我们在解决浏览器差异性的默认值时,会直接写上*{margin:0,padding:0},这样就万事大吉了,可以解决大部分浏览器默认值差异性问题,所以当遇到下面一个问题时,我竟无法回答。

dl, dt, dd三个标签浏览器默认margin值多少?是否有标签默认文字粗体?

2.CSS属性是由一个KEY+一个VALUE这种配对模式组成,例如: vertical-align: middle; 一个vertical-align属性可以对应多个值(像素,百分比,top),在一般的开发中可能遇到最多的是middle和%以及数值的模式,其他的属性值有想过怎么用以及在哪种情况下会使用呢?比如下面这个问题:

line-height:150%与line-height:1.5的真正区别是什么?

3.对知识有所了解,但没有全面的了解,有时会遇到这样的情况,例如vertical-align:middle可以对元素进行居中对齐,但是我发现当img标签使用该属性时表现正常,而P便签,span标签未均表现出任何效果,这是为什么呢?

(二)如何突破

      发现了问题就要解决问题,我觉得问题的根本还是思维的局限,没有很深入的研究,就没有实质性的提高。那如何才能有一个质的飞跃呢?

1.掌握细节

有时感觉自己遇到一些莫明其妙的问题,其实那就是一些小细节没有引起重视,知其然不知其所以然,才会遇到一些意想不到的情况,加强对CSS细节的了解,有助于更好地驾驭CSS, 而不是被CSS调试,被浏览器劫持。

2.向深度发展

这段时间本来是在学习CSS3,学的越多发现遇到的问题也越多,广度的扩展是需要深度的支撑的,我觉得是时候对CSS2.0进行一次透彻的领悟了,自己需要加强对模型机制以及原理进行深入的理解,整理与分享有深度的文章。

在学的过程中都会经历过几个踏步不前的状态,每提高到了一个小阶段会觉得没有什么学的,这种情况是正常的.是因为学习的思路受限,但在这个时期过了之后就会发现有新的东西需要学习,然后又会有一个新的上升阶段。

     (三)问题解答

既然提出了3个小问题,也一一进行解答吧。

1.dl与dt默认margin为0,dd默认margin为40,没有默认文字粗体。

2. line-height:150%与line-height:1.5的真正区别在于继承,无单位的会继承后再计算子代的line-height,值是动态的,有单位的会算出来然后继承,值是固定的.

3.vertical-align在这种情况下有效:inline-block元素。除了手动设置display:inline-block;还有例如图片,按钮,单复选框,单行/多行文本框等HTML控件(既可以与inline水平元素混排,又能设置高宽属性的元素)只有这些元素默认情况下会对vertical-align属性起作用。

慢下来,重新整理思路,跨过瓶颈,才能进一步海阔天空。