css知多少(2)——学习css的思路

1. 一个段子

开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式。

记得之前看过一个段子,也可能是一件真事儿,这不重要。大体内容如下:一个香港的教授说:我们香港的大学和大陆的大学差的很远啊,大陆的大学连看门保安都懂得哲学,因为当你想要进入校园时,保安都会问你一个很哲学的问题“你是谁,你从哪里来,你到哪里去?”。

看完段子的第一反映肯定是很自嘲的笑了,笑了之后就忘了,该干嘛干嘛去了。

但是我觉得这句话确实有那么一点高达上的意思,虽然我不知道什么是哲学。“你是谁,你从哪里来,你到哪里去”,如果映射到我们这次CSS教程上,可以提这么几个问题:

  1. CSS是什么,如何深入理解,它和html是个怎样的关系;
  2. CSS有几种来源(5种来源);
  3. CSS要干什么事情,如何结合html实现的;

 

看过我其他教程的朋友都知道我的原则:我要写东西,必须又一个我觉得很特别而且很合理、高效的思路,如果没有我宁可不写。大部分写CSS的人一上来可能写选择器,但是我不会那样。

闲话不说。要想从根上了解这些问题,还是先从浏览器开始吧。

2. 浏览器是如何工作的

之前看过一篇文章,叫做《浏览器的工作原理:新式网络浏览器幕后揭秘》。文章言简意赅的介绍了浏览器的工作过程,web前端程序猿最好了解一下。在此另外推荐一本书《WebKit技术内幕》,笔者很早就关注这本书,已列入近期的读书计划。

文章中的内容暂且不详细提,我们先“断章取义”的只说CSS相关的部分。

上图是webkit内核渲染html和css的流程图。大家可以从图中看到,html的解析是一条线,css的解析是一条线,两者会在某一点结合,形成最终的视图。

如果我们以CSS为重点看,从上图中我们可以总结出学习CSS的三个突破点。

  1. 浏览器如何加载和解析CSS——CSS的5个来源;
  2. CSS和html如何结合起来——选择器;
  3. CSS能控制那些显示方式——盒子模式、浮动、定位、背景、字体等;

看到这里,不知道有没有朋友觉得很兴奋?因为我们在学习CSS之前,首先是分析浏览器如何加载、处理、使用CSS的,我们按照这个思路去写CSS的教程。而不是一上来就照本宣科的从id选择器开始。

我这段时间为何一直没有写博客,其实是在冥思苦想一个更加合理、高效的思路和框架。我如果写出来的东西和别人的一样,那我自己也觉得没意思。

本系列文章也是按照这个思路和框架,一步一步展开的。

3. CSS的加载过程

CSS——Cascading Style Sheets——层叠样式表。“样式表”大家比较好理解,那何为“层叠”呢?从字面意思来看,层叠肯定是需要多层叠加起来。而这个“多层CSS”到底有几层,每一层是什么,我们程序猿用到的将是哪些层?这几个问题将是我们讨论的重点。

另外,这么多层次叠加,如果出现冲突怎么处理,以哪个为准?这也是我们讨论的重点。

最后,在这些层次中有一个“浏览器默认样式”层,即浏览器默认的各个html元素的样式。这次我们像浏览器这位“机器人”学习一下,看看它写出来的css能给我们什么帮助。

4. CSS和HTML的结合

CSS如何与html结合呢——当然是通过选择器。CSS提供了多种多样的选择器类型,而且每个级别都在不断的增加新的选择器类型,使得选择器更加灵活易用。本系列将拿出一篇文章专门讲解选择器。

聪明的人类也通过css提供的选择器在其他临近的方面开疆拓土,例如jquery,zen-coding。

对css选择器来说,有一个很重要的话题——级别。在大部分web前端面试题中,你都会看到css选择器级别的判断问题。《css设计指南》书中给出了一个概念——特指度,而且给出了计算公式和计算规则,还给出了一个简单的背诵口诀。想的真周到。

最后,与选择器关联密切的还有伪类和伪元素,我们也将拿出一篇文章专门讲解伪类和伪元素,以及它们最典型的用法。

5. 页面呈现

页面呈现可以分为两类——文字,块。

  1. 针对文字来说,我们可以设置字体、字号、加粗、斜体、背景色等等;
  2. 对于块来说情况比较多,有盒子模型、浮动、定位、display、背景等;

本系列会拿出很大的篇幅去讲解其中的基础知识,以及他们的一些重点应用。

6. 布局

布局是css的重头戏,每个系统的布局都有其各自的特点。无好无坏,肯定是各有优缺点,不妨拿出几个比较典型的例子来一起分析一下。例如:

  1.  经典三列布局
  2. Bootstrap栅格布局
  3. 百度首页布局
  4. 微博布局
  5. 人人网布局
  6. 瀑布流布局
  7.  ……

转载:http://www.cnblogs.com/wangfupeng1988/p/4276321.html

css知多少(1)——我来问你来答

01. 有些浏览器不完全支持css3,现在可以用哪个工具去检测浏览器是否支持,以及支持哪些项?

提示:Mo****zr

02. 常用的html标签,它们的display属性一般默认为block和inline。有哪些常用标签的display不是block和inline,这些标签显示的时候和block/inline有何区别?

提示:table,input, textarea

03. 是否用过@import?

  (比较简单)

04. 一个表格的第一行显示红色背景,最后一行显示蓝色背景,中间行使用灰色/白色间隔的背景,如何写?

提示:结构化伪类(比较简单)

05. 伪元素 ::before、::after 是否用过?都是在哪些地方用的?

提示:清除浮动、为一个div增加一个“三角”  重要

06. css——层叠样式表,其中的“层叠”该如何理解?  重要 

提示:层叠,即一层一层叠加起来,关键是知道一共有几层,每一层都是什么

07. 对“特指度(specificity)”了解多少,知道“I-C-E”的计算规则吗?  重要 

提示:参考http://www.cnblogs.com/netlyf/archive/2009/06/19/1506427.html

08. 特指度理解不是很麻烦,关键是分析多个css选择符和计算麻烦。有一个简单的解决方案,四句口诀,叫做“查理版简单层叠要点”,是否了解?  重要 

提示:例如,“包含ID的选择符要胜过包含类的选择符…”

09. 搜索“浏览器默认样式”,找到它,打开看看,里面是浏览器默认的所有样式,你是否都能看得懂。 重要 

提示:例如 display:table 和 display:block 有何区别?

10. 在你开发的系统的第一个css文件的第一行,就要写上 * {margin:0; padding:0} ,这是为何?

提示:浏览器兼容性(比较简单)

11. 样式 p{margin-top:50px; margin-bottom:30px;} 将会导致p之间的垂直距离是多少?

提示:垂直外边距……水平外边距……——比较简单的基础知识

12. “盒子模型”大家都了解了(不知道赶紧去恶补!!),盒子模型的width其实是指内容的宽度,不包括padding、border、margin。其实这样对我们做css布局是很不利的,有什么方法可以让width是全部的宽度?  重要 

提示:box-sizing(注意IE低版本的兼容性)

13. float的一些影响会让我们经常哭笑不得(特别是初学者),其实了解了float的设计初衷,也许你就会理解这些东西。float的设计初衷是什么?

提示:就简单的一句话……

14. float具有“包裹性”——例如:<p>abc</p> 和 <p style=’float:left’>abc</p> 两者的宽度是不一样的,不信可以为 p 加上背景色试试。是否理解这种“包裹性”?试着想想,还有哪些元素(或css属性)也有这种“包裹性”?  重要 

提示:和第13问题有密切关系

15. float还有一个表象是“破坏性”,它会导致父元素高度塌陷,这个大家应该都知道吧?那么这是为何呢?另外,还有哪个css属性,也导致这种“破坏性”   重要 

提示:float和absolute都将导致元素脱离文档流

(针对13、14、15问题,可以参考教程http://www.imooc.com/learn/121http://www.imooc.com/learn/192,讲的很好,只是讲师的声音很有“磁性”,要忍耐住)

16. css清除浮动有三种方法,是否知道。你平时是怎么清除浮动的?业内最常用的经典清除浮动样式是什么? 重要 

提示:搜索“clearfix”

17. 相对定位relative如何理解,它和绝对定位absolute的最根本区别是什么?

提示:一个在文档流内,一个在文档流外

18. “定位上下文”是否知道? 重要 

19. 经典的网页三列布局如何实现?如果不考虑IE6、7,最好的实现多列布局的方式是什么? 重要 

提示:table-cell

20. 是否用过inline-block,IE6、7如何兼容?

提示:比较简单,百度即可

转载:http://www.cnblogs.com/wangfupeng1988/p/4237249.html