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属性起作用。
慢下来,重新整理思路,跨过瓶颈,才能进一步海阔天空。
CSS的一些思考(一)的更多相关文章
- 关于CSS reset的思考
关于CSS reset的思考 在现在的网站设计中使用reset.css用重置整个站点的标签的CSS属性的做法很常见,但有时候我们已经为了reset而reset,我们经常看到这样的reset代码 div ...
- 关于css的新思考
因为被派去协助别的组,有机会写了一下react,发现ICE做的那一个套件用来搭建后台系统真的太给力了(插一句必入table组件其实是可以把删除添加座位基础方法加进去的).因为看了demo的代码以及对于 ...
- 常见标签的默认属性值及相互作用——关于CSS reset的思考
在现在的网站设计中使用reset.css用重置整个站点的标签的CSS属性的做法很常见,但有时候我们已经为了reset而reset,我们经常看到这样的reset代码 div{ padding:0px; ...
- CSS组件化思考
为什么组件化? 分层设计,代码复用,减少冗余: 维护方便,弹性好: 如何组件化? 目前代码分成三级: 第一级粒度最细,是基础,主要包含字体配置,颜色配置,UI框架(比如MUI或者pure.css): ...
- CSS布局模型思考
flow模型:默认布局模型,元素从左向右.从上到下依次排列,块状元素独占一行.Position属性对应值static. float模型:主要效果是让本来独占一行的块状元素变成内联-块状元素,并到一排显 ...
- 常用CSS优化总结——网络性能与语法性能建议
在前端面试中最常见的问题就是页面优化和缓存(貌似也是页面优化),被问了几次后心虚的不行,平然平时多少会用到一些,但突然问我,很难把自己知道的都说出来.页面优化明显不是一两句能够说完的,这两天总结了一下 ...
- 《css3实战》读书笔记 第一章 基于CSS需求而编写的HTML.
笔记说明 <CSS3实战手册第3版(影印版)>可以消除Web设计工作的痛苦,并且带给你:HTML--重新入门.如果你是HTML新手,你会学到如何以CSS友好的方式进行基本页面构造.若你是H ...
- (转)常用CSS优化总结——网络性能与语法性能建议
原文地址:http://www.cnblogs.com/dolphinX/p/3508657.html 在前端面试中最常见的问题就是页面优化和缓存(貌似也是页面优化),被问了几次后心虚的不行,平然平时 ...
- 《CSS 揭秘》作者Lea Verou:我喜欢分享开源的行业文化
本文仅用于学习和交流,不用于商业目的.非商业转载请注明作译者.出处,并保留本文的原始链接:http://www.ituring.com.cn/art... 访谈嘉宾: Lea VerouW3C CSS ...
随机推荐
- 一个poi操作实现导出功能的类
public class ExportExcel<T> { public void exportExcel(Collection<T> dataset, OutputStrea ...
- 十六进制string转换UIColor -备用
- (UIColor *) colorWithHexString: (NSString *) stringToConvert { NSString *cString = [[stringToConve ...
- cpm效果介绍
浮层菜单 图片弹窗
- 自制单片机之十八……无线通讯模块NRF24L01+
(一)基础知识篇 今天刚调试好,先看图吧! 这张是AT89C2051控制NRF24L01+做发射调试. 看看NRF24L01细节吧! 这是LCD屏显示: AT89S52做接收测试: 正在接收时的显示: ...
- MyBatis里json型字段到Java类的映射
一.简介 我们在用MyBatis里,很多时间有这样一个需求:bean里有个属性是非基本数据类型,在DB存储时我们想存的是json格式的字符串,从DB拿出来时想直接映射成目标类型,也即json格式的字符 ...
- 【转】ubuntu中的Wine详解
原文网址:http://blog.csdn.net/iwtwiioi/article/details/10530561 什么是wine?(转自百度百科,具体看百科) wine,是一款优秀的Linux系 ...
- 【转】Math.Atan2 方法
原文网址:https://msdn.microsoft.com/zh-cn/library/system.math.atan2.aspx 返回正切值为两个指定数字的商的角度. 命名空间: Syste ...
- usaco5.5-Picture
离散化计算重叠矩形的周长. 称平行于x轴的边为横边,我们以横边为例,某一矩形中y坐标比较小的横边我们称为始边,另一边我们称为终边.用一条扫描线从下往上扫描,当扫到一条始边的时候,如果这条始边的正下方出 ...
- Mac系统升级到10.9(mavericks)时安装php扩展问题解决(转)
问题一: 执行执行 phpize 报错: grep: /usr/include/php/main/php.h: No such file or directory grep: /usr/include ...
- 关于bootstrap--表单(水平表单)
在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件:1.在<form>元素是使用类名“form-horizontal”.2.配合Bootstrap框架的网格系统.(网格布局 ...