盒子是元素的容器,用于对不同元素进行分组,下列是盒子大小相关
的一些属性。
属性 | 含义 |
---|---|
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 | 盒子空间 |