Web前端面试之页面布局(一)

解决方案一：浮动

解决方案二：绝对定位

解决方案三：flex布局

解决方案四：table表格布局

解决方案五：grid网格布局

拔高延伸部分

　　　　　　●  各个方法的优缺点比较：

　　　　　　　　 浮动的兼容性好，但是会脱离文档流，如果处理不好会导致其他问题；

　　　　　　　　 绝对定位最快捷，缺点是脱离了文档流，会导致后续的元素全部脱离文档流，导致这个方案的可使用性较差；

　　　　　　　　 flex布局是最完美的方案，但是IE8以下不兼容；

　　　　　　　　 表格布局在历史上评价不高，缺点很多，比如其中一个格子有内容，那么就会撑开其他的高度。优点是兼容性很好，网格布局可以做很多复杂的事情，并且代码量非常少；

　　　　　　　　 grid网格布局是最新的技术，低版本的浏览器兼容不是很好；

　　　　　　　●  如果高度不是已知，哪种方案依然适用；

　　　　　　　　 浮动和绝对定位不适用，flex和table布局都撑开了两边的高度，能继续使用；grid网格布局的高度则是根据内容的变化而变化；

　　　　　　　●  扩展问题都有可能问到浮动的解决，BFC等等知识点。

                         ●  每种方案的兼容性如何，哪种最实用；

　　　　　　   

页面布局小结：
　　　　　　　语义化掌握到位；不要一路div，要使用语义化标签，学会使用section，article等等
　　　　　　　页面布局理解深刻；清楚的写出代码
　　　　　　　CSS基础扎实；table，grid，flex等等知识点
　　　　　　　思维灵活且积极上进；gird是最新的技术，如果没有写出来的话体现不了积极上进，思维要灵
活，知道每个方案的优缺点和对比，方案要多才能体现
　　　　　　　代码书写规范；缩进，类名等等

页面布局的变通：

　　　　　　　　　三栏布局

　　　　　　　　　　●  左右宽度固定，中间宽度自适应

　　　　　　　　　　●  上下高度固定，中间高度自适应

　　　　　　　　　两栏布局

　　　　　　　　　　●  左宽度固定，右宽度自适应

　　　　　　　　　　●  右宽度固定，左宽度自适应

　　　　　　　　　　●  上高度固定，下高度自适应

　　　　　　　　　　●  下高度固定，上高度自适应

 

转载于:https://www.cnblogs.com/yjb18335717584/p/7514367.html