前端面试知识准备总结

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