0715知识总结-2020暑期工做&学习

1、伪类与伪元素

1.1 核心区别

伪类：操做 文档树中已存在元素
伪元素：建立 文档树外的一个新元素

1.2 相关例子

1. 伪类
例子1：

<ul>
    <li class="first-item">我是第一个</li>
    <li>我是第二个</li>
</ul>

li.first-item {
 color: orange
}

以上代码对第一个<li>标签添加了一个类(改变文字颜色为橘色)。其等价于下方经过伪类操做实现。

<ul>
 <li>我是第一个</li>
 <li>我是第二个</li>
</ul>

li:first-child {
    color: orange
}

例子2：

<ul>
    <li class="first-item">我是第一个</li>
    <li>我是第二个</li>
</ul>

li.first-item {
 color: orange
}

小结：从以上例子能够看出伪类主要针对已经存在的元素设置样式。其能够经过:first-child等定位指定元素进行样式设置。还能够经过:hover等设置指定元素特定状态下的样式。

2. 伪元素

例子1：

<p>
<span class="first">H</span> ello World, and wish you have a good day!
</p>

.first {
 font-size: 5em;
}

以上代码对 <p> 标签中的第一个字母进行样式设置(修改文字大小)。其一样能够经过如下的伪元素方式操做实现（看起来像是建立了一个虚拟<span>元素并添加样式来对首字母进行样式修改，然而实际上文档树中并不存在这个<span>元素）。

<p>
Hello World, and wish you have a good day!
</p>

p:first-letter {
 font-size: 5em;
}

小结：从以上例子能够看出伪元素产生的效果就好像是经过在文档树中添加了一个新的元素来实现的，其也所以得名。

1.3 经常使用伪元素之 :before和:after

先上一个例子：

<\>wonyun!</p> 

<style> 
  p:before{content: "hello "}
  p:after{content: "you are handsome!"} 
</style>

以上实现效果能够等价于如下HTML结构：

<p> 
  <span>hello </span> 
  wonyun! 
  <span> you are handsome!</span> 
</p>

1.用法
默认添加的内容为 inline元素
content属性（必须）设置 伪元素内的内容。其内容十分灵活(具体能够参考本章参考文章2)：

• 字符串
• attr(attr_name)
• url()/uri()
• counter

2.主要特色
此处引用参考文章2中的内容。

• 伪元素不属于文档，因此js没法操做它
• 伪元素属于主元素的一部分，所以点击伪元素触发的是主元素的click事件
• 原文说块级元素才能有:before, :after，实际上是不妥的，大部分行级元素也能够设置伪元素，可是像img可替换元素，由于其外观和尺寸有外部资源决定，那么若是外部资源正确加载，就会替换掉其内部内容，这时伪元素也会被替换掉，可是当外部资源加载失败时，设置的伪元素是能够起做用的。所以其搭配img能够有一些有趣的效果实现。

3.优缺点
此处引用参考文章2中的内容。

• 优势

  • 减小dom节点数
  • 让css帮助解决部分js问题，让问题变得简单

• 缺点

  • 不利于SEO
  • 没法审查元素，不利于调试

4.实际应用场景

1. 清楚浮动
2. 搭配img实现加载失败时的页面美观提示
3. 结合counter()结合实现序号问题，而不用使用列表元素
4. 有趣特效：放大镜、箭头、三角符号、叉叉等

参考文章 传送门:

• 伪类与伪元素 详细参考css伪元素:before和:after用法详解

2、清除浮动的初步了解~~~~

2.1 浮动 & 清除浮动

在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种状况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出。

为了防止浮动溢出现象的出现而进行的CSS处理，就叫CSS清除浮动。

---

仍是先来一个例子：

<div class="news">
    <img src="news-pic.jpg" />
    <p>some text</p>
</div>

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

2.2 清除浮动方法

详情能够查看章节参考文章1中的内容。
1）使用带clear属性的空元素
优势：简单，代码少，浏览器兼容性好。
缺点：须要添加大量无语义的html元素，代码不够优雅，后期不容易维护。
2）使用CSS的overflow属性
3）使用邻接元素处理
什么都不作，仅仅给浮动元素后面的元素添加clear属性。
3）使用 CSS的:after伪元素+触发hasLayout 处理
对方式1的改进，消除大量无语义的空元素。
注意: 经过给浮动元素容器设置 zoom:1属性触发haslayout，是为了兼容IE6和IE7浏览器。

2.3 小结

两类清除浮动方式：

• 利用clear属性
• 触发浮动元素父级元素的BFC(Block Formatting Contexts, 块级格式化上下文)，使得父元素能够包含浮动元素。

拓展问题：

• BFC是什么？主要有什么特性和做用？

参考文章 传送门:

• CSS-清除浮动-总结

3、Span中的文本居中

3.1 水平居中

text-align: center;

3.2 垂直居中

line-height: 值为span的高度;

4、overflow 搭配 text-overflow 的使用

overflow:
针对容器内全部的数据溢出的一种统一处理方式,无论容器内的存储的是文本、图片仍是其余的数据统一取值。

• hidden: 隐藏
• scroll: 滚动条显示
• visible: 溢出显示

text-overflow:
是专门针对盒子内的文本溢出时的处理方式；

• clip: 裁剪
• ellipsis: 省略号
• string: 指定字符串来替换,

搭配使用：

text-overflow: string/ellipsis
overflow:hidden（）

为使得text-overflow属性有效，overflow属性必须设置且值为hidden
由于tring 或ellipsis取值是创建在隐藏溢出部分的基础上的,替代符号都是在容器内显示的,不会在容器外显示,因此overflow也必须这样设置。

5、word-break、word-wrap、white-space 的初步了解

此处引用参考文章中内容：

• white-space，控制空白字符的显示，同时还能控制是否自动换行。它有五个值：normal | nowrap | pre | pre-wrap | pre-line
• word-break，控制单词如何被拆分换行。它有三个值：normal | break-all | keep-all
• word-wrap（overflow-wrap）控制长度超过一行的单词是否被拆分换行，是word-break的补充，它有两个值：normal | break-word

参考文章 传送门:

• 完全搞懂word-break、word-wrap、white-space

6、Vue中的 ref 属性初步了解

例子：

<div id="app">
  <input type="text" value="HelloWorld" alt="captcha"  ref="text">
  <button @click="changeText">change word</button>
</div>

var app = new Vue({ 
    el: '#app',
    data: {
    },
    //添加一个方法
    methods:{
      //改变文字
      changeText () {
        this.$refs.text.value \= 'Hello Vue!' 
      }
    }
});

6.1理解

通俗的将就相似于原生js document.getElementById("#id")
可是：只是相似，他们的不一样点是Vue是操控虚拟DOM ，也就是说在渲染初期并无这个ref的属性，这个属性是在建立Vue实例之后才被加到虚拟DOM中的。因此在官方文档的最后提醒开发者不能将ref的结果在模版中进行数据绑定。

this.$refs:
通俗的将就是搜集全部的ref的一个对象。经过this.$refs 能够访问到此Vue实例中的全部设置了ref属性的DOM元素，并对其进行操做。

**参考文章 传送门:**

* [vue的ref属性的相关介绍](https://blog.csdn.net/Little_Pig_Bug/article/details/81324366?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.edu_weight&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.edu_weight)