一、伪类与伪元素1.1核心区别伪类：操作文档树中已经存在的元素伪元素：在文档树外创建新元素1.2相关例子1.伪类例子1：
li.first-item{color:orange}上面的代码将一个类添加到第一个
标签（将文本颜色更改为橙??色）。它的等价物是通过伪类操作在下面实现的。li:first-child{color:orange}例2:我是第二个li.first-item{color:orange}总结：从上面的例子可以看出伪-类主要为现有元素设置样式。它可以通过定位指定元素来设置样式，例如：first-child。您还可以通过:hover等设置指定元素在特定状态下的样式。2、伪元素示例1：
HelloWorld,andwishyouhaveagoodday!
.first{font-size:5em;}上面code风格化（修改文本大小）
标签中的第一个字母。也可以通过如下伪元素操作来实现（看起来是创建一个虚拟的元素并添加样式修改首字母的样式，但实际上文档树中并不存在这个元素)。HelloWorld，祝你有个美好的一天！
p:first-letter{font-size:5em;}总结：从上面的例子我们可以看出伪元素的作用是就像在文档中传递一样这是通过向树中添加一个新元素来实现的，因此得名。1.3常用伪元素：before和:after例子：<\>wonyun!
上面的实现效果可以等价于下面的HTML结构：
hellowonyun!你真帅！
1.usage中默认添加的内容为内联元素内容属性设置伪元素内部的内容（必填）。其内容非常灵活（具体参见本章参考文章2）：stringattr(attr_name)url()/uri()counter2。主要特性参考这里参考文章2中的内容。伪元素不属于文档，js无法操作。伪元素是主元素的一部分，所以点击伪元素会触发主元素的点击事件。原文说块级元素可以有:before,:after，其实是不合适的。大多数行级元素也可以设置伪元素，但是像img这样的可替换元素，因为它们的外观和大小是由外部资源决定的，那么如果正确加载了外部资源，它们内部的内容就会被替换，而伪元素也会被Replaced，但是当外部资源加载失败时，set伪元素可以起作用。因此，它可以用img实现一些有趣的效果。3.优缺点这里引用参考文章2中的内容。优点减少dom节点数让css帮助解决一些js问题，让问题更简单缺点不利于SEO不能review元素，不利于调试结合实现序号问题而不是使用list元素有趣的特效：放大镜、箭头、三角符号、叉子等。详见文章传送门：伪类与伪元素。参考css伪元素：before和:after使用详解2.清除浮动初步了解~~~~2.1Float&ClearFloat在非IE浏览器（如Firefox）下，当容器高度为auto时，以及容器内容中有浮动（float为left或right）元素，在这种情况下，容器的高度无法自动拉伸以适应内容的高度，从而使内容溢出到容器外并影响（甚至破坏）布局。这种现象称为浮动溢出。为了防止浮动溢出的发生，CSS处理称为CSS清浮动。让我们从一个例子开始：
sometext
.news{background-color:gray;边框：实心1px黑色；}.newsimg{浮动：左；}.newsp{浮动：正确；}2.2清除浮动的方法详见第一章。1）使用清除属性的空元素的优点：简单，代码少，浏览器兼容性好。缺点：需要加入大量无语义的html元素，代码不够优雅，后期不易维护。2）利用css的overflow属性3）利用相邻元素处理什么都不做，只是给浮动元素后面的元素加上clear属性。3）利用CSS的:after伪元素+触发器hasLayout对方法一进行改进，剔除大量无意义的空元素。注意：通过设置浮动元素容器的zoom:1属性来触发haslayout是为了兼容IE6和IE7浏览器。2.3总结两种清除浮动的方法：利用clear属性触发浮动元素的父元素的BFC（BlockFormattingContexts，块格式化上下文），使父元素可以包含浮动元素。扩展问题：什么是BFC？有哪些主要特点和作用？参考文章传送门：CSS-ClearFloating-Summary3.TextcenteringinSpan3.1Horizo??ntalcenteringtext-align:center;3.2Verticalcenteringline-height：该值为跨度的高度；4.overflowwithtext-overflow:统一处理容器内所有数据溢出的处理方式，不管容器内存储的是文本、图片还是其他数据。hidden：隐藏scroll：滚动条显示visible：溢出显示text-overflow：专门针对框内文本溢出时的处理方法；clip:croppingellipsis:ellipsisstring:指定要替换的字符串，usewith:text-overflow:string/ellipsisoverflow:hidden()为了让text-overflow属性生效，必须设置overflow属性，并将值隐藏因为string或ellipsis的取值是基于隐藏的溢出部分，替换符号都显示在容器中。不会显示在容器外，所以overflow也必须这样设置。5.word-break、word-wrap、white-space的初步认识这里引用参考文章中的内容：white-space，控制空白字符的显示，也可以控制是否自动换行。它有五个值：正常|现在收起|前|预包装|pre-lineword-break，控制单词如何分成换行符。它具有三个值：正常|打破一切|keep-allword-wrap(overflow-wrap)控制是否将超过一行的单词拆分为新行。它是分词的补充。它有两个值：正常|break-Word参考文章传送门：吃透word-break,word-wrap,white-space6.初步了解Vue中ref属性示例：
