1 背景
學習angualr時，使用ngClass和ngStyle一臉懵逼，兩者都是對標籤的屬性進行個性化自定義的，但是，在使用起來的過程中有時候會出現交替使用的情況，十分費解，特地學習並總結了一下style和class
2 聯繫和區別
先上結論：
2.1 聯繫
- class和style都是對標籤的屬性進行個性化設置，常見的屬性及使用見本文的第三節
- class可以說是可複用的style的集合
2.2 區別
- class一般是定義在css(層疊樣式表)文件裏的，同類型的標籤可以對css文件中的class進行復用；而style一般都是
- class除了可以當作style集合使用以外，還可以使用純css實現動畫效果
- class定義時一般是針對某個標籤類定義其對應的class，具有一定的針對行，比如
"div.myClass{……}"而style一般是現定義現用，且不會複用，定義的時候不會有針對性，直接```style=“xxxxxx”````就完事了 - style和class同時對標籤的某些屬性進行了個性化時，style中的屬性設置優先使用。
舉個例子說明style和class的區別和聯繫
class所在的層疊樣式表文件，style.css
/*
在樣式表裏面裏面，針對div標籤，定義一個的divClass樣式類
*/
div.divClass{
border-top: red 1px solid;
}
/*
一個通用的樣式
*/
.universalClass{
border-top: red 1px solid;
}
原生html靜態頁面，test.html
<html>
<!--導入樣式表-->
<link rel="stylesheet" type="text/css" href="style.css" />
<!--分別使用class和style實現同div上的同一個樣式-->
<div id="div1" style="border-top: red 1px solid;">
<div id="div2" class="divClass">
<span class="divClass">嘗試對span加載div的樣式表，並不起作用</span>
<hr>
<span class="universalClass">嘗試對span加載通用樣式表</span>
<div class="universalClass">嘗試對div加載div的樣式表</div>
</html>
最終，上邊的兩個div的樣式是相同的，兩種個性化的內容是相同的。
3 style常見屬性及實踐
<strong>開始嘗試一些常用的樣式屬性</strong>
<div style="width:200px;height:100px;background-color:green;">
寬度width<br>
高度height<br>
背景色background-color
</div>
<hr>
<div style="border:black 1px solid;width:500px;height:200px;">父容器
<div style="margin:5px 10px 20px 30px;width:100px; height:100px;background-color:red;">
</div>
</div>
<span>
margin:後面跟有四個距離分別爲到父容器的上-右-下-左邊的距離，可以看例子中的紅色子div到父div的描邊距離。<br>
還可以分別設置這四個邊的距離，用到的屬性如下：<br>
margin-left:到父容器左邊框的距離。<br>
margin-right:到父容器右邊框的距離。<br>
margin-top: 到父容器上邊框的距離。<br>
margin-bottom:到父容器下邊框的距離。
</span>
效果如下：
更多的常見屬性和實踐代碼，可參考https://blog.csdn.net/qq_38211852/article/details/80290516。
4 總結
class可以說是可複用的style的集合（但功能不僅於此）；不指明對應組件/標籤類型的樣式類具有通用性，否則無法使用（改變標籤對應的屬性值），就算有對應的屬性也無法使用。