css知多少(10)——display   1. 引言 网页的所有元素,除了“块”就是“流”,而且“流”都是包含在“块”里面的(最外层的body就是一个“块”).在本系列一开始讲<浏览器默认样式>的时候,大家也都看到了浏览器默认样式中规定了html元素哪些属于“块”(剩下的就是“流”).这部分知识非常重要也非常基础,因此在所有的前端面试题中,都会问道哪些元素是“块”哪些元素是“流”. 其实,这部分知识都囊括在display这个样式设置中.在网上查找出display所有的属性,你会发现它有很多,…

<css知多少>系列就此完结了.常来光顾的朋友可能会觉得突然:css的知识点还有很多,怎么突然就完了,还没讲完呢?这样说是对的.不过凡事都有一个定位,如果盲目求多,定位模糊,那样就没有目的没有方向了. 我的身份不是前端开发人员,而是产品经理.我规划的产品是一款项目管理软件,我也是一个PMP.我深知一个项目一定要有目标.范围.进度和质量要求.一旦达到,项目即可结束,准备下一个项目的启动.我接下来,要继续优化我的富文本编辑器wangEditor.还要把我之前写的<深入理解javascript…

问题 1.有些浏览器不完全支持css3,现在可以用哪个工具去检测浏览器是否支持,以及支持哪些项? modernizr:检测浏览器对HTML5和CSS3特性(至于modernizr的介绍,可以看我另外一篇博文HTML5系列四(特征检测.Modernizr.js的相关介绍)) 2.常用的html标签,它们的display属性一般默认为block和inline.有哪些常用标签的display不是block和inline,这些标签显示的时候和block/inline有何区别? 具体display属性值有…

上一节<css知多少(3)——样式来源与层叠规则>介绍了样式的五种来源,咱们再通过一张图回顾一下. 对于上面的三层,咱们大概都比较熟悉了.下面的两层中,用户自定义样式一般也就是改一改字号大小和字体样式,也没甚好说的.而最有的说的就是浏览器的默认样式. 不同浏览器的默认样式多少有些区别,特别是老版本的浏览器之间,现在高级浏览器越来越向统一的标准靠拢,对前端程序猿来说是一件好事情.虽然有些许差异,但是绝大部分还是相同的,我先把代码粘贴出来 ,具体的解读咱们慢慢道来(只说重点,比较容易的或者不常用的…

<css知多少>系列就此完结了.常来光顾的朋友可能会觉得突然:css的知识点还有很多,怎么突然就完了,还没讲完呢?这样说是对的.不过凡事都有一个定位,如果盲目求多,定位模糊,那样就没有目的没有方向了. 我的身份不是前端开发人员,而是产品经理.我规划的产品是一款项目管理软件,我也是一个PMP.我深知一个项目一定要有目标.范围.进度和质量要求.一旦达到,项目即可结束,准备下一个项目的启动.我接下来,要继续优化我的富文本编辑器wangEditor.还要把我之前写的<深入理解javascript…

css知多少(4)——解读浏览器默认样式   上一节<css知多少(3)——样式来源与层叠规则>介绍了样式的五种来源,咱们再通过一张图回顾一下. 对于上面的三层,咱们大概都比较熟悉了.下面的两层中,用户自定义样式一般也就是改一改字号大小和字体样式,也没甚好说的.而最有的说的就是浏览器的默认样式. 不同浏览器的默认样式多少有些区别,特别是老版本的浏览器之间,现在高级浏览器越来越向统一的标准靠拢,对前端程序猿来说是一件好事情.虽然有些许差异,但是绝大部分还是相同的,我先把代码粘贴出来 ,具体的解读…

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

css知多少(1)——我来问你来答   1. 引言 各位前端或者伪前端(比如作者本人)的同志们,css对你们来说不是很陌生.比如我,在几年之前上大学的时候,给外面做网站就用css,而且必须用css.这样算下来也得六年多了,有些功能可能轻车熟路,有些功能可能需要上网查查,看似能应付得了工作的事情——我之前也是(现在工作上不做开发了,只是业余还写代码). 世界上没有绝对简单的东西,只是我们认为它是简单的.就像我们公司现在的开发情况,开发的大环境刚刚转入B/S,开发领导以前都是用.net做C/S的,在…

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

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