web前端开发初学者如何科学的快速学会CSS？

　　很多前端初学者对 CSS 表示很头大，咨询w3cschool小狮妹＂如何学习 CSS ＂。总结发现一部分原因是由于我们对 CSS 没有很好的认识。虽然 CSS 只是前端工作的一小部分，但是它直接关系到网页最终显示效果，很值得我们去学习。
　　本文主要概述 CSS 的一些常见基础知识，帮助大家更好的理解 CSS 。
　　什么是 CSS？
　　CSS（层叠样式表）——英文 Cascading Style Sheets 的缩写，是一种计算机标记语言，用来表现 HTML （标准通用标记语言的一个应用）或 XML （标准通用标记语言的一个子集）等文件样式。CSS 知识点太多记不住？
　　CSS 知识点确实很多，我们只需要学习并理解它的基础知识和原理，需要用到的时候再到w3cschool 查询CSS参考手册 ，不需要学习完所有的属性和值，但是学习 CSS 要有一些前端基础，如果没有这些基础，您将很难理解它，你可以先在W3Cschool上学习HTML 。 这样可以节省大量时间、少走很多弯路。认识选择器（SELECTORS）
　　HTML 页面中的元素是通过 CSS 选择器 来进行控制的，可以实现一对一，一对多或者多对一的控制，学习 CSS 首先要掌握的就是选择器。一般使用 class 选择器（程序中称＂类选择器＂），或直接在 body   中使用 HTML 元素(elements) （指的是从开始标签(start tag  )到结束标签(end tag  )的所有代码。）来设置样式(Style)，但是一些更复杂的操作就需要更高级的选择器来实现了，如一些对象直接位于元素之后，或者是要选择表格中的奇数行，就需要根据元素在文档中的位置来选择元素。
　　这些选择器属于 CSS3 规范的一部分（你可能听说过它们被称为 CSS3 选择器）具有出色的浏览器支持。 有关可以使用的各种选择器的详细信息，请参阅W3Cschool的 CSS 选择器 。
　　有些选择器的行为就好像你已经将＂类＂（ class  ） 应用于文档中的某些内容一样。 例如p:first-child  就像你在第一个p  元素中添加了一个＂类＂一样，这些被称为＂伪对象选择符＂(Pseudo-Element   Selectors)。 ＂伪对象选择符＂的作用类似于动态插入元素，例如::first-line  的作用与用span   包裹第一行文本类似。但是，如果该行的长度发生变化，它将重新应用，如果插入该元素，就不会出现这种情况。 现在你可能会觉得这些选择器很复杂， 下面示例中是一个用伪类(Pseudo-class   ) 的伪元素(Pseudo Element  ) 例子。 我们使用 :first-child   伪类定位第一个 p   元素，然后 ::first-line   选择器选择该元素的第一行，就好像在第一行周围添加了一个  以使其变粗并更改颜色一样。
　　HTML代码：               
大学之道，在明明德，在亲民，在止于至善。     
知止而后有定，定而后能静，静而后能安，安而后能虑，虑而后能得。物有本末，事有终始。知所先后，则近道矣。     
古之欲明明德于天下者，先治其国；欲治其国者，先齐其家；欲齐其家者，先修其身；欲修其身者，先正其心；欲正其心者，先诚其意；欲诚其意者，先致其知。致知在格物。物格而后知至，知至而后意诚，意诚而后心正，心正而后身修，身修而后家齐，家齐而后国治，国治而后天下平。自天子以至于庶人，壹是皆以修身为本。 
其本乱而末治者，否矣。其所厚者薄，而其所薄者厚，未之有也。   
　　CSS代码：body {   padding: 20px;   font: 1em Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,arial,sans-serif;   background-color: wheat; }   * {box-sizing: border-box;}   p {   margin: 0 0 1.7em 0; }   .container {     border: 1px solid rgb(254,106,0);   border-radius: .5em;   padding: 20px;   column-count: 1; }   .container p:first-child::first-line {   font-weight: bold;   color: rgb(254,106,0); }
　　效果：
　　继承和层叠（INHERITANCE AND THE CASCADE）
　　层叠定义了一个元素应用了多个样式规则时，应该哪个规则优先应用。 如果你无法理解为什么某些 CSS 似乎没有应用的情况，那可能是层叠没有运用好。 层叠与继承紧密相关，继承定义了子元素可以继承父元素的样式属性。 它还与特异性有关，不同的选择器具有不同的特异性，当有几个选择器可以应用于一个元素时，继承可以决定应用哪个规则。
　　注意： 为了理解这些内容，建议阅读 W3Cschool 中的 CSS 样式级联。
　　如果你正在尝试将一些 CSS 应用于一个元素，那么你的浏览器开发者工具（DevTools）是最好的选择。看看下面这个例子，我用元素选择器 h1   将 h1   标题设置为橙色。同时，我也使用类选择器将h1   标题设置为紫色。 由于类的优先级更高，因此h1  标题是紫色的。 在开发者工具中，您可以看到元素选择器被划掉了，因为它没有被应用。 一旦你看到浏览器正在获取你的 CSS（但其他东西已经推翻了它），那么你可以开始找出原因了。
　　HTML代码：               
大学
     
大学之道，在明明德，在亲民，在止于至善。     
知止而后有定，定而后能静，静而后能安，安而后能虑，虑而后能得。物有本末，事有终始。知所先后，则近道矣。     
古之欲明明德于天下者，先治其国；欲治其国者，先齐其家；欲齐其家者，先修其身；欲修其身者，先正其心；欲正其心者，先诚其意；欲诚其意者，先致其知。致知在格物。物格而后知至，知至而后意诚，意诚而后心正，心正而后身修，身修而后家齐，家齐而后国治，国治而后天下平。自天子以至于庶人，壹是皆以修身为本。 
其本乱而末治者，否矣。其所厚者薄，而其所薄者厚，未之有也。   
　　CSS代码：body {   padding: 20px;   font: 1em Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,arial,sans-serif;   background-color: wheat; }   * {box-sizing: border-box;}   p {   margin: 0 0 1.7em 0; }   .container {     border: 1px solid rgb(254,106,0);   border-radius: .5em;   padding: 20px;   column-count: 1; }   .greatlearning {   color: rebeccapurple; }   h1 {   color: orange; }
　　效果：
　　盒模型（Box Model ）
　　css将html元素看作一个个盒子，来设计和布局。盒子有它们的属性，盒子之间也可嵌套。标准的 CSS 盒模型 (CSS Box Model) 采用你给定元素的宽度，然后将内边框和边框添加到该宽度上——这意味着元素占用的空间大于给定的宽度。属性：margin、padding、border、content根据display属性值的不同，如，block\inline-block\inline（默认），可设置为块模型\内联块模型\内联模型分类：标准模型、IE模型（替代盒子模型）
　　除了标准盒子模型外还有一个盒子模型叫 IE 模型（替代盒子模型），盒子的宽度是页面上可见框的宽度，因此内容区域的宽度是该宽度减去填充和边框的宽度。详细请查阅W3Cschool上的CSS Box Model (盒子模型) 。
　　下面演示两个盒子， 两者的宽度均为200像素，边框为1像素，内边距为20像素。 第一个框使用标准盒子模型，因此占用总宽度为 242 像素，第二个框使用替代盒子模型，因此实际上是 200 像素宽。
　　HTML代码：               我是标准盒子模型。         我是替代盒子模型。   
　　CSS代码：body {   padding: 20px;   font: 1em Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,arial,sans-serif;   background-color: wheat; }   p {   margin: 0 0 1em 0; }   .box {     border: 1px solid rgb(254,106,0);   border-radius: .5em;   padding: 20px;   width: 200px;   margin-bottom: 2em; }   .box2 {   box-sizing: border-box; }
　　效果：
　　浏览器开发者工具(DevTools)可以再次帮助你了解正在使用的盒子模型。 在下图中，我使用火狐浏览器的开发者工具使用默认的 content-box  盒模型工具。 工具告诉我这是正在使用的盒模型，我可以看到大小以及如何将边框和内边框添加到指定的宽度。
　　DevTools可帮助您了解为什么盒具有一定大小以及所使用的盒模型
　　注意： 在 IE8 以前，如果想要兼容的话，就需要用 W3C 标准，声明。在 IE8+ ，浏览器中使用哪个盒模型可以由 box-sizing 控制，默认值为 content-box，即标准盒模型。
　　在 W3Cschool的 CSS Box Model 中，有关于盒模型、盒子尺寸详细说明。常规流（normal flow）
　　也有人翻译为＂文档流＂，具体叫什么名字不重要，我们理解它的原理就行了。标题和段落将以新行开始，单词显示为句子，并且它们之间只有一个空格。用于格式化的标签（例如em  ）不会破坏句子流。此内容以＂常规流(normal flow  )＂或＂块流布局(Block Flow Layout  )＂显示。内容的每个部分都被描述为＂在流中(in flow  )＂；它知道其余内容，因此不会重叠。
　　我们要接受这种行为，学起来才会变得更加轻松。这是为什么从一个正确标记的HTML文档开始很有意义的原因之一，由于浏览器遵守常规流和内置样式表，你的内容从可读的地方开始。格式化上下文（FORMATTING CONTEXTS）
　　一旦文档的内容处于正常流程中，您可能希望更改其中一些内容的外观。 你可以通过更改元素的格式上下文来完成此操作。 举个一个非常简单的示例，如果你希望所有段落连在一起而不是从新行开始，你可以设置 p   元素的样式属性display:inline   ，将 p   元素由块级元素变成内联元素。
　　本质上，格式化上下文定义了外部和内部类型。外部控制元素与页面上其他元素的行为，内部控制子元素的外观。例如，当你设置 display:flex   ，你在设置外部为块格式化上下文，设置子元素为 flex 格式化上下文。
　　注意： 最新版本的 Display 规范改变了  display   的值，显式声明外部和内部的类型。因此，将你可能会声明  display:block flex;   （外部为  block  ，内部为  flex  ）。
　　在W3Cschool的 CSS display显示 上阅读更多关于 display  的信息。在流中或脱离流（BEING IN OR OUT OF FLOW）
　　CSS 中的元素被描述为＂在流中(in flow  )＂或＂脱离流(out of flow  )＂。流中的元素被赋予空间，并且空间被流中的其他元素所影响。 如果通过浮动或定位元素使元素脱离流，则该元素的空间将不再受到其他流元素的影响。
　　对于绝对定位的元素，是最明显的。 如果你设置一个元素 position: absolute   ，该元素会从流中脱离，你需要确保这个元素不会与流中的元素重叠，且不影响你布局的其他部分的可读性。
　　HTML代码：                   
子曰：＂学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知而不愠，不亦君子乎？     
有子曰:＂其为人也孝弟而好犯上者，鲜矣；不好犯上而好作乱者，未之有也。君子务本，本立而道生。孝弟也者，其为仁之本与!＂     
子曰:＂巧言令色，鲜矣仁！＂     
曾子曰＂吾日三省吾身:为人谋而不忠乎?与朋友交而不信乎?传不习乎?＂     
子曰:＂道千乘之国,敬事而信，节用而爱人，使民以时。＂     
子曰：＂弟子入则孝，出则弟，谨而信，泛爱众，而亲仁。行有余力，则以学文。＂     
子夏曰：＂贤贤易色；事父母，能竭其力；事君，能致其身；与朋友交，言而有信。虽曰未学，吾必谓之学矣。＂     
子曰：＂君子不重则不威，学则不固。主忠信，无友不如己者，过则勿惮改。＂     
曾子曰：＂慎终追远，民德归厚矣。＂     
子禽问于子贡曰：＂夫子至于是邦也，必闻其政，求之与，抑与之与？＂子贡曰：＂夫子温、良、恭、俭、让以得之。夫子之求之也，其诸异乎人之求之与？＂     
子曰：＂父在，观其志。父没，观其行；三年无改于父之道，可谓孝矣。＂     
有子曰：＂礼之用，和为贵。先王之道，斯为美，小大由之。有所不行，知和而和，不以礼节之，亦不可行也。＂     
有子曰：＂信近于义，言可复也。恭近于礼，远耻辱也。因不失其亲，亦可宗也。＂     
子曰：＂君子食无求饱，居无求安，敏于事而慎于言，就有道而正焉。可谓好学也已。＂     
子贡曰：＂贫而无谄，富而无骄，何如？＂子曰：＂可也。未若贫而乐，富而好礼者也。＂子贡曰：＂《诗》云：‘如切如磋，如琢如磨’，其斯之谓与？＂子曰：＂赐也，始可与言《诗》已矣，告诸往而知来者。＂     
子曰：＂不患人之不己知，患不知人也。＂         绝对定位和脱离流。   
　　CSS代码：body {   padding: 20px;   font: 1em Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,arial,sans-serif;   background-color: wheat; }   * {box-sizing: border-box;}   p {   margin: 0 0 1em 0; }   .container {     border: 1px solid rgb(254,106,0);   border-radius: .5em;   padding: 10px;   column-count: 2;   max-width: 400px;   position: relative; }   .item {   border-radius:.5em;   position: absolute;   top: 10px;   left: 20px;   background-color: rgba(254,106,0,.9);   color: #fff;   padding: 20px;   width: 200px; }
　　效果：
　　然而，浮动元素也会从流中脱离，但后面的元素的文本将环绕该浮动元素。你可以设置后面元素的背景颜色，你会看到他们会上升并占用了原来浮动元素原来的空间。
　　HTML代码：                 浮动和脱离流       
子曰：＂学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知而不愠，不亦君子乎？     
有子曰:＂其为人也孝弟而好犯上者，鲜矣；不好犯上而好作乱者，未之有也。君子务本，本立而道生。孝弟也者，其为仁之本与!＂     
子曰:＂巧言令色，鲜矣仁！＂     
曾子曰＂吾日三省吾身:为人谋而不忠乎?与朋友交而不信乎?传不习乎?＂     
子曰:＂道千乘之国,敬事而信，节用而爱人，使民以时。＂     
子曰：＂弟子入则孝，出则弟，谨而信，泛爱众，而亲仁。行有余力，则以学文。＂     
子夏曰：＂贤贤易色；事父母，能竭其力；事君，能致其身；与朋友交，言而有信。虽曰未学，吾必谓之学矣。＂     
子曰：＂君子不重则不威，学则不固。主忠信，无友不如己者，过则勿惮改。＂     
曾子曰：＂慎终追远，民德归厚矣。＂     
子禽问于子贡曰：＂夫子至于是邦也，必闻其政，求之与，抑与之与？＂子贡曰：＂夫子温、良、恭、俭、让以得之。夫子之求之也，其诸异乎人之求之与？＂     
子曰：＂父在，观其志。父没，观其行；三年无改于父之道，可谓孝矣。＂     
有子曰：＂礼之用，和为贵。先王之道，斯为美，小大由之。有所不行，知和而和，不以礼节之，亦不可行也。＂     
有子曰：＂信近于义，言可复也。恭近于礼，远耻辱也。因不失其亲，亦可宗也。＂     
子曰：＂君子食无求饱，居无求安，敏于事而慎于言，就有道而正焉。可谓好学也已。＂     
子贡曰：＂贫而无谄，富而无骄，何如？＂子曰：＂可也。未若贫而乐，富而好礼者也。＂子贡曰：＂《诗》云：‘如切如磋，如琢如磨’，其斯之谓与？＂子曰：＂赐也，始可与言《诗》已矣，告诸往而知来者。＂     
子曰：＂不患人之不己知，患不知人也。＂       
　　CSS代码：body {   padding: 20px;   font: 1em Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,arial,sans-serif;   background-color: wheat; }   * {box-sizing: border-box;}   p {   margin: 0 0 1em 0; }   .container {     border: 1px solid rgb(254,106,0);   border-radius: .5em;   padding: 10px;   max-width: 500px; }   .item {   border-radius:.5em;   float: left;    background-color: rgba(254,106,0,.9);   color: #fff;   padding: 20px;   width: 100px;   margin: 10px; }   .container p:nth-of-type(1) {   background-color: yellow; }
　　效果：
　　注意：  需要记住的重要一点是，如果从流中取出一个元素，则需要自己管理重叠，因为块流布局的常规规则不再适用。 布局（Layout）
　　过去我们们在 HTML 中一般使用 CSS 进行布局，常见的布局有：单列布局、两列自适应布局、圣飞布局和双飞翼布局、伪等高布局、粘连布局。重点介绍下 Flex 布局和 grid 布局：
　　Flex布局
　　Flex布局，也叫弹性盒子布局，区区简单几行代码就可以实现各种页面的的布局。//html部分同上 .parent {     display:flex; }   .right {     margin-left:20px;      flex:1; }
　　推荐W3Cschool上的的Flexbox布局基础入门 ，可以更好的帮你掌握Flex。
　　grid布局
　　Grid 布局，是一个基于网格的二维布局系统，目的是用来优化用户界面设计。//html部分同上 .parent {     display:grid;     grid-template-columns:auto 1fr;     grid-gap:20px } 对齐（Alignment）
　　大多数人都会把对齐（Alignment）当作 Flexbox 的一部分，但是这些属性适用于所有布局方法值得在这种情况下理解它们，而不是考虑＂ Flexbox Alignment＂或＂ Flexbox Alignment＂ ＂ CSS网格对齐。＂ 我们有一组Alignment属性，它们在可能的情况下可以以一种通用的方式工作。然后，由于不同的布局方法的行为方式，它们会有一些差异。尺寸（Sizing）
　　在 web 上，我们习惯用长度或百分比来设置尺寸，这就是我们如何使用浮动来制作网格类型布局的方法。然而，现代的布局方法可以为我们做很多空间分配——如果我们允许的话。值得花时间去了解 Flexbox 如何分配空间(或 Grid fr   单元如何工作)。响应式设计（Responsive Design）
　　通常，新的 Grid 和 Flexbox 布局方法意味着我们可以使用比旧方法更少的媒体查询，因为它们非常灵活，可以响应视口或组件大小的变化，而无需我们更改元素的宽度。 但是，有些地方需要添加一些断点来进一步增强设计。字体和排版
　　与布局一样，网络上的字体使用在发生了巨大的变化。现在，可变字体，使单个字体文件具有无限的变化。 要了解它们是什么以及它们如何工作，请观看Mandy Michael的精彩简短演讲：可变字体和网页设计的未来。 另外，我会推荐Jason Pamental的动态排版与现代CSS和可变字体。
　　为了探索可变字体和它们的功能，微软提供了一个有趣的演示，以及一些尝试可变字体的游乐场 - Axis Praxis是最知名的（我也喜欢字体游乐场）。
　　MDN上的指南将证明一开始使用可变字体是非常有用的。要了解如何为不支持可变字体的浏览器实现回退解决方案，请阅读 Oliver Schondorfer的《使用回退Web字体实现可变字体》Firefox DevTools字体编辑器还支持使用可变字体。变形和动画
　　CSS转换和动画绝对是我需要知道的基础。 我不经常需要使用它们，在使用时会忘记语法。 值得庆幸的是，MDN上的参考资料帮助了我，我建议从使用CSS变换和使用CSS3动画的指南开始。 Zell Liew也有一篇很好的文章，为CSS过渡提供了很好的解释。
　　要发现一些可能的事情，请查看Animista网站。
　　关于动画可能令人困惑的事情之一是采取哪种方法。 除了 CSS 支持的内容之外，你可能还需要涉及 JavaScript ，SVG 或 Web Animation API，而这些事情往往都会被混为一谈。 在她的演讲中，选择你的动画冒险记录在事件中，Val Head解释了这些选项。使用参考手册
　　在使用 Grid 或 Flexbox 很多人会很依赖w3cschool上的CSS参考手册 ，如果没有参考手册就没法工作。这是没有问题的，前面我们也提到可以合理的利用参考手册来提升开发效率，但是前提是得先理解透原理。否则我们在复制语法时，可能会忽略为什么要这样写。然后，当遇到该属性似乎表现不同的情况时，这种明显的不一致会令人困惑找不出问题出在哪。
　　CSS 是一门经过多年进化的语言，一直在更新，如果是把自己当成学习者的心态来学习的话，永远也是学不完的。然而，一旦你把基础知识及底层原理打牢了以后，你就可以很轻松的面对各种变化了。如果要系统的学习前端推荐学习W3Cschool上的从0基础到前端开发 课程。
　　以上就是编程狮为你整理的关于web前端开发初学者如何科学的快速学会CSS？的全部内容，希望给对css望而生畏初学者有所帮助，如果你有更好的学习方法欢迎分享~