# 布局
# 普通流
inline（行内元素）
display: inline;
使元素变成行内元素，与其他行内元素共享一行，不会独占一行。
- width: 不能更改元素的 width 的值，大小由内容撑开。
- height: 不能更改元素的 height 的值，大小由内容撑开。
- padding: 可以使用 padding，上下左右都有效.
- margin: 只有 left 和 right 产生边距效果，但是 top 和 bottom 就不行.
block（块级元素）
display: block;
使元素变成块级元素，独占一行，块级元素会默认填满父级元素的宽度.
- width: 能够改变元素的 height，width 的值
- padding: 可以设置 padding，margin 的各个属性值.
inline-block（行内块元素）
display: inline-block;
使元素变成行内元素，与其他行内元素共享一行，不会独占一行.
- width: 能够改变元素的 height，width 的值.
- padding: 可以设置 padding，margin 的各个属性值.
# 浮动布局
float（浮动布局）
float: none | left | right;
/* none 默认值，元素不浮动 */
设置元素的 float 属性后，该元素脱离标准文档流。 浮动的盒子会紧贴在一起，超出父元素的盒子会在下一行显示，此时元素具有和行内块元素相似的特点
注意：浮动的盒子只会影响浮动盒子后面的标准流，对之前的标准流不会影响
# 弹性布局
flex（弹性布局）
.container {
display: flex;
/* 任何一个容器都可以指定为flex布局 */
}
注意设置为 flex 布局之后，子元素的 float、clear、vertical-align 属性将失效
flex-direction: row | row-reverse | column | column-reverse;
/* 定义项目的排列方向： (默认)按行分布 | 按行颠倒 | 按列分布 | 按列颠倒 */
flex-wrap: nowrap | wrap | wrap-reverse;
/* 定义项目的换行方式：(默认)不换行 | 换行 | 换行后的项目在上 */
justify-content: flex-start | flex-end | center | space-around| space-between;
/* 定义项目在主轴的对齐方式：对齐起点 | 对齐终点 | 居中 | 两端对齐 | 两端贴边对齐 */
align-items: flex-start | flex-end | center | baseline | stretch;
/* (单行时) */
/* 定义每个项目在侧轴的对齐方式：对齐起点 | 对齐终点 | 居中 | 第一行文字基线对齐 | 默认值拉满 */
align-content: flex-start | flex-end | center | space-around | space-between | stretch;
/* (多行时) */
/* 定义主轴们在侧轴的对齐方式：对齐起点|对齐终点|居中|两端对齐|两端贴边对齐|默认值拉满| */
.item {
/* 简写 */
flex: auto | initial | none;
/* 关键字 */
flex: <number>;
/* 一个数字 代表 flex-grow */
flex: <length> | <percentage>;
/* 一个长度 代表 flex-basis */
flex: <number> <number> <length>;
/* flex-grow flex-shrink flex-basis */
order: <int>;
/* 定义项目的排列顺序 数值越小，排列越靠前 */
align-self: auto | flex-start | flex-end | center | baseline | stretch;
/* 改属性允许单个项目有与其他项目不一样的对齐方式：可覆盖align-items属性 */
}
# 网格布局
grid（栅格布局）
.container {
display: grid;
}
指定一个容器采用网格布局
grid-template-columns: <num>px <num>fr atuo;
grid-template-rows: <num>px <num>fr atuo;
/* 指定大小，指定占剩余未指定空间的份额，指定区间，浏览器自动分配; */
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
/* 可以以在两个网格之间插入方括号来指定网格线的名字 */
grid-row-gap: 20px;
/* 设置行间距 */
grid-column-gap: 20px;
/* 设置列间距 */
grid-gap: <grid-row-gap> <grid-column-gap>;
/* row-gap和olumn-gap的简写 */
# 表格布局
table（表格布局）
displa: table;
基本只在制作表格的时候使用
# 定位属性
position: static;
/* 默认值，没有定位，元素出现在正常的文档流中 */
position: absolute;
/* 生成绝对定位的元素，相对于第一个父元素进行定位，元素脱离文档流 */
position: relative;
/* 生成相对定位的元素，相对于其正常位置进行位移，元素仍在文档流中 */
position: fixed;
/* 生成绝对定位的元素，相对于浏览器窗口进行定位，常用于导航栏常驻; */
position: sticky;
/* 相当于static + fixed，可随文档一起滚动，但不会被卷动到视口之外 */
# 居中相关问题
# 水平居中
块级元素水平居中
margin: 0 auto;
.container {
height: 100px;
border: 1px solid #2c73ff;
}
.item {
height: 100px;
width: 200px;
margin: 0 auto;
background-color: #3eaf7c;
}
行内元素或行内块元素的水平居中
text-align
.container {
height: 100px;
border: 1px solid #2c73ff;
text-align: center;
}
.item {
color: #3eaf7c;
}
任意元素水平居中
flex
.container {
height: 100px;
border: 1px solid #2c73ff;
display: flex;
justify-content: center;
}
.item {
width: 200px;
height: 100px;
background-color: #3eaf7c;
}
网格居中
grid
.container {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
height: 100px;
border: 1px solid #2c73ff;
}
.item {
grid-column-start: 3;
background-color: #3eaf7c;
}
# 垂直居中
行内元素垂直居中
.container {
height: 100px;
border: 1px solid #2c73ff;
}
.item {
line-height: 100px;
color: #3eaf7c;
}
# 水平垂直居中
定位居中
.container {
height: 100px;
border: 1px solid #2c73ff;
position: relative;
}
.item {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #3eaf7c;
}
万能居中
flex
.container {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #2c73ff;
}
.item {
height: 50px;
background-color: #3eaf7c;
}
表格居中
table
.container {
width: 100%;
display: table;
height: 100px;
border: 1px solid #2c73ff;
}
.item {
display: table-cell;
width: 50px;
height: 50px;
vertical-align: center;
background-color: #3eaf7c;
}
网格居中