摘要：如果我们以为重点看，从上图中我们可以总结出学习的三个突破点。这次我们向浏览器这位机器人学习一下，看看它写出来的能给我们什么帮助。对选择器来说，有一个很重要的话题级别。布局布局是的重头戏，每个系统的布局都有其各自的特点。
众所周知，css的运行环境是浏览器，那么我们有必要先来认识下浏览器。
1.浏览器是怎样工作的有篇文章叫《浏览器的工作原理：新式网络浏览器幕后揭秘》，文中言简意赅的介绍了浏览器的工作过程，我们先将css拎出来说说。
上图是webkit内核渲染html和css的流程图。大家可以从图中看到，html的解析是一条线，css的解析是一条线，两者会在某一点结合，形成最终的视图。
如果我们以CSS为重点看，从上图中我们可以总结出学习CSS的三个突破点。
浏览器如何加载和解析CSS——CSS的5个来源；
CSS和html如何结合起来——选择器；
CSS能控制哪些显示方式——盒子模式、浮动、定位、背景、字体等；
本系列文章也是按照这个思路和框架，一步一步展开的。
2.css的加载过程css(Cascading Style Sheets)即层叠样式表。“样式表”大家比较好理解，那何为“层叠”呢？从字面意思来看，层叠肯定是需要多层叠加起来。而这个“多层CSS”到底有几层，每一层是什么，我们程序猿用到的将是哪些层？这几个问题将是我们讨论的重点。
另外，这么多层次叠加，如果出现冲突怎么处理，以哪个为准？这也是我们讨论的重点。
最后，在这些层次中有一个“浏览器默认样式”层，即浏览器默认的各个html元素的样式。这次我们向浏览器这位“机器人”学习一下，看看它写出来的css能给我们什么帮助。
3.css与html的结合CSS如何与html结合呢——当然是通过选择器。CSS提供了多种多样的选择器类型，而且每个级别都在不断的增加新的选择器类型，使得选择器更加灵活易用。本系列将拿出一篇文章专门讲解选择器。
聪明的人类也通过css提供的选择器在其他临近的方面开疆拓土，例如jquery，zen-coding。
对css选择器来说，有一个很重要的话题——级别。在大部分web前端面试题中，你都会看到css选择器级别的判断问题。《css设计指南》书中给出了一个概念——特指度，而且给出了计算公式和计算规则，还给出了一个简单的背诵口诀。想的真周到。
最后，与选择器关联密切的还有伪类和伪元素，我们也将拿出一篇文章专门讲解伪类和伪元素，以及它们最典型的用法。
4.页面呈现页面呈现可以分为两类——文字，块。
针对文字来说，我们可以设置字体、字号、加粗、斜体、背景色等等；
对于块来说情况比较多，有盒子模型、浮动、定位、display、背景等；
本系列会拿出很大的篇幅去讲解其中的基础知识，以及他们的一些重点应用。
5.布局布局是css的重头戏，每个系统的布局都有其各自的特点。无好无坏，肯定是各有优缺点，不妨拿出几个比较典型的例子来一起分析一下。例如：
经典三列布局
Bootstrap栅格布局
百度首页布局
微博布局
人人网布局
瀑布流布局
... ...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112118.html
摘要：本系列文章重拾主要参考王福朋知多少，结合自己的理解和学习需要，修改或添加了一些内容，难免有失偏颇，仅供自我学习参考之用。 工作中或多或少的写一些css，但总感觉掌握的不够扎实，时而需要查阅一下知识点。我想，一方面跟缺少科班出身式的系统学习有关，另一方面也苦于一直未寻觅到一套合我胃口教程。直到我读到了王福朋css知多少系列文章，使我有了重新系统学习css的想法。 本系列文章（重拾css）...
摘要：摘自设计指南样式来源上文中提到，之所以有层叠的概念，是因为有多个样式来源。优先级相同条件下例如都来自引用样式，覆盖的默认规则是后者覆盖前者，但是有一个特殊情况，其实优先级最高。 这一节就开始实践上一节的思路！ 1.层叠的概念 简言之，层叠就是浏览器对多个样式来源进行叠加，最终确定结果的过程。举一个简单的例子： showImg(https://segmentfault.com/img/b...
摘要：然而学习布局，你只要学习几个手机端页面自适应解决方案布局进阶版附源码示例前端掘金一年前笔者写了一篇手机端页面自适应解决方案布局，意外受到很多朋友的关注和喜欢。 十分钟学会 Fiddler - 后端 - 掘金一.Fiddler介绍 Fiddler是一个http抓包改包工具，fiddle英文中有欺骗、伪造之意，与wireshark相比它更轻量级，上手简单，因为只能抓http和https数据...
摘要：和不同，其他三个元素的位置重新排列了。只要元素会脱离文档结构，它就会产生破坏性，导致父元素坍塌。的绝对定位元素的定位永远是相对于浏览器边界的，和其他元素没有关系。 1.引言 在学习position之前，我们应该去思考一个问题：什么情况下我们需要定位？如果没有定位将无法满足我们怎样的需求？我们要知道，被人类创造出来的每一个知识，都有它的用途，都要解决一些之前遇到的问题。 如果没有定位，我...
摘要：本系列将稍微深入探讨一下那个貌似没什么好玩的魔法堂重拾之解构魔法堂重拾之图片作边框魔法堂重拾之不仅仅是圆角魔法堂重拾之更广阔的遐想解构说起我们自然会想起，而由条紧紧包裹着的边组成，所以的最小操作单元是。 前言 当CSS3推出border-radius属性时我们是那么欣喜若狂啊，一想到终于不用再添加额外元素来模拟圆角了，但发现border-radius还分水平半径和垂直半径，然后又发现...
阅读 3255·2021-11-16 11:45
阅读 2614·2021-09-22 15:23
阅读 540·2021-07-30 14:58
阅读 440·2019-08-30 15:54
阅读 2217·2019-08-29 16:19
阅读 2995·2019-08-29 12:45
阅读 918·2019-08-23 17:57
阅读 1773·2019-08-23 17:54
