【CSS】CSS三大特性、盒子模型

CSS的三大特性分别是盒子模型（Box Model）、浮动（Float）和定位（Position）。

1. 盒子模型：CSS盒子模型由四个部分组成：内容（Content）、填充（Padding）、边框（Border）和边距（Margin）。

/* 设置一个元素的盒子模型属性 */
.box {
  content: content-value; /* 内容区域 */
  padding: padding-value; /* 填充区域 */
  border: border-value;   /* 边框区域 */
  margin: margin-value;   /* 边距区域 */
}

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

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

3. 定位：CSS定位属性允许你对元素进行定位。有三种定位机制：普通流、浮动和绝对定位。

/* 绝对定位，相对于最近的已定位祖先元素 */
.position-absolute {
  position: absolute;
  top: 10px;
  right: 20px;
  bottom: 30px;
  left: 40px;
}
 
/* 相对定位，相对于元素在普通流中的位置 */
.position-relative {
  position: relative;
  top: 10px;
  right: 20px;
  bottom: 30px;
  left: 40px;
}
 
/* 固定定位，相对于视口 */
.position-fixed {
  position: fixed;
  top: 10px;
  right: 20px;
  bottom: 30px;
  left: 40px;
}
 
/* 静态定位，是元素的默认定位方式 */
.position-static {
  position: static;
}

这三种特性是CSS布局的基础，理解并掌握它们对于Web开发者来说是必不可少的。