布局技巧全解析-优快云博客

两栏布局

html代码：

<body>  
	<div class="left"></div>  
	<div class="right"></div>
</body>

float + margin-left

.left{    
	width: 200px;    
	float: left;    
	background-color:blue;
}
.right{    
	margin-left:200px;    /*等于左边栏的宽度*/
	background-color:red;
}

flex布局

.container{    
	width: 100%;    
	height: 100px;    
	display: flex;    /*设置布局方式为flex布局，一定要在父元素上设置*/
}
.left{    
	flex-basis:200px;    /*定宽*/    
	background-color:blue;
}
.right{    flex:auto;    /*自动填满*/    
	background-color:red;
 }

3.grid布局

<body>
	<div class="container">   
		<div class="left"></div>   
		<div class="right"></div>
	</div>
</body>

.container{    
	width: 100%;    
	height: 100px;    
	display: grid;    /*设置为grid布局*/    
	grid-template-columns:200px auto;    /*设置每一列的宽度*/ 
}
.left{    
	background-color:blue; 
}
 .right{     
 	background-color:red;
  }

absolute + margin-left

.left{
	width:100px;
	background-color:red;
	position:absolute;
}
.right{
	background-color:green;
	margin-left:100px;
}

三栏布局

html代码：

    <div class="container">
        <div class="left">Left</div>
        <div class="right">Right</div>
        <div class="main">Main</div>
    </div>

1.浮动布局： float + margin

        body,html{
            height: 100%;
            padding:0;
            margin: 0;
        }
        /*左边栏左浮动*/
        .left{
            float:left;
            height:100%;
            width:100px;
            background:#ff69b4;
        }
        /*中间栏自适应*/
        .main{
            height:100%;
            margin:0 200px 0 100px;
            background: #659;
        }
        /*右边栏右浮动*/
        .right{
            float:right;
            height:100%;
            width:200px;
            background:#ff69b4;
        }

2.flex布局

     .container{
            display: flex;
        }
        .left{
            width:200px;
            background: red;
        }
        .main{
            flex: 1;
            background: blue;
        }
        .right{
            width:200px;
            background: red;
        }

grid网格布局

        .container{
            display: grid;
            width: 100%;
            grid-template-rows: 100px;  /*设置行高*/
            grid-template-columns: 100px auto 200px;  /*设置列数属性*/
        }
        .left{
            background: red;
        }
        .main{
            background: blue;
        }
        .right{
            background:red;
        }

table布局

         .container{
            display: table;
            width:100%;
        }
        .container>div{
            display: table-cell;
        }
        .left{
            width: 100px;
            background: red;
        }
        .main{
            background: blue;
        }
        .right{
            width: 200px;
            background: red;
        }

圣杯布局

    <div class="container">
        <div class="main col">Main</div>
        <div class="left col">Left</div>
        <div class="right col">Right</div>
    </div>

        /* 两边定宽，中间自适用 */
 body,html,.container{
            height: 100%;
            padding:0;
            margin: 0;
 }
 .col{
            float: left;   /* 三个col都设置float: left,为了把left和right定位到左右部分 */
            position:relative;
}
.container{
            padding:0 200px 0 100px;
 }
        /*左边栏*/
.left{
            left:-100px;
            width: 100px;
            height:100%;
            margin-left: -100%;
            background: #ff69b4;
}
        /*中间栏*/
.main{
            width:100%;
            height: 100%;
            background: #659;
 }
        /*右边栏*/
 .right{
            right:-200px;
            width:200px;
            height:100%;
            margin-left: -200px;
            background: #ff69b4;
 }

双飞翼布局

    <div class="container">
        <div class="main col ">
            <div class="main_inner">Main</div>
        </div>
        <div class="left col ">Left</div>
        <div class="right col ">Right</div>
    </div>

        body,html,.container{
            height: 100%;
            padding:0;
            margin: 0;
        }
        .col{ 
            float: left; /* 把left和right定位到左右部分 */
        }
        .main{ 
            width:100%;
            height:100%;
            background: #659;
        }
        .main_inner{   /* 处理中间栏的内容被遮盖问题 */
            margin:0 200px 0 100px;
        }
        .left{
            width: 100px;
            height: 100%;
            margin-left: -100%;
            background: #ff69b4;
        }
        .right{
            height:100%;
            width:200px;
            margin-left: -200px;
            background: #ff69b4;
        }

分支管理

1.创建与合并分支

每次提交，Git都把它们串成一条时间线，时间线就是一个分支，这个分支叫主分支，即master分支。HEAD严格来说不是指向提交，而是指向master，master才是指向提交的，所以，HEAD指向的就是当前分支。
一开始的时候，master分支是一条线，Git用master指向最新的提交，再用HEAD指向master，就能确定当前分支，以及当前分支的提交点。
每次提交，master分支都会向前移动一步，这样，随着你不断提交，master分支的线也越来越长。
当我们创建新的分支例如dev时，Git新建了一个指针叫dev指向master相同的提交，再把HEAD指向dev就表示当前分支在dev上。
而后新提交一次后，dev指针往前移动一步，而master指针不变。
假如在dev上的工作完成了，就可以把dev合并到master上------把master指向dev的当前提交，就完成了合并。
合并完分支后甚至可以删除dev分支。删除dev分支就是把dev指针给删掉，删掉后我们就剩下了一条master分支。

*实战：

1）创建dev分支，切换到dev分支

git checkout -b div表示创建并切换,
$ git checkout -b dev 相当于$ git branch dev + $ git checkout dev
2）用git branch命令查看当前分支

$ git branch
* dev
  master

git branch会列出所有分支，当前分支前面会标一个*号.
3）我们就可以在dev分支上正常提交，比如对readme.txt做个修改,随便添加一些内容

$ git add readme.txt 
$ git commit -m "branch test"
[dev b17d20e] branch test
 1 file changed, 1 insertion(+)

4）切换回master分支，查看readme.txt,没有后来添加的内容，因为是在dev分支上

$ git checkout master
Switched to branch 'master'

5）把dev分支的工作成果合并到master分支上：

$ git merge dev
Updating d46f35e..b17d20e
Fast-forward
 readme.txt | 1 +
 1 file changed, 1 insertion(+)

git merge命令用于合并指定分支到当前分支，这时查看readme.txt有添加的部分

6）删除dev分支，查看branch

$ git branch -d dev
Deleted branch dev (was b17d20e).

$ git branch
* master

2.解决冲突

当Git无法自动合并分支时，就必须首先解决冲突。解决冲突后，再提交，合并完成。
解决冲突就是把Git合并失败的文件手动编辑为我们希望的内容，再提交。
用git log --graph命令可以看到分支合并图

3.分支管理策略

合并分支时，加上--no-ff参数就可以用普通模式合并，合并后的历史有分支，能看出来曾经做过合并，而fast forward合并就看不出来曾经做过合并。

4. Bug分支

修复bug时，我们会通过创建新的bug分支进行修复，然后合并，最后删除；
当手头工作没有完成时，先把工作现场git stash一下，然后去修复bug，修复后，再git stash pop，回到工作现场。

5. Feature分支

开发一个新feature，最好新建一个分支；
如果要丢弃一个没有被合并过的分支，可以通过git branch -D <name>强行删除。

6.多人协作

查看远程库信息，使用git remote -v；
本地新建的分支如果不推送到远程，对其他人就是不可见的；
从本地推送分支，使用git push origin branch-name，如果推送失败，先用git pull抓取远程的新提交；
在本地创建和远程分支对应的分支，使用git checkout -b branch-name origin/branch-name，本地和远程分支的名称最好一致；
建立本地分支和远程分支的关联，使用git branch --set-upstream branch-name origin/branch-name；
从远程抓取分支，使用git pull，如果有冲突，要先处理冲突。