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

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

1. 引言

  各位前端或者伪前端(比如作者本人)的同志们,css对你们来说不是很陌生。比如我,在几年之前上大学的时候,给外面做网站就用css,而且必须用css。这样算下来也得六年多了,有些功能可能轻车熟路,有些功能可能需要上网查查,看似能应付得了工作的事情——我之前也是(现在工作上不做开发了,只是业余还写代码)。

  世界上没有绝对简单的东西,只是我们认为它是简单的。就像我们公司现在的开发情况,开发的大环境刚刚转入B/S,开发领导以前都是用.net做C/S的,在我看来,他们就觉得js、css就是那么回事儿,没多高深。但是我还是抱着敬畏的态度,买了一本《CSS设计指南(第三版)》,不管自己会的,还是不会的,我都统统看一遍。书邮回来之后,我花了三个晚上看完了。我有个习惯,就是做一件事情一定要又一个结果,不能觉得自己脑子里明白了就算了,一定要写出来,甚至做出例子来才算完。于是乎,就写几篇博客呗。利己利人。

  下面我把在看书过程中遇到的自己认为比较重要的(掌握不牢固)或者之前不懂的,都先列出来,出几个题目,各位看官可以试着想想。如果您都会了,那您基础很牢固,没得说;如果你有些不会的,着急你就赶紧自己查查答案,不着急你就等着我后面的博客介绍。

  闲话说了很多,现在开始!

2. 问题

  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如何兼容?

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

3. 结束

  当前就总结了这么多问题,大家可以对照着问题想想答案。如果你觉得还有写比较重要的知识,可以给我留言,我将会考虑加入进来。

  另外,接下来我将写一个关于css重点知识的简短的系列文章,以及结合我做过的wangEditor富文本框以及对bootstrap框架的了解,把本文这些问题介绍一下。近期工作很忙,更新起来可能会很慢,敬请期待吧!

-------------------------------------------------------------------------------------------------------------

欢迎关注我的微博

也欢迎关注我的教程:

从设计到模式深入理解javascript原型和闭包系列》《微软petshop4.0源码解读视频》《json2.js源码解读视频

-------------------------------------------------------------------------------------------------------------

时间: 2024-08-03 12:08:56

css知多少(1)——我来问你来答的相关文章

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

原文:css知多少(2)--学习css的思路 两周之前写过该系列的第一篇,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程.现在初有成效,就开更吧. 1. 一个段子 开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式.        记得之前看过一个段子,也可能是一件真事儿,这不重要.大体内容如下:一个香港的教授说:我们香港的大学和大陆的大学差的很远啊,大陆的大学连看门保安都懂得哲学,因为当你想要进入校园时,保安都会问你一个很哲学的问题"你是谁,你从哪里来,你到哪里

css知多少(5)——选择器

原文:css知多少(5)--选择器 1. 引言 从本节开始,就进入本系列的第二个部分--css和html的结合--说白了就是选择器. CSS中定义了样式,如何将这些样式设置到相应的html节点上?就不得不通过选择器.让浏览器知道css选择了哪一个dom节点,浏览器就会乖乖的把相应的样式渲染成视图. 至于css能把页面渲染成什么样子,这是本系列的第三部分. 第一部分讲css样式的加载和层叠,第二部分讲选择器以及选择器的等级,第三部分讲呈现的各种样式(背景.字体.定位.浮动等).这样一个思路,也正式

css知多少(8)——float上篇

原文:css知多少(8)--float上篇 1. 引言 对于我们所有的web前端开发人员,float是或者曾经一度是你最熟悉的陌生人--你离不开它,却整天承受着它所带给你的各种痛苦,你以为它很简单就那么一点知识,但却驾驭不了它各种奇怪的现象. 这就是我们又爱又恨的--float.所以,系统的学一学float是非常非常重要的.除了看书和看博客文章之外,我推荐大家去看一个奇葩(声音很有磁性,你懂得)录制的教程<CSS深入理解之float浮动>,讲的很好很透彻. 2. 重新认识float 2.1. 

css知多少(3)——样式来源与层叠规则

原文:css知多少(3)--样式来源与层叠规则 上一节<css知多少(2)--学习css的思路>有几个人留言表示思路很好.继续期待,而且收到了9个赞,我还是比较欣慰的.没看过的朋友建议先去看看上一节. 这一节就开始实践上一节的思路! 1. "层叠"的概念 CSS--层叠样式表,其中的"层叠"是什么意思呢?层叠就是浏览器对多个样式来源进行叠加,最终确定结果的过程.举一个简单的例子:          上图中有两个样式来源,第一个是引用的css1.css,第

css知多少(10)——display

原文:css知多少(10)--display 1. 引言 网页的所有元素,除了"块"就是"流",而且"流"都是包含在"块"里面的(最外层的body就是一个"块").在本系列一开始讲<浏览器默认样式>的时候,大家也都看到了浏览器默认样式中规定了html元素哪些属于"块"(剩下的就是"流").这部分知识非常重要也非常基础,因此在所有的前端面试题中,都会问道哪些

css知多少(7)——盒子模型

原文:css知多少(7)--盒子模型 1. 引言 从这一节开始,我们就进入本系列的第三部分--css呈现.本部分将描述css在页面的几种布局和呈现的特性.包括两类:文字.块. 第一类--文字.这部分相对比较简单一些,例如设置字号.字体.颜色.背景色.是否加粗等.重点的地方在于设置字体.设置行高.文字相关的距离都用相对值,这些东西在<css知多少(4)--解读浏览器默认样式>那一节已经说过了.另外还有一个重点,就是web端最流行的字体库fontAwesome,关于它我之前有一篇文章专门讲过,请参

css知多少(6)——选择器的优先级

原文:css知多少(6)--选择器的优先级 1. 引言 上一节<css知多少(5)--选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对<span>的,而且两个设置的颜色不一样,这里的<span>到底听从谁的命令? 上面还是比较简单的,下面在来一个复杂的: 上图中的<li>该显示成什么颜色呢? 2. 特指度 要解决以上问题,我们需要引入一个概念--特指度(specificity).特指度表

css知多少(9)——float下篇

原文:css知多少(9)--float下篇 float内容比较多,咱们分上.下两篇来介绍,上篇已经写完,这是下篇.建议大家先把上篇看了,再来看下文,精彩内容不要掠过啊. 1. 清除float <上篇>中我们提到,float具有"破坏性",它会导致父元素"坍塌",这将不是所要看到的.如何去避免float带来的这种影响呢(也就是我们常说的"清除浮动") ?方法有很多种,我在这里介绍4中供大家参考,大家可根据实际情况来选择. 先介绍两个比较

css知多少(11)——position

原文:css知多少(11)--position 1. 引言 本文将用一篇文章介绍position(定位),在学习position之前,我们应该去思考一个问题:什么情况下我们需要定位?如果没有定位将无法满足我们怎样的需求?我们要知道,被人类创造出来的每一个知识,都有它的用途,都要解决一些之前遇到的问题. 如果没有定位,我们做出来的网页将会是按部就班的自上而下.自左而右的平铺在浏览器上,外加通过margin和padding调整一下间距,还有就是通过float来浮动某些元素.做一些简单的网页这样就够了