《CSS世界》

.class-1 {
  border: 1px solid rgba(0, 0, 0, 0);
}

1
2
3

/* do this */
.father {
  width: 180px;
}
.son {
  margin: 0 20px;
  padding: 20px;
  border: 1px solid;
}
/* not this */
.box {
  width: 100px;
  padding: 20px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

img {
  max-width: 100%;
  height: auto !important;
  /* 强制height:auto可以确保宽度不超出的同时使图片保存原来的比例 */
}

1
2
3
4
5

.ele {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s;
}

.ele.active {
  max-height: 666px;
}

1
2
3
4
5
6
7
8
9

ALEX CODE PARK

Choose mode

《CSS世界》

# ⭕️ 第一章概述

# ⭕️ 第二章基本术语概念

# ⭕️ 第三章流、元素与基本尺寸

# 3.1 块级元素

# 为什么 list-item 会出现项目符号?

# 3.2 width/height 作用细节

# 关于 width/height:100%

# 3.3 min/max-width/height

# 超越!important,超越最大:

# 任意高度元素的展开收起动画技术

# 3.4 内联元素

# 内联盒模型

# 幽灵空白节点

ALEX CODE PARK

《CSS世界》

《CSS世界》

# ⭕️ 第一章 概述

# ⭕️ 第二章 基本术语概念

# ⭕️ 第三章 流、元素与基本尺寸

# 3.1 块级元素

# 为什么 list-item 会出现项目符号?

# 3.2 width/height 作用细节

# 关于 width/height:100%

# 3.3 min/max-width/height

# 超越!important,超越最大:

# 任意高度元素的展开收起动画技术

# 3.4 内联元素

# 内联盒模型

# 幽灵空白节点

# ⭕️ 第一章概述

# ⭕️ 第二章基本术语概念

# ⭕️ 第三章流、元素与基本尺寸