盒子是元素的容器,用于对不同元素进行分组,下列是盒子大小相关的一些属性。
| 属性 | 含义 |
|---|---|
| width | 盒子宽度 |
| height | 盒子高度 |
| min-width | 最小宽度 |
| min-height | 最小高度 |
| max-width | 最大宽度 |
| max-height | 最大高度 |
盒子的类型通常分为区元素、行元素、行内块元素。
| 属性 | 属性值 | 含义 |
|---|---|---|
| display | block | 区元素 |
| inline | 行元素 | |
| inline-block | 行内块元素 | |
| none | 隐藏盒子 |
容器内部四周的距离。
| 属性 | 含义 |
|---|---|
| padding | 内边距缩写 |
| padding-top | 顶部内边距 |
| padding-bottom | 底部内边距 |
| padding-left | 左边内边距 |
| padding-right | 右边内边距 |
容器外部四周的距离。
| 属性 | 含义 |
|---|---|
| margin | 外边距缩写 |
| margin-top | 顶部外边距 |
| margin-bottom | 底部外边距 |
| margin-left | 左边外边距 |
| margin-right | 右边外边距 |
内容大于容器时,就会产生溢出,下列是一些关于溢出处理的属性。
| 属性 | 属性值 | 含义 |
|---|---|---|
| overflow | auto | 溢出时显示滚动条 |
| hidden | 溢出内容裁剪 | |
| scroll | 无论是否溢出都显示滚动条 | |
| visible | 默认值,不处理内容溢出 |
当容器隐藏时,仍然保留容器的空间。
| 属性 | 属性值 |
|---|---|
| visibility | visible / hidden |
设置容器的空间是否被边距等属性所影响。
| 属性 | 属性值 |
|---|---|
| box-sizing | 盒子空间 |