先按照同学写的例子，是左右拖动的改一下，需要搞清楚的是 css 布局的内容。
参考文章链接：https://www.jianshu.com/p/014380e6ae50
温习盒子模型中的布局模型：主要是层模型
1.基本概念：
CSS包含3种基本的布局模型：流动模型（Flow）、浮动模型 (Float) 和层模型（Layer）。
2.流动模型（Flow）：
流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
流动布局模型具有2个比较典型的特征：
第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
第二点，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）（非常类似Linearlayout里面的垂直和水平的属性）
3.浮动模型（Float）：
将块状元素定义为浮动就可使其在一行显示出。
左浮动：div{ border:2px red solid; float:left; } <div id="div1">左1</div> <div id="div2">左2</div>
右浮动：div{ border:2px red solid; float:right; } <div id="div1">右1</div> <div id="div2">右2</div>
一左一右：#div1{float:left;} #div2{float:right;} <div id="div1">左1</div> <div id="div2">右1</div>
4.层模型（Layer）：
如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。
层模型有三种形式： 绝对定位(position: absolute)、相对定位(position: relative)、固定定位(position: fixed)
绝对定位(position: absolute)：需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后选定一个最接近该元素的并且具有定位属性的父控件作为定位参照物， 如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。选定好定位的参照物之后，设定left、right、top、bottom的值进行定位，注意例如 left：20px； 是说本身元素定位的地址是元素左边距离参照物为20px.而不是向左移动20px。
相对定位(position: relative)：需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。
相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后选定以前的位置为定位参照物，left、right、top、bottom属性确定和以前的位置的距离，
注意：偏移前的位置保留不动，这句话的意思，你可以把相对定位想象成他又分身了一下，把之前的位置保留但是隐藏了自己，新的分身根据方向和距离进行新的定位。所以隐藏了自己的人，他还是存在该文档中，所以他后面的元素还是照常显示，只不过他仅仅隐藏了自己。
固定定位(position: fixed)：fixed定位与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。（例如： 直达顶部的按钮）
position: absolute与position: relative结合实现相对于父辈元素进行绝对定位，需要遵循以下规范：
1、参照定位的元素必须是相对定位元素的前辈元素：
<div id="box1"><!--参照定位的元素-->
<div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>
从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。
2、参照定位的元素必须加入position:relative;
#box1{
width:200px;
height:200px;
position:relative;
}
3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
#box2{
position:absolute; top:20px; left:30px;
}
这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。
下面上代码，实现在vue中上下拖动改变div宽高，本文应用场景为div中使用<svg>画一些图标。
<html>：
<div id="svgBox">
<div id="svgTop">
<svg width="100%" id="controllerSvg"></svg>
</div>
<div id="svgResize"></div>
<div id="svgDown" style="border-top: 1px solid #b5b9a9; ">
<svg width="100%" height="auto" id="serverSvg"></svg>
</div>
</div>
总体结构分为三部分，上div，分界线，下div。然后把这三个div放在一个大的div里面。
这四个div的css样式如下：
<style>：
#svgBox{
width:100%;
height:100%;
position: relative;
overflow:hidden;
}
#svgTop{
height:calc(30% - 5px);
width:100%;
float:left;
overflow: auto;
}
#svgResize{
position: relative;
height:5px;
width:100%;
cursor: s-resize;
float:left;
}
#svgDown{
height:70%;
width:100%;
float:left;
overflow: hidden;
}
然后在该页面中编写逻辑代码，我用的框架是vue，先将其写成一个method，然后在mounted() 生命周期里面调用该方法。
<methods>：
dragControllerDiv : function () {
$(document).ready(function(){
var svgResize = document.getElementById("svgResize");
var svgTop = document.getElementById("svgTop");
var svgDown = document.getElementById("svgDown");
var svgBox = document.getElementById("svgBox");
svgResize.onmousedown = function(e){
var startY = e.clientY;
svgResize.top = svgResize.offsetTop;
document.onmousemove = function(e){
var endY = e.clientY;
var moveLen = svgResize.top + (endY - startY);
var maxT = svgBox.clientHeight - svgResize.offsetHeight;
if(moveLen<30) moveLen = 30;
if(moveLen>maxT-30) moveLen = maxT-30;
svgResize.style.top = moveLen;
svgTop.style.height = moveLen + "px";
svgDown.style.height = (svgBox.clientHeight - moveLen - 5) + "px";
}
document.onmouseup = function(evt){
document.onmousemove = null;
document.onmouseup = null;
svgResize.releaseCapture && svgResize.releaseCapture();
}
svgResize.setCapture && svgResize.setCapture();
return false;
}}
)
},
<mounted>:
this.dragControllerDiv();
这里面要注意的就是，e.clientY/offsetTop 这些属性，都是获取的哪个对象的值，然后根据自己的页面实际调整。结合上面温习的盒子模型，搞清楚层模型中的定位的用法。
发现问题以及反馈：
整个#svgBox的高度未固定住，当上下拖动拖动条时，#svgDown的高度没变，反而是#svgBox的高度在变化。和我们想要的效果恰恰相反，我们预期效果应该是把#svgBox高度固定，拖动的时候，#svgTop和#svgDown的高度随之变化。
更正这个bug，我们根据屏幕分辨率不同，获取到当前屏幕的高度，然后把屏幕高度的40%赋值给#svgBox的高度。代码如下：
var h = window.screen.height;
console.log(h);
var svgBox = document.getElementById("svgBox");
svgBox.style.height = h * 0.4 + "px";
此时就可以将#svgBox的高度固定住。
