一、Git
1、列举工作中常用的几个 git 命令？
bash
git rm 删除工作区文件，并将这次删除放入暂存区
git add 增加指定文件到暂存区
git init 新建初始化 git 代码库
git status 显示有变更的文件
git branch 列出所有分支
git commit -m [message] 提交暂存区到仓库区，可选填备注信息 message
git checkout -b [branch] 新建分支，并切换到该分支
git merge 合并分支二、HTML-C3
1、盒子水平垂直局中的方法
flex 布局
jsx
/* html代码: */
<div class="wrap">
<div class="box">
</div>
</div>
/* CSS代码： */
.wrap{
/* 设置为弹性布局 */
display: flex;
/* 子元素在主轴对齐方式为居中 */
justify-content: center;
/* 交叉轴在y轴对齐 */
align-items: center;
}Position + Transform
jsx
/* html代码: */
<div class="wrap">
<div class="box">
</div>
</div>
/* CSS代码： */
.wrap{
width: 600px;
height: 600px;
border: 2px solid black;
/* 设置为相对定位，用来作为绝对定位元素的容器块。 */
position: relative;
}
.box{
width:50px;
height: 50px;
/* 设置为绝对定位，位置在父容器的中心 */
position: absolute;
margin: auto;
left: 50%;
top:50%;
/* 向回移动自身一半的长宽 */
transform: translateX(-50%) translateY(-50%);
}利用Position + margin:auto
js
<style>
.father {
margin: 100px auto;
width: 500px;
height: 300px;
border: 1px solid #0a3b98;
position: relative;
}
.son {
width: 100px;
height: 40px;
background: #f0a238;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
<div class="father">
<div class="son"></div>
</div>inline-block
jsx
/* html代码: */
<div class="wrap">
<div class="box">
</div>
</div>
/* CSS代码： */
.wrap{
width: 600px;
border: 2px solid black;
/* 设置行高为600px */
line-height: 600px;
/* 让子盒子水平居中 */
text-align: center;
}
.box{
height: 50px;
width: 50px;
/* 设置为块级元素 */
display: inline-block;
/* 设置为垂直居中 */
vertical-align: middle;
background-color: red;
}table 布局
js
<style>
.father {
display: table-cell;
width: 200px;
height: 200px;
background: skyblue;
vertical-align: middle;
text-align: center;
}
.son {
display: inline-block;
width: 100px;
height: 100px;
background: red;
}
</style>
<div class="father">
<div class="son"></div>
</div>总结
根据元素标签的性质，可以分为：
- 内联元素居中布局
- 块级元素居中布局
内联元素居中布局
水平居中
- 行内元素可设置：text-align: center
- flex 布局设置父元素：display: flex ; justify-content: center
垂直居中
- 单行文本父元素确认高度：height === line-height
- 多行文本父元素确认高度：disaply: table-cell; vertical-align: middle
块级元素居中布局
水平居中
- 定宽: margin: 0 auto
- 绝对定位 + left:50% + margin: 负自身一半
垂直居中
- position: absolute 设置 left、top、margin-left、margin-top(定高)
- display: table-cell
- transform: translate(x, y)
- flex (不定高，不定宽)
- grid(不定高，不定宽)，兼容性相对比较差
2、BFC（经典面试题）
概念：
Block Formatting Context,翻译过来就是块级格式化上下文
bfc 实际是一种属性，拥有这种属性后，就会让该渲染区域独立，并且该渲染区域中的内容布局不会影响到外界
如何触发:
根元素(html)天然就会创建 BFC
float 属性不为 none
position 为 absolute 或 fixed
display 为 inline-block, table-cell, table-caption, flex, inline-flex
overflow 不为 visible
解决什么问题
- 外边距重叠
- 外边距重叠,要注意这不是 bug，规范就是这样的，当两个盒子上下同时拥有上下间距，会取最大值
- 清除浮动
- 当子盒子开启 float 后会影响后面的布局以及盒子高度
- 浮动覆盖
- 由于浮动导致盒子被覆盖
3、盒模型
盒模型主要分为 4 部分：内容、外边距、内边距、边框
Css3 盒子模型可以通过 box-sizing 来改变
标准盒模型（W3C 标准）：content-box 盒子实际宽度加上 padding 和 border
ie 盒模型/怪异盒模型/c3 盒模型：box-sizing: border-box; 设置 width 后，实际盒子的宽度就固定为该宽度，包含了 内容 + padding + border
4、flex：1
css
flex：1 → {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}- flex-grow:1
- flex-grow 是用来增大盒子的，比如，当父盒子的宽度大于子盒子的宽度，父盒子的剩余空间可以利用 flex-grow 来设置子盒子增大的占比
- flex-shrink: 1
- flex-shrink 用来设置子盒子超过父盒子的宽度后，进行缩小的比例取值
- flex-basis: 0%
- 设置盒子的基准宽度，并且 basis 和 width 同时存在会把 width 干掉
5、c3 新属性
- c3 盒模型 box-sizing
- flex 布局
- transition 过渡
- transform2D 转换
- background-size 背景缩放
- border-radius 圆角
- .......