css定位
计算机知识思维导图：css定位。网页展示前三层结构，可在线查看完整脑图并下载 GoMind 文件。
2026-08-25
## css定位 ### css定位 #### CSS 参考手册 | 菜鸟教程 ##### display ##### position #### CSS3参考手册 | css88 ##### display ##### position #### 手段 ##### 行内，行内块级 ##### 块级block/inline-block ##### 弹性盒子flex/老弹性盒子box ##### CSS flex 属性 ##### 表格table ##### Grid布局 ##### 动画transform #### 解决方案 ##### 居中 #### 设计 ##### 流动布局 ##### 响应式布局 ##### 自适应布局 ##### 参考 #### 注意事项 ##### 尺寸相关的盒子模型，普通流、浮动、绝对定位这三种定位机制 ##### 布局类型 ##### 是否存在高度 #### 参考 ##### Untitled node > 仅展示前三层结构；请在线查看完整脑图或下载 GoMind 文件。
css定位
css定位
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row 此元素会作为一个表格行显示（类似 <tr>）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column 此元素会作为一个单元格列显示（类似 <col>）
table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption 此元素会作为一个表格标题显示（类似 <caption>）
inherit 规定应该从父元素继承 display 属性的值。
display
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
absolute
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed
生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
relative
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
还原到被改变前的值
initial
inherit 规定应该从父元素继承 position 属性的值。
position
CSS 参考手册 | 菜鸟教程
隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
none
指定对象为内联元素。
inline
指定对象为块元素。
block
指定对象为列表项目。
list-item
指定对象为内联块元素。（CSS2）
inline-block
指定对象作为块元素级的表格。类同于html标签<table>（CSS2）
table
指定对象作为内联元素级的表格。类同于html标签<table>（CSS2）
inline-table
指定对象作为表格标题。类同于html标签<caption>（CSS2）
table-caption
指定对象作为表格单元格。类同于html标签<td>（CSS2）
table-cell
指定对象作为表格行。类同于html标签<tr>（CSS2）
table-row
指定对象作为表格行组。类同于html标签<tbody>（CSS2）
table-row-group
指定对象作为表格列。类同于html标签<col>（CSS2）
table-column
指定对象作为表格列组显示。类同于html标签<colgroup>（CSS2）
table-column-group
指定对象作为表格标题组。类同于html标签<thead>（CSS2）
table-header-group
指定对象作为表格脚注组。类同于html标签<tfoot>（CSS2）
table-footer-group
根据上下文决定对象是内联对象还是块级对象。（CSS3）
run-in
将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
box
将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
inline-box
将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
flexbox
将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
inline-flexbox
将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
flex
将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
inline-flex
display
对象遵循常规流。此时4个定位偏移属性不会被应用。
static
对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。
relative
对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。
absolute
与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。
fixed
与absolute一致，但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。（CSS3）
center
与absolute一致。元素在分页媒体或者区域块内，元素的包含块始终是初始包含块，否则取决于每个absolute模式。（CSS3）
page
对象在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。（CSS3）
sticky
position
CSS3参考手册 | css88
text-align:center;
行内，行内块级
margin: auto;
vertical-align: middle;
块级block/inline-block
row > col |col-33
flex-wrap: wrap;
flex换行
flex-direction: column; /* 决定主轴的方向（即项目的排列方向） */
justify-content: center; /* -水平居中*/
父级设置
align-items: center; /* -垂直居中*/
子级设置
margin: auto; /* -垂直居中*/
CSS3弹性盒模型flexbox完整版教程-前端开发博客
new flex syntax(新的flex语法) CSS3弹性盒子模型演示-前端开发博客
使用 CSS 弹性盒 - CSS | MDN
好文章
弹性盒子flex/老弹性盒子box
CSS flex 属性 | 菜鸟教程
Flex 布局教程：语法篇 - 阮一峰的网络日志
固定:出现滚动条时，对象不会随着滚动
position: fixed;
弹性伸缩盒显示
display:flex
position: fixed; 与 display:flex 区别?
display: flex; 是父级容器显示方式
flex:1 或 flex-* 是子集元素的位置设计
display: flex; 与 css flex: 属性 区别?
CSS flex 属性
垂直居中
vertical-align: middle;
.parent {
display: table;
width: 200px;
height: 400px;
}
.child {
display: table-cell;
vertical-align: middle;
}
已知高度
Untitled node
需要容器随内容撑开的情况,如:
场景
表格table
Grid布局
transform: translate(-50%, -50%);
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
不确定高度
场景
动画transform
手段
CSS居中完整版 - 推酷
CSS居中完全指南 - 推酷
如何只用CSS做到完全居中 - 文章 - 伯乐在线
居中
解决方案
"流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。
float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。
定义
float: left;
width: 33%;
height: 50px;
Untitled node
浮动float
CSS Grid布局：网格的流动 - 推酷
display: grid
flex-wrap: wrap;
flex换行
display: flex
流动布局
响应式布局
自适应布局
响应式和自适应的区别 - Welcom to liuxuewei's zone - 开源中国社区
参考
设计
尺寸相关的盒子模型，普通流、浮动、绝对定位这三种定位机制
布局类型
是否存在高度
注意事项
Untitled node
参考