CSS盒模型

元素尺寸

属性 说明 CSS版本
width auto、长度值或百分比 设置元素的宽度 1
height auto、长度值或百分比 设置元素的高度 1
min-width auto、长度值或百分比 设置元素最小宽度 2
min-height auto、长度值或百分比 设置元素最小高度 2
max-width auto、长度值或百分比 设置元素最大宽度 2
max-height auto、长度值或百分比 设置元素最大高度 2

auto是默认值,width在auto下是100%的值,height在auto下是自适应。

长度值是指定元素的固定尺寸。

百分比是相对于父元素长度来衡量的。

div {
    min-width: 100px;
    min-height: 100px;
    max-width: 300px;
    max-height: 300px;
}
1
2
3
4
5
6

这一组数据主要是应对元素的尺寸动态改变,限制它最小和最大尺寸。

元素内边距

设置元素内部边缘填充空白的大小,即内边距。

属性 说明 CSS版本
padding-top 长度值或百分比 设置顶部内边距 1
padding-bottom 长度值或百分比 设置底部内边距 1
padding-left 长度值或百分比 设置左边内边距 1
padding-right 长度值或百分比 设置右边内边距 1
padding 1~4个长度值或百分比 边距 1
div {
    padding: 10px 10px 10px 10px;
}
1
2
3

padding根据其传参个数而不同作用:

  • 4个传参的padding,分别表示top、right、bottom、left。

  • 3个传参的padding,分别表示top、left&right、bottom。

  • 2个传参的padding,分别表示top&bottom、left&right。

  • 1个传参的padding,4个边距都为同一个值。

元素外边距

设置元素外部边缘填充空白的大小,即外边距。

元素外边距的使用和规则,跟内边距类似,区别在于内边距是padding关键字,而外边距为margin关键字。

margin: 0 auto为水平居中,margin: auto 0为垂直居中。

元素溢出

当设置了元素固定尺寸且内容过大时,就会出现元素溢出的问题。

元素溢出主要朝两个方向:右侧、底部,可通过overflow系列样式来控制它。

属性 说明 CSS版本
overflow-x 溢出值 设置水平方向的溢出 3
overflow-y 溢出值 设置垂直方向的溢出 3
overflow 溢出值 设置两个方向的溢出 2

元素溢出主要有以下四种处理值。

说明
auto 浏览器自行处理溢出内容。若溢出,则显示滚动条;否则不显示滚动条。
hidden 直接剪掉溢出内容
scroll 不管是否溢出,都会出现滚动条
visible 默认值,不管是否溢出,都显示全部内容

元素可见性

使用visibility属性可以实现元素的可见性,其可选值如下:

说明 CSS版本
visible 默认值,元素在页面上可见 2
hidden 元素不可见,但占据空间 2
collapse 元素不可见,隐藏表格的行与列。如果不是表格,则和hidden一样占据空间。 2
// div元素不可见,但占据空间
div {
    visibility: hidden;
}
1
2
3
4
// 隐藏表格的第一行,不占据空间
table tr:first-child {
    visibility: collapse
}
1
2
3
4

元素盒类型

元素盒类型主要有:

  • 块级元素(区块),就是能够设置元素尺寸、隔离其他元素功能的元素。如<div><p>等。

  • 行内元素(内联),就是不能够设置元素尺寸,只能自适应内容,无法隔离其他元素,而其他元素会紧跟其后。比如<span><b>等。

  • 行内块级元素(内联块),就是能够设置元素尺寸,但无法隔离其他元素的元素。如<img>

  • 隐藏元素,就是不可见且不占据空间的元素。

可使用display属性来指定元素盒类型,从而改变其本身的盒类型。

说明 CSS版本
block 块级元素 1
inline 行内元素 1
inline-block 行内块级元素 2
none 隐藏元素 1
// 将原本为块级元素的div转换成行内元素
div {
    display: inline
}
1
2
3
4

元素的浮动

使用float属性来指定元素的浮动。

说明 CSS版本
left 浮动元素靠左 1
right 浮动元素靠右 1
none 禁用浮动 1

浮动元素有一个问题:当一个元素盒子被浮动后,下面的元素会自动堆叠处理,导致下面的元素不可见或部分不可见。下面的元素可使用clear属性来使自己不受浮动的影响。

说明 CSS版本
none 允许两边均可浮动 1
left 左边界不可浮动 1
right 右边界不可浮动 1
both 两边都不可浮动 1