【前端基础篇】CSS基础速通介绍

在上篇文章中，我们介绍了CSS的基础知识和选择器，包括类选择器、ID选择器和通配选择器等。在这一篇文章中，我们将继续深入探讨CSS的其他关键特性，包括盒模型、浮动、定位和层叠次序等。

1. 盒模型：CSS盒模型定义了元素如何显示以及如何处理元素的内边距、边框和外边距。

/* 标准盒模型，宽度=内容宽度+内边距+边框+外边距 */
element {
  box-sizing: content-box;
  width: 100px;
  padding: 10px;
  border: 1px solid black;
  margin: 10px;
}
 
/* IE盒模型，宽度=元素的宽度属性 */
element {
  box-sizing: border-box;
  width: 100px; /* 内容宽度为100px */
  padding: 10px;
  border: 1px solid black;
  margin: 10px;
}

2. 浮动：浮动可以使元素向左或向右移动，直到它的外边缘碰到包含它的框或另一个浮动元素的边缘。

/* 向左浮动 */
.float-left {
  float: left;
}
 
/* 向右浮动 */
.float-right {
  float: right;
}

3. 定位：CSS定位属性允许你对元素进行定位。

/* 静态定位 */
.static {
  position: static;
}
 
/* 相对定位，相对于元素在文档中的原始位置 */
.relative {
  position: relative;
  top: 10px;
  left: 20px;
}
 
/* 绝对定位，相对于最近的非静态定位的祖先元素 */
.absolute {
  position: absolute;
  top: 50px;
  right: 30px;
}
 
/* 固定定位，相对于视口 */
.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
}
 
/* 粘性定位，部分固定定位，当滚动到一定位置时变为固定定位 */
.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0; /* 当向下滚动超过元素顶部距离时，元素将固定 */
}

4. 层叠次序：CSS层叠次序决定了哪个样式规则会被应用。

/* 通过指定不同的类选择器来增加权重 */
.important-notification {
  font-weight: bold;
  color: red;
}
 
/* 使用!important提高权重至最高 */
.urgent-notification {
  font-weight: bold !important;
  color: red;
}
 
/* ID选择器权重高于类选择器 */
#unique-notification {
  font-weight: bold;
  color: red;
}
 
/* 内联样式具有最高权重 */
<div style="font-weight: bold; color: red;">重要通知</div>

以上是CSS基础速通的下篇内容，包括盒模型、浮动、定位和层叠次序等关键特性的简要介绍和示例代码。通过这些基础知识的学习，前端开发者可以更好地理解如何使用CSS来构建网页的样式。