CSS3 盒子模型

盒子大小

盒子是元素的容器,用于对不同元素进行分组,下列是盒子大小相关的一些属性。

属性含义
width盒子宽度
height盒子高度
min-width最小宽度
min-height最小高度
max-width最大宽度
max-height最大高度

盒子类型

盒子的类型通常分为区元素行元素行内块元素

属性属性值含义
displayblock区元素
inline行元素
inline-block行内块元素
none隐藏盒子

内边距

容器内部四周的距离。

属性含义
padding内边距缩写
padding-top顶部内边距
padding-bottom底部内边距
padding-left左边内边距
padding-right右边内边距

外边距

容器外部四周的距离。

属性含义
margin外边距缩写
margin-top顶部外边距
margin-bottom底部外边距
margin-left左边外边距
margin-right右边外边距

内容溢出

内容大于容器时,就会产生溢出,下列是一些关于溢出处理的属性。

属性属性值含义
overflowauto溢出时显示滚动条
hidden溢出内容裁剪
scroll无论是否溢出都显示滚动条
visible默认值,不处理内容溢出

盒子占位

当容器隐藏时,仍然保留容器的空间。

属性属性值
visibilityvisible / hidden

盒子空间

设置容器的空间是否被边距等属性所影响。

属性属性值
box-sizing盒子空间
更多教程 HTML5 教程 CSS3 教程 JavaScript 教程 JQuery 教程 React.js 教程 Node.js 教程 Koa2 教程 Python 教程 Linux 教程