Class与ID区别 margin和padding区别 CSS学习笔记

沃梦达教程前端开发

2023-12-23 10

示例：

Class与ID区别
- 使用 Class 和 ID 都可以为 HTML 元素添加样式，但二者存在以下区别：
- ID 是给唯一的元素设置样式，而 Class 是可以给同类元素设置样式，一个元素可以同时拥有多个 Class。
- ID 选择器的优先级要高于 Class 选择器，即当一个元素同时设置了 ID 和 Class 两种样式选择器，ID 选择器的样式属性会覆盖 Class 选择器。

示例：

<!--ID选择器-->
<p id="example">这是一个段落。</p>
<style>
  #example {
    color: red;
  }
</style>

<!--Class选择器-->
<p class="example">这是另一个段落。</p>
<p class="example">这是第三个段落。</p>
<style>
  .example {
    color: blue;
  }
</style>

margin和padding区别
- margin 和 padding 都是在 CSS 盒模型中用来设置间距（距离）的属性。
- margin 用于设置元素与元素之间的间隔（即元素的外边距），padding 用于设置元素内容与元素边框的距离（即元素的内边距）。
- margin 和 padding 都有四个方向的属性值，即上下左右，可以使用单个值、两个值、三个值或者四个值来指定不同方向的间隔大小。

示例：

<!--margin示例-->
<div style="width: 200px; height: 200px; background-color: red; margin: 20px;">这是一个div。</div>

<!--padding示例-->
<div style="width: 200px; height: 200px; background-color: blue; padding: 20px;">这是另一个div。</div>