前端面试之3-1 页面布局（一）

一面就是考基础知识。

巧妇难为无米之炊，基础是重点，要充分，重点内容要准备。基础知识不过关，后面就无缘了。

知识要系统，前端知识点比较碎，有时候简单基础知识，有时候问综合问题，知识不系统，综合问题，有的点答不出来的。

沟通要简洁：一面特别重要，考察基础知识点，理论知识，答案相对比较固定，一语中的，三四面，描述一个项目，工作经验，多讲无所谓，注意条例就可以了。一面简洁是最重要的。

内心要诚实：我忘了，我看过，没记住，理解没那么深。老老实实说，这一块真的不了解，请教面试官应该看哪方面资料，补哪方面内容。不懂装懂，不是很好表现。

态度要谦虚：第一，不要因为一个题目，你觉得回答的比面试官认知深，不把面试官放在眼里。不管你的技术多强悍，与同事不能有鄙视的心态。实力再强，公司不接纳。目中无人，恃才傲物，死定了。

回答要灵活：很多候选人，回答问题，会根据自己认知经验下结论，不是好现象，不要把话说的太满。评价一个事物，往往认知不全面，比较片面。不要说这个事情就是这样，或者就不是这样。

页面布局：就可以看出什么水平。css基石就是盒模型。基石不清楚，不要谈论什么高级模型。DOM事件，校招必考。http协议，web应用，90%都是建立在这个协议上，包括https，http2。面向对象：京东那个例子。原型链：基础面试中，不止停留概念，更希望你说清始末，必考内容。

以上系统知识，

通信，安全，算法，要求没有上面高。属于难度的提升。

通信：跨域通信，普通前后端通信。

安全：csrf，xss 这块有免费课程。这里讲的不是很细，那个课一个小时。比较细。

算法：这个题目没有标准。不同公司，不一样哦。

王爷不举（网页布局）寂寞冷？心动（浮动）不定（绝对定位）探（弹性）望（网格）表哥（表格）

王爷不举（网页布局）寂寞冷？心动（浮动）不绝（绝对定位）探（弹性）望（网格）表哥（表格）。（又黄又乱伦的宫廷大戏开播了。。。。。。）

不考虑高度的话，其实容易很多。

分析题目：

1、点在于：真的字面这么简单吗？ 

2、答案应该怎么写？技巧在哪？

3、证明实力，那么该回答几种方法？

常见给出的答案：第一浮动，第二绝对定位。两种方案，你还没有及格分。看上去很简单，实际上要求你至少写出3种，及格，4种优秀。

这个题技巧在于：平时对css掌握，关于布局css用法掌握多少。第三个flexbox弹性布局。第四种：表格布局。第五种：网格布局。能把这些都说清楚，会有一个很高的评价。

怎么拔高：延伸性问题。稍后说，先说五种的代码。

emmet快速生成内容。

在生成代码之前，需要对初始样式清除，html*{padding：0；margin：0}，设置高度。

section标签包裹，article做包围框。div.left+div.right+div.center可以快速生成。中间部分写一点内容撑开。注意 .layout.float .left 是什么意思。它指的是ID为.layout.float下的子元素.left。中间没有逗号。

第一种方法，浮动布局