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>
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Class与ID区别 margin和padding区别 CSS学习笔记 - Python技术站