1.css实现一个左侧固定20px，右侧响应式的布局
- flex，最便捷的方法，flex-grow可自由伸张，缺点：低版本IE不支持
HTML:
<div class="container">
<div class="left">左边</div>
<div class="right">右边</div>
</div>
css:
.container{
display: flex;
}
.container .right{
flex-grow: 1;
}
- 另外就是将左侧div浮动，右侧div设置margin-left
HTML:
<div class="outer">
<div class="sidebar">固定宽度区(sideBar)</div>
<div class="content">自适应区(content)</div>
</div>
<div class="footer">footer</div>
/*方法1*/
.outer{overflow: hidden; border: 1px solid red;}
.sidebar{float: left;width:200px;height: 150px; background: #BCE8F1;}
.content{margin-left:200px;height:100px;background: #F0AD4E;}
- 固定区采用绝对定位，自适应区设置margin
/*方法2*/
.outer2{position: relative;height:150px; border: 1px solid red;}
.sidebar2{position: absolute;left: 0;top:0;width:200px;height:100%;background: #BCE8F1;}
.content2{margin-left:200px;height:100px;background: #F0AD4E;}
- 标准浏览器的方法
/*方法3*/
.outer3{display: table;width:100%; border: 1px solid red;}
.sidebar3{display:table-cell;width:200px;height:150px;background: #BCE8F1;}
.content3{display:table-cell;height:100px;background: #F0AD4E;}
2.TCP三次握手
偶然看到的图片，记了好久没记住的三次握手一下就顿悟了
三次握手理解.jpeg
