前端技能-css篇-2

这是css的第二篇,昨天想了一会要怎么去组织.

css还是比较有意思的一个玩意,说语言,其实谈不上.把css上升到语言层次的,是一些别的玩意.也是很有意思的一些东西,之后会给大家介绍一下.

昨天说到css的解析方式,估计有些人现在还不是很明白这里面的意思,没关系,之后会教大家如何去组织好自己css文件

这次要说的是非常重要的一个知识点,盒模型

一.标准盒模型

我们知道一个普通的标签,比如div,在css中设置显示时宽度或者高度相关的属性有border,margin,padding,width等属性.(注意是显示时)

每一个标签其实都可以算是一个盒子.只不过其对应的盒子的一些默认属性不一样.

有用过firebug的人适用寻找节点这个工具的时候,发现你们的选择器实际上个框,这个框显示的就是这个盒子.

下图是标准模式的盒模型

解释下几个常用的属性的意义

margin 外边距

border 边框大小

padding 内边距

width 盒子本身的宽度

height 盒子的高度

写个简单的例子让大家明白这个东西是怎么神奇的进行计算的

div#test{

  width:200px;

  height:200px;

  border:1px solid black;

  /**以下两个属性是可以简写的,具体怎么缩写,给大家去百度,同理还有font,background等**/

  padding:20px 20px 20px 20px;/**padding:20px;**/

  margin:20px 20px 20px 20px;/**margin:20px;**/

}

有兴趣可以把这个代码实践一下,看一下效果.

好了,我们来计算一下这个盒子

如果这个盒子不是孤零零的,还有一些其他的兄弟姐妹节点,你们看的效果会更加明显一点.

盒子最后在文档流里面是多大呢?  高:200+1+20+20=241px,宽:同理

margin跟padding是比较有意思的属性,以后会提到,他们的作用很大.比如上下垂直居中,左右居中.都是一些技巧.解决兼容中常用的,居中问题实际上有专门的属性.

写css其实跟写word文档差不多,只不过css要更加复杂一点.如果你写css的时候首先想到的word文档中是怎么组织文字的,你的语义化思维就比较明显了

css的技巧其实有很多,我这里其实也说不周全,具体的话,等css篇幅讲完,我会推介大家去看本书.

二.怪异模式

但凡制作web的人,比较头疼的问题是解决历史遗留下来的问题.上图还有一个是ie的解析模式

ie为什么把border跟padding计算到width里面是一个谜团

比如以上的代码,这个id为test的盒子呈现的高和宽就是200+20=220,比标准模式要差了很多

这也是为什么,前端人员在计算最终的表现高宽时候,青睐padding的原因,bug少.呵呵.

如果你们老板不要求你们ie6的显示精度的话,简单的过一下,不要太离谱就好了,毕竟ie6快要淘汰了,只是在中国,只能呵呵了.

很多会痛恨ie6,为什么呢?花费了他们大把的时间去调试可恶的样式问题.其实不然,只是他们不了解ie而已,有兴趣的人可以去百度下ie6/7 bug列表

其实怪异的模式一直存在在ie系列的浏览器里面,比如dtd声明错误,标签未闭合.等等问题,都会导致进入怪异模式.

说句老生常谈的话,不要责怪代码,也不要责怪浏览器,在其他的浏览器下正常,为什么就个把浏览器不正常.

以前我写的代码,在chrome下是标准的样子,换到firefox下就不一样了,像素少了.最后发现是自己代码写的有些问题.同理,要想写得代码所有浏览器都兼容,需要的不

       仅仅是耐心,还有一颗不抱怨的心.这个对于前端来说是非常重要的心理素质.如果css就把你搞奔溃了,以后做js,那一定会彻底的疯掉.

三.调试工具

firefox,chrome,opera都是有现代化的前端武器的,按F12,opera会有些不一样.C<>+S<>+i,如果我没记错的话,具体大家试试看吧.

关于ie的话,ie6是没有dev工具的,推介大家下载一个iedebugbar,比较好用.

高版本的ie自带了开发工具,其实ie的开发工具还是很强大的.前端精通一个调试工具还是很有必要的

另外firebug有个js版本的,firebug.lite 有兴趣的可以了解一下.手头没有现成工具的时候,可以凑合用下,只需要引用外网的js,如果外网也上不了,你只能下载下来,然后

配置一下去使用.

当然调试工具是非常多的,新版本的firefox里面集成了不少自带的,不比firebug差的工具.挑一个,好好的用就是了.

四.css变成语言

这块本来打算专门写一个文章的,但是想想不合适.原因呢,是这东西褒贬不一.算是课外的一些补充吧.有兴趣的可以看看.

less 跟sass 这两个,是css预处理器

看了以后,你一定会这么想,原来css也可以这么写.

一项技术的出现必然有其目的的,那这些工具诞生的意义在什么地方呢?

1.提高生产效率.

2.代码层次分明

3.模块化思想

这一方面,bootstrap做的很好.很多前端不会组织自己的模块代码,看看bootstrap,会很有启发

关于模块化的一些技巧,我会在结合html,css一起说到.

说这些玩意的缺点吧

1.会造成代码冗余.

2.部署会比较麻烦.

3.编译的时候可能会引起一些未知的错误,需要充分的测试.

4.相关的周边工具不齐全(比如自动提示,你所使用的ide的语法高亮).

ps:很多人青睐sublime text 2的原因在于这玩意的插件实在是多,而且写前端代码比较方便.以上这些工具的语言的高亮啥都有.呵呵.

而我就是notepad++,编写到这些玩意的时候,语法高亮设置为css.然后就没了.

还有,新手比较喜欢自动提示,敲个首字符就出来后面的字母,不能说是不好的习惯,只是ide的依赖会比较严重,给你个记事本你可能就写不来代码

有个朋友说很羡慕,一些人,拿到文本编辑器就可以啪啪啪一顿敲,想都不用想的.原因就在于,他们不是很依赖ide,还有个就是他们熟练了.知道怎么做是关键.工具是其次的.

五.关于设计

很多朋友说,前端需要很好的设计方面的思想,我觉得是不错的,但这块的要求确实不高的,因为设计终归是由设计人员去做的.写代码的同病就是喜欢简单.

比如我吧,我是红绿色盲,一样做了前端很久时间,关于颜色我取值,我比较依赖工具的取色.设计方面,我倾向更加简洁的设计.

前端的话,不需要关注设计方面的事情.有点流行性的审美观点,更多的是需要去思考这些看起来花里花俏的东西需要多少的基础知识去实现.怎么样实现是最好的,最快的,性能

最优秀的.

喜欢emacs,喜欢终端命令,喜欢跟命令打交道的前端,你们伤不起啊.呵呵.