转: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/121和http://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框架的了解,把本文这些问题介绍一下。近期工作很忙,更新起来可能会很慢,敬请期待吧!
转:css知多少(1)——我来问你来答的更多相关文章
- css知多少(1)——我来问你来答(转)
css知多少(1)——我来问你来答 1. 引言 各位前端或者伪前端(比如作者本人)的同志们,css对你们来说不是很陌生.比如我,在几年之前上大学的时候,给外面做网站就用css,而且必须用css.这 ...
- css知多少(12)——目录
<css知多少>系列就此完结了.常来光顾的朋友可能会觉得突然:css的知识点还有很多,怎么突然就完了,还没讲完呢?这样说是对的.不过凡事都有一个定位,如果盲目求多,定位模糊,那样就没有目的 ...
- 转:css知多少(12)——目录
<css知多少>系列就此完结了.常来光顾的朋友可能会觉得突然:css的知识点还有很多,怎么突然就完了,还没讲完呢?这样说是对的.不过凡事都有一个定位,如果盲目求多,定位模糊,那样就没有目的 ...
- css知多少(5)——选择器(转)
css知多少(5)——选择器 1. 引言 从本节开始,就进入本系列的第二个部分——css和html的结合——说白了就是选择器. CSS中定义了样式,如何将这些样式设置到相应的html节点上?就不得 ...
- css知多少之绝对定位小记
一.position定位常见属性 对于属性position来说,属性值有static/relative/absolute/fixed/inherit以下只对绝对定位position:absolute详 ...
- css知多少(6)——选择器的优先级
1. 引言 上一节<css知多少(5)——选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对<span>的 ...
- 看《css知多少》的一些总结
问题 1.有些浏览器不完全支持css3,现在可以用哪个工具去检测浏览器是否支持,以及支持哪些项? modernizr:检测浏览器对HTML5和CSS3特性(至于modernizr的介绍,可以看我另外一 ...
- css知多少——选择器的优先级
1. 引言 上一节<css知多少(5)--选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对<span>的 ...
- css知多少(3)——样式来源与层叠规则
上一节<css知多少(2)——学习css的思路>有几个人留言表示思路很好.继续期待,而且收到了9个赞,我还是比较欣慰的.没看过的朋友建议先去看看上一节. 这一节就开始实践上一节的思路! 1 ...
- css知多少(4)——解读浏览器默认样式
上一节<css知多少(3)——样式来源与层叠规则>介绍了样式的五种来源,咱们再通过一张图回顾一下. 对于上面的三层,咱们大概都比较熟悉了.下面的两层中,用户自定义样式一般也就是改一改字号大 ...
随机推荐
- NGINX安全
http://anyun.org/a/jishuguanzhu/WEBjishu/2017/0804/8721.html
- 第三条博客 你好 Java web!
今天周五了,明天就是周末!第一个周末就这样结束了 今天我学习了MyEclipse开发 Javaweb 程序,学的是最基础的那一部分 首先先创建了自己的项目,展开项目标签,编辑index.jsp. 我还 ...
- IIS8.0 部署WCF Services
今天在Win 8的IIS上部署WCF Services,访问SVC文件时出现找不到处理程序的错误,以前遇到这个问题时都是尝试通过注册asp.net的方式处理一下,但是在Win8下这招不灵了,出现如下提 ...
- A*寻路初探(转载)
启发式搜索:启发式搜索就是在状态空间中的搜索对每一个搜索的位置进行评估,得到最好的位置,再从这个位置进行搜索直到目标.这样可以省略大量无畏的搜索路径,提到了效率.在启发式搜索中,对位置的估价是十分重要 ...
- 基于ceph快照快速回滚openstack上的虚拟机
查看虚拟机ID 1 2 [root@node1 ~]# nova list --all | grep wyl | dc828fed-1c4f-4e5d-ae84-795a0e71eecc | wyl ...
- JAVA语言 第二周
放假第二周了,时间真快! 上一周配置好了环境变量,这一周就可以做一些测试了.对不同的内容分类进行了测试,包括写入.输出.变量·······还有很多.对于开学的试卷,在第一部分做的还行,第二部分就没什么 ...
- msf客户端渗透(三):提权、图形化payload
对普通权限session提权 生成一个木马 开启Apache服务 将木马上传网页 被攻击者从这个网页上获取到这个木马 攻击者开启msf侦听 当被攻击者双击这个木马文件时 攻击者就获取到一个sessio ...
- 【C++】cout未刷新缓冲区仍会输出的问题
众所周知,cout是一个流对象,管理一个缓冲区.当使用<<操作符输出字符串时,字符串不是直接被输出到屏幕上,而是首先被插入到该流的缓存(buffer)中.而只有当缓冲区被刷新时,字符串才会 ...
- Mysql 密码相关
MySQL5.6.6版本之后增加了密码强度验证插件validate_password,相关参数设置的较为严格 一.密码复杂度 1.密码复杂度配置文件:/etc/my.cnf (CentOS 7下) ...
- TOJ4757: 12345(数学)
传送门 时间限制(普通/Java):1000MS/3000MS 内存限制:65536KByte 描述 为了说明水题也不是那么好AC的,FD出了一个由数字1~5组成的题目,题意如下: 给定一个正 ...