二，自适应两栏布局
这篇博文里介绍了将会用到的元素和样式属性 https://blog.csdn.net/xnh_565175944/article/details/80468282
1. 实现效果:
实现两栏布局，且效果随着浏览器的变化会适应浏览器的变化.
2. 整体思路:
首先给2个div块级元素设置好class用来绑定样式，再通过css文件关联到两个div的class，通过设置两个div的位置和样式实现简单版的自适应两栏布局.
3. 设计细节:
(1).html设计:
设置div元素和div元素的class
html代码如下:
<div class="right"></div> //设置两个div的class
<div class="left"></div>
(2).css设计:
首先先将所有标签的内外边距设置为0
*{
margin: 0;
padding: 0;
}
right样式设计
我们设计的时候需要一个参照物，所以我们设置position为absolute，在这里的意思是相对于html文档的位置
我们再设计它的宽和高都为100像素，背景颜色为绿色，位置为右边。
这样right就紧紧的贴在浏览器右边了，不论浏览器怎么变大或缩小，right的大小不会改变位置也是紧贴着右上角。
.right{
position: absolute;
width: 100px;
height: 100px;
background-color:green;
right: 0;
}
效果如下:
left设计:
这个时候我们只需要通过参照right来设计left的位置和样式即可实现最终效果。
因为right占据了左边高100px和宽100px的位置，所以我们首先得设置一下此div的右边距为100px，这样left就会和right完全的分隔开。
这个时候只需要设置一下高度和背景颜色即可实现.
.left{
height: 100px;
background-color: yellow;
margin-right: 100px;
}
最终效果:
