面试之路
自学前端以来，在今年四五月还有暑假投了一些实习生岗位，深深的感到自己还有很多欠缺，每次面试也都发现自己遗漏了许多知识点。现在想把他们记录下来，为了自己方便查阅，也为了“金九银十”更好地找工作。
常见的布局
1.两列布局
1.1左侧固定宽度，右侧自适应宽度
1 //方法一 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>两列布局</title> 7 <style type="text/css"> 8 #side{ 9 background: red; 10 height: 400px; 11 width: 120px; 12 float: left;//左浮动 13 } 14 #main { 15 background:pink; 16 height: 400px; 17 margin-left: 120px; 18 } 19 </style> 20 </head> 21 <body> 22 <div id="side">side的内容</div> 23 <div id="main">main的内容</div> 24 </body> 25 </html>
效果：当我们拖动浏览器窗口变大变小时，#main的宽度也会跟着改变 
1 //方法二 2 <style type="text/css"> 3 *{ 4 padding:0; 5 margin: 0; 6 } 7 #side{ 8 background: red; 9 position:absolute;//用绝对定位，但要指定宽和高，否则盒子会自适应内容大小 10 top: 0; 11 left:0; 12 width:120px; 13 height:400px; 14 } 15 #main { 16 background:pink; 17 height: 400px; 18 margin-left: 120px; 19 } 20 </style>
1.2左侧固定宽度，高度自适应右侧
1 //div 2 <div id="wrap"> 3 <div id="side">side的内容</div> 4 <div id="main">main的内容</div> 5 </div> 6 7 //css 8 *{ 9 padding:0; 10 margin: 0; 11 } 12 #wrap{ 13 position: relative; 14 border:2px solid #000;//方便起见，给包裹层加了边框 15 } 16 #side{ 17 background: red; 18 position:absolute; 19 top: 0; 20 left:0; 21 bottom:0;//*** 22 300px; 23 } 24 #main { 25 background:pink; 26 height: 400px; 27 margin-left: 300px; 28 }
效果：左侧没有定高，右侧也没有定宽。左侧的高度自适应右侧。***这句不可缺少，否则固定定位的元素根据内容自适应大小。
2.三列布局
2.1两边固定宽度，中间自适应宽度
//div：利用float <div id="side">side的内容</div> <div id="side1">side1的内容</div> <div id="main">main的内容</div> //css *{ padding:0; margin: 0; } #side{ background: red; float: left; height: 400px; 120px; } #main { background:pink; height: 400px; border:3px solid #000; } #side1 { background: yellow; height: 400px; 120px; float: right; }
效果：
两边的宽度固定，中间是自适应宽度，可以随着浏览器大小而调整。
这里有话说：main的宽度是多少？（面试中遇到的）main占了整个窗口的宽度，因为side和side1都是浮动元素，不占据文档流，因此main占了整个宽度。但是为什么“main的内容”出现在这个位置而不是被side遮住。这里我理解的是，如果是内联元素，则元素会环绕浮动元素排列。（如果有不对的地方还请指正）
1 //方法二:利用定位 2 //css 3 #side{ 4 200px; 5 height:400px; 6 background:red; 7 position:absolute; 8 left:0; 9 top:0; 10 } 11 #main{ 12 height:400px; 13 margin:0px 310px 0 210px; 14 background:pink; 15 } 16 #side1{ 17 height:400px; 18 300px; 19 position:absolute; 20 top:0; 21 right:0; 22 background:yellow; 23 }
效果：左右两列绝对定位，分别靠左和靠右，中间为相对定位，左右margin分别设置为两列的宽度即可。如果列与列之间需要间隙，则增加相应的nargin值。
更新中。。。