#CSS

======================================================

1. 盒子模型基础

1.1 基本说明

• 使用类选择器画盒子：三属性

• 实际书写中，几乎都是盒子，<div>大量使用

1.2 常用属性

• width：宽度

• height：高度

• background-color：背景色

======================================================

2. 盒子模型组成

2.1 内容区

• width：内容区的宽度

• height：内容区的高度

2.2 内边距

• padding-top：上内边距

• padding-right：右内边距

• padding-bottom：下内边距

• padding-left：左内边距

• padding：简写属性，可同时设置四个方向的内边距

2.3 外边距

• margin-top：上外边距

• margin-right：右外边距

• margin-bottom：下外边距

• margin-left：左外边距

• margin：简写属性，可同时设置四个方向的外边距

2.4 边框

• border-width：边框宽度

• border-style：边框样式，如solid、dashed、dotted等

• border-color：边框颜色

• border：简写属性，可同时设置宽度、样式和颜色

• 方向边框：border-top、border-right、border-bottom、border-left

2.5 box-sizing属性

• content-box：标准盒子模型（默认值）

======================================================

3. 盒子装饰

3.1 圆角

• border-radius：设置元素的圆角

• 取值：像素值、百分比

• 设置圆形：border-radius: 50%;

3.2 盒子阴影

• box-shadow：设置元素的阴影效果

• 语法：box-shadow: h-shadow v-shadow blur spread color inset

• 参数：

  • h-shadow：水平阴影位置
  • v-shadow：垂直阴影位置
  • blur：模糊距离
  • spread：阴影大小
  • color：阴影颜色
  • inset：内阴影（可选）

======================================================

4. 外边距问题

4.1 外边距合并

• 场景：垂直排列的兄弟元素，上下 margin 会合并

• 现象：取两个 margin 中的较大值生效

4.2 外边距塌陷

• 场景：父子级的标签，子级的添加上外边距会产生塌陷问题

• 现象：导致父级一起向下移动

• 解决方法：

  • 1.取消子级margin，父级设置padding
  • 2.父级设置 overflow: hidden
  • 3.父级设置 border-top

======================================================

5. 内容溢出overflow属性

5.1 基本属性

• overflow：控制内容溢出时的显示方式

• overflow-x：控制水平方向的内容溢出

• overflow-y：控制垂直方向的内容溢出

5.2 常见取值

• visible：默认值，内容溢出时会显示在元素外部

• hidden：内容溢出时会被裁剪，不显示溢出部分

• scroll：无论内容是否溢出，都会显示滚动条

• auto：只有当内容溢出时，才会显示滚动条

======================================================

6. span增加上下间距

• 方法1：将span转换为块级元素或行内块元素

  span { display: inline-block; margin: 10px 0; }

• 方法2：使用padding代替margin

  span { padding: 10px 0; }

• 方法3：使用line-height控制行高

  span { line-height: 40px; }

======================================================