浏览王福朋“CSS知多少”的笔记(2)

学习CSS的思路

1.浏览器是如何工作的

webkit内核渲染html和css的流程图:

浏览器中,html的解析是一条线,而css的解析是另一条线,二者会在一个点结合,形成最终的视图。

可见学习css的三个突破点:

  1. 浏览器如何加载和解析css——css的五个来源
  2. css和html如何结合起来——选择器
  3. css能控制哪些显示方式——盒模型、浮动、定位、背景、字体等
时间: 2024-12-23 09:30:39

浏览王福朋“CSS知多少”的笔记(2)的相关文章

【深入理解javascript】王福朋,厉害了word哥

学习前端有一段时间了,一直以来也没搞明白js中这个闭包到底是个什么东西,有时候看看别人的博客或者知乎的文章,大概上有个了解,可过一段时间也就忘了.偶然间有幸拜读了博客园-王福朋的这一系列文章<深入理解javascript原型和闭包(完结)>,读完只有一个字:服! 不但对闭包这个东西茅塞顿开,而且将原型.原型链甚至instance of这种原先只靠死记硬背的概念彻底搞明白了.真的是厉害了word哥.

看《css知多少》的一些总结

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

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

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

石述思 朱骏 吴晓波 美丽知性的李银 时寒冰 石述思 周可 司马南 闫肖锋 张宇权 彭澎 樊小纯 李善民 马光远 王福重

财经郎眼王晓林 财经郎眼樊小纯 财经郎眼张宇权 财经郎眼周可 财经郎眼石柏军 财经郎眼吉娅 财经郎眼周方 财经郎眼李善民 财经郎眼彭澎 财经郎眼闫肖锋 财经郎眼时寒冰 财经郎眼李银 财经郎眼司马南 财经郎眼朱骏 财经郎眼王牧笛 财经郎眼郎咸平 财经郎眼石述思 财经郎眼吴晓波 财经郎眼王福重 财经郎眼林宸 财经郎眼蒋昌建 石述思朱骏吴晓波美丽知性的李银时寒冰石述思周可司马南闫肖锋张宇权彭澎樊小纯李善民 马光远 王福重 黄晓南

css知多少(4)——解读浏览器默认样式

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

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

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

css知多少(12)——目录

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

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

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

《css知多少》系列完结

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