在HTML的CSS设计中，<div> 元素的 class 和 style 属性是用于应用样式的两种不同方式，它们之间有以下区别：
- class 属性：
class属性用于指定一个或多个样式类的名称，这些样式类通常在CSS样式表中定义。- 一个 HTML 元素可以同时拥有多个
class属性值，它们之间用空格分隔。 - 样式类的定义通常包含在外部的CSS文件中，这使得样式可以在多个页面中重复使用。
- 使用
class属性能够实现样式的复用和分离，使得HTML和CSS之间的关注点分离。
<div class="box red-background">This is a red box</div>
- style 属性：
style属性用于直接在HTML元素上指定内联样式，这意味着样式信息与特定的HTML元素相关联。- 内联样式定义在元素的
style属性中，包含了CSS属性和值，通常使用分号分隔不同的样式规则。 - 内联样式的优先级较高，如果与外部样式表中的样式冲突，内联样式会覆盖外部样式。
<div style="background-color: red; width: 100px; height: 100px;">This is a red box</div>
总的来说，class 属性更适合用于将相同样式应用于多个元素，提高代码的可维护性和可重用性。而 style 属性更适合用于为单个元素或少数几个元素提供特定的样式，或者用于快速调试和测试样式。通常，推荐使用外部CSS样式表和 class 属性来管理网页的样式，以保持HTML和CSS的分离，并提高代码的可维护性。
总结：其实最大的区别是div的class里都是写的类名；而div的style里写的是具体的样式值，对于style相当于把放在CSS里的样式值直接写在div标签中了。例如下面这个例子：
<div class="px-2 bg-success align-self-baseline" style="font-size: x-large;">办公电脑</div>
