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)