Git应用

weixin_55252478

已于 2022-08-16 16:33:20 修改

阅读量166

点赞数

文章标签： git

于 2022-08-15 18:53:43 首次发布

本文链接：https://blog.csdn.net/weixin_55252478/article/details/126352688

版权

本文介绍了Git的应用，包括vim编辑器的三种模式及其常用命令，git分支合并和团队合作的流程，以及如何处理合并冲突。同时讲解了git的tag管理和历史查看。还涉及到Git的图形化管理工具和如何配置文件忽略。此外，文章还深入探讨了前端开发中的元素分类与布局，如float、position、flex布局和grid布局的用法。

摘要由CSDN通过智能技术生成

Git应用

vim使用

三种模式

命令模式，输入模式，底线命令模式

vim常见命令

命令模式（command mode）

j   向下移动光标
h   向左移动光标
k   向上移动光标
l   向右移动光标

i		切换到插入模式
esc  	切换到命令模式
：		切换到底线命令模式

I  		移动到行首，并切换到插入模式					insert
i		移动到选中字母前，并切换到插入模式
a		移动到选中字母后，并切换到插入模式				append
A		移动到行尾，并切换到插入模式
o		移动到下一行，并切换到插入模式
O 		移动到上一行，并切换到插入模式

gg		光标移动到文件头
G		光标移动到文件尾
50G		跳转到第50行

dd		删除一行
cc		删除一行
yy		复制
p		粘贴

:		切换到底线命令模式

输入模式（insert mode）

底线命令模式（Last line mode）

w 					写入
w filename			另存为
q					退出
wq!					写入并强制退出

git分支合并

git branch					查看本地分支
git branch -t				查看远程分支

git branch <branchName>		创建本地分支
git merge  <branchName>    合并分支

git branch -d <branchName>   删除本地分支
git branch -D <branchName>    强制删除本地分支

git push origin --delete <branchName>    删除远程分支
git push origin :<branchName>			删除远程分支

练习

分别创建master分支和dev分支
在master分支下创建index.html，在dev分支下创建index.html
切换到master分支，合并dev分支
处理冲突

git团队合作

1.添加项目成员

2.协同开发

注意：在开发之前，先执行git pull命令

如果开发之前没有git pull，会出现下面错误：

如何处理？执行git pull

tag 里程碑

查看所有标签和指定标签

# 所有标签
git tag
git tag -l

# 指定标签
git tag -l <tagName>

在当前分支添加标签

git tag <name>
git tag -a <tagName> -m <备注内容>

删除本地标签

git tag -d <tagName>			   #删除本地标签
git tag -D <tagName>				#强制删除本地标签

把本地标签推送到远程仓库

git push origin --tags 			#推送所有标签
git push origin <tagName>		#推送某一个标签

删除远程标签
```
git push origin :<tagname>
```

查看远程标签

git ls-remote --tags origin				#查看远程标签

git历史

查看历史

git reflog				#列出简单历史
git log					#列出详细历史
git log --oneline		#单行查看
git log --graph			#图形查看

版本回退
```
git reset --hard <版本号>
```

git图形化管理工具

git文件忽略

创建.gitignore文件
```
touch .gitignore
```
打开.gitignore文件，写入忽略的文件或文件夹
```
node_modules
```

元素分类

行内元素
块级元素
行内块元素

布局分类

1.float 浮动

浮动元素的顶部，在标准文档流的底部

对div2进行浮动：浮动元素的顶部，在标准文档流的底部
对div3和div3进行浮动：浮动元素会显示在同一行，依次排列
对div2、div3和div4进行浮动：如果宽度不够，被浮动的元素会自动换行
对div2、div4进行浮动：浮动元素的顶部，在标准文档流的底部

2.position 定位

relative 相对定位：相对原来位置，偏移一定距离
absolute 绝对定位：相对于position不为static的父元素，偏移一定距离

父相子绝：父元素relative，子元素absolute
fixed 固定定位：相对浏览器定位
static 没有定位：

3.flex布局

父元素属性

flex-direction 调整主轴方向

row   				行排布
row-reverse			同一行反向排布
column				列排布
column-reverse		同一列反向排布

justify-content 主轴子元素排列

flex-start  		从头部排列
flex-end			从尾部排列
center				居中排列
space-around		平分剩余
space-between		两边贴边，平分剩余

align-items 侧轴方向，子元素的排列

flex-start			从上到下
flex-end			从下到上
stretch				拉伸（子元素去掉高度）
center				居中

flex-wrap属性子元素是否换行
```
wrap    换行
no-wrap    不换行
```
flex-flow 属性：复合属性，flex-direction和flex-wrap
```
flex-flow:row-wrap
```

align-content属性子元素整体，在父元素中的对齐方式

flex-start		侧轴头部排列
flex-end		侧轴尾部排列
center			居中排列
space-around	侧轴平分空间
space-between	两侧贴边，平分剩余空间

子元素属性

flex属性份数
```
flex:1
```

align-self属性自己的对齐方式

stretch			拉伸
center			居中
start			左对齐
end				右对齐

order属性排序

4.grid布局

grid-template-columns属性：设置列宽

.grid{
	display:grid;
	grid-template-columns:1fr 1fr 1fr;			#各占三分之一
	column-gap:24px;							#列间距
    row-gap:24px;								#行间距
}

align-items 竖直方向上对齐子元素

justify-items 水平方向上对齐子元素

center		居中对齐
end			靠右对齐
space-between	两端对齐

justify-content 对轨道水平方向对齐

center   			居中对齐
end					靠右对齐
space-between     	两端对齐

align-content 对轨道竖直进行对齐
```
center		居中对齐
end			靠下对齐
```

html文件

  <div class="container">
    <header></header>
    <sidebar></sidebar>
    <content></content>
    <footer></footer>
  </div>

css

    .container {
      width: 300px;
      height: 400px;
      /* border: 1px solid #000; */

      display: grid;

      /* 设置列宽和行高 */
      grid-template-columns: 100px 100px 100px;
      grid-template-rows: 100px 100px 100px 100px;

      /*间隔*/
      grid-row-gap: 10px;
      grid-column-gap: 10px;

      /* 进行位置排布 */
      grid-template-areas:
        "header header header"
        "sidebar content content"
        "sidebar content content"
        "footer footer footer"
      ;


    }

    /*给子元素起名字*/
    header {
      grid-area: header;
      background: #ef757f;
    }

    sidebar {
      grid-area: sidebar;
      background: #ffc65f;
    }

    content {
      grid-area: content;
      background: #70cfff;
    }

    footer {
      grid-area: footer;
      background: #73db91;
    }