CSS的一些思考(一)

迈入前端行业已经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属性起作用。

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

时间: 2024-08-10 15:00:15

CSS的一些思考(一)的相关文章

关于css的新思考

因为被派去协助别的组,有机会写了一下react,发现ICE做的那一个套件用来搭建后台系统真的太给力了(插一句必入table组件其实是可以把删除添加座位基础方法加进去的).因为看了demo的代码以及对于jsx语法的不熟悉,所以一时不知所措把css写在哪里才发现react对于css的处理已经不同于原来传统对于css的定义了,参考这篇文章 react很核心的思想就是:1. 数据和ui分层:2. 组件化:第二点其实也是建立在第一点之上的,在后台系统中的运用简直太合适了,跟我当时在考拉的时候想做的是差不多

CSS组件化思考

为什么组件化? 分层设计,代码复用,减少冗余: 维护方便,弹性好: 如何组件化? 目前代码分成三级: 第一级粒度最细,是基础,主要包含字体配置,颜色配置,UI框架(比如MUI或者pure.css): 第二级是组件层,项目中出现两次及以上的样式单独抽离成一个组件,如果组件小于15个,单独放到一个component.less文件中,大于15个(界限自己把握),考虑放到几个不同的less文件中.因为样有些样式依赖于一定的DOM,所以需要针对less文件写一个HTML文件一一对应后于组件对应的DOM:

学习提高你CSS技术的法则

分享一些我这几个月来理解的东西,这并不是一些代码片段或者是css小技巧,而更像是一些通用的规则或者是最佳实践之类的东西,如下: 不要让你的代码脱离你的掌控,尽量简洁 掌握基础,学习CSS技巧 保持代码的可复用性 面向对象的css Css3 了解他能做的以及你可以使用的部分 渐进增强与优雅降级 Css预处理工具 与时俱进 取长补短 熟能生巧 你想说什么呢?你准备好了?那我们继续往下吧. 1.不要让你的代码脱离你的掌控,尽量简洁 别让你的代码脱离你的掌控 这是编程的一种通用建议,不仅仅适合css.当

DIV+CSS布局基本流程及实例介绍

都说用DIV+CSS布局来设计网站便于优化,容易被收录,那么你对DIV+CSS布局的用法是否了解?CSS布局是网页html通过DIV标签+CSS样式表代码开发制作的(html)网页的统称.DIV+CSS布局是现在非常流行的布局方法,替代了原来的表格布局.下面我们先来看下学习DIV+CSS布局的基本步骤: 一.认清学习的要求 1.弄清目的,首先要认识为什么要学习CSS? 2.心态不能急,如果你很急躁,否则会很快丧失兴趣. 3.坚持,这个不是一到两天的事情,是一个漫长的过程(至少两个月). 二.基础

关于div+css布局

div的元素布局加上css的样式表布局知识:DIV+CSS布局,CSS布局是网页html通过div标签+css样式表代码开发制作的(html)网页的统称.div+css布局好处:便于维护制作div+css网页前思考布局:首先我们拿到一张网页美工图片我们将从上下.上中下.左右.上中(中包括左右)下布局框架来思考.(从大元素块到小元素块:从html上到下:从左至右) /*我们可以分析出我们DIV CSS布局重构此页面结构框架,我们可以看出是 上.中.下结构,其中又包括了左右结构.由此我们就要写此页面

17岁开始学编程,晚么?

刚在伯乐在线上看到一篇文章: 有位年轻的童鞋在 Quora 提问,“如果想成为一名顶级程序员,17岁开始学编程晚么?”FB 前程序员 Don Pinkus 针对这个问题,分享他从 22 岁开始起学习编程的经历. 看完他的分享,截取对自己有帮助部分马克一下,查看原文(http://blog.jobbole.com/85548/) 如果你现在就希望自己成为一名工程师,那么以下就是你的任务清单: 1. 到w3schools.com网站上学习HTML和CSS.2. 思考一下你想做一个什么样的网站.已经有

谈谈Web前端工程师的定位

原文地址:http://www.360doc.com/content/10/0708/17/1277406_37692580.shtml 2010-07-08  锋子chans   阅 1116  转 13 先给前端工程师的工作下个一句话定义:运用前端技术,实现体验的良好传达.如果在前面加上 Web,那么是针对 Web 这个领域的,主要是互联网,也可以将移动通信网络和其他传媒网络(比如IPTV)包含在内,因为其理念是一致的. 现在要在未毕业的学生中找到一个符合技能条件的 Web 前端工程师可以说

手机互动网页项目总结(转)

目录: 一.项目地址 二.布局1.按屏滚动会碰到什么问题?2.flexbox会碰到什么问题?3.fixed定位需要慎用. 三.动画1.CSS动画与Canvas动画性能优劣分析2.当缩放动画碰上硬件加速3.动画由Javascript来维护还是css维护的思考 四.特性1.如何解决音频播放预加载与延时的问题2.重力感应3.启动原生应用4.地理定位 五.其它1.字体图标应用设计环节的打通2.当transform碰上模糊 六.数据1.用户环境 一.项目地址 1.TGA移动游戏官网 TGA城市拉力赛 2.

关于CSS反射倒影的研究思考

原文地址:https://css-tricks.com/state-css-reflections 译者:nzbin 友情提示:由于演示demo的兼容性,推荐火狐浏览.该文章篇幅较长,内容庞杂,有一定难度.而我本人学识有限,加之时间仓促,所翻译内容可能有不恰当及晦涩之处.欢迎大家拍砖指正. 我最近在codepen上看到了这个 加载程序,一个纯CSS制作的带有渐变反射的3D旋转竖条.它的制作方法是:为每个竖条创建一个元素,然后通过复制每一个元素来创建反射倒影,最后在反射倒影上添加渐变背景来创建渐隐