界面与布局精校教程
CSS 显示模式与居中
从格式化上下文理解 block、inline、inline-block、vertical-align 与常见居中方案。
css属性
- Todo: 体系化css其它知识点
display属性
块级元素 block
❗ 提示
独占父元素的一行
可以设置宽高
默认高度由内容决定
行内元素 inline
共同点： 多个行内元素共同占父元素一行
行内替换元素
❗ 提示
如
img，video，input可以设置宽高 和其他行内元素在同一行
行内非替换元素
❗ 提示
多个行内元素共同占父元素一行
不能设置宽高，宽高由内容决定
行内块元素 inline-block
兼具行内元素和块级元素的某些特性
❗ 提示
可以设置宽高
多个元素共占一行
隐藏 none
dom中依然存在html标签结构
行盒:
❗ 提示
块级元素内（如有多行）： 每一行都会形成一个隐形的行盒，行盒的高度就是line-hight 行高的值 行内元素 ： 自身就是一个行盒
❗ 提示
特点： 行盒会使用尽量小的高度，包含行盒内所有的元素 即如果行盒内元素的line-height比行盒的line-height大，则会撑开行盒的高度，即行盒会变大，行盒内元素依然保持原来的（或者设定的）对齐方式
vertical-align属性
设置一个行盒(line box)内 行内级（inline-level）元素垂直方向的对齐方式
- baseline 默认属性，基线对齐，即字母x的底部对齐
- middle 字母x的交叉点对齐
- top 行盒顶线对齐
- bottom 行盒底线对齐
❗ 提示
使用line-height 和vertical-align 进行垂直居中并不能真正的居中，而是偏下一点，因为middle并不是中线对齐，x交叉点是偏下的
图片下边距问题
因为行盒的默认对齐方式的baseline，所以baseline以下会有一小部分的空白（基线与底线的距离）
解决方案：
- 设置图片的vertical-align为非 baseline （top/bottom/middle）
- 把img元素设置为 block
css居中方案
水平居中
- 行内元素
/* 设置父元素的 */
text-align：center
- 块级元素：
❗ 提示
（自身有宽度）设置自身元素的margin：0 auto； 公式 视口宽度 = margin- left + 元素的大小（包含border+padding）+margin-right
- 绝对定位：
❗ 提示
（自身有宽度）设置自身元素的 left0/right0/margin： 0 auto
- flex布局
justify-content：center
垂直居中
- 绝对定位 ：
元素有宽、高度
top0/bottom0/margin：auto 0
缺点：
必须使用定位，会脱标
- flex布局
❗ 提示
缺点：
- 兼容性（可忽略）；
- 所有item都会居中（可解决）
- 相对定位 + translate
.box {
position: relative;
height: 200px;
background-color: pink;
}
.box1 {
position: absolute;
height: 40px;
top: 50%;
transform: translateY(-50%);
background-color: #f00;
}
/** 注意： margin的百分比是相对于包含块的宽度，这里不能使用margin-top！！！ */
css文档描述语法
两种符号的区别
#分割，可以设置多组属性，多组之间使用逗号分隔
+分割 可以设置多组属性，多组之间使用空格分隔
