面试如果问你三栏布局,怎样回答可以加分?
题目:假设高度已知,请写出三栏布局,其中左栏右栏宽度各为300px,中间栏自适应?
如果面试过程(多是一面)面试官问我们三栏布局,我们会怎么回答?
我们想回答多少种做法,回答一两种做法,只是勉强到及格线,
如果回答四五种,面试官可能就会觉得我们css基础掌握还不错
可是如果想在这道题目上加分,还得将题目延伸
a:假设我们回答出五种方法,那么这五种方法各自有什么优缺点?
b:假设去掉高度已知条件,这五种方法还能实现嘛?
c:五种方法的兼容性如何?
首先给出5种做法,float.absolute,flex,table,grid
假设高度为100px
1/5:float实现三栏布局
代码如下:
效果如下
float布局优缺点:
优先:兼容性好
缺点:浮动元素脱离文档流，要做清除浮动，这个处理不好的话，会带来很多问题，比如父容器高度塌陷等。
float有三个值：none、left、right（不浮动、向左浮动、向右浮动）；使用浮动时，整个元素块就会脱离文档流，也会脱离出该元素的父元素包含的范围，成为独立元素块，但该元素块不会影响它前面的元素块，但会影响它的父元素和父元素后面的兄弟元素、该元素下面的兄弟元素。
解决问题的本质是：把float的元素块控制在父元素的内部，使浮动效果只在父元素内。有两种方法：
1、父元素使用overflow：hidden、auto、scroll。 原理是：对父元素的子元素进行计算，判断是否有超出父元素的大小，这样就会促使对float元素计算在内，使float元素块被控制在父元素内，不会脱离父元素的范围，依然是父元素的一部分。这样就只是在父元素内float，父元素外依然是正常流分布。
2、在float元素的下一个兄弟元素内使用clear:both;是该兄弟元素认为float元素依然存在正常文档流中，这样也起到和上面1相同的作用。
目的：让float元素块控制在父元素的范围内，成为父元素的一部分，只在父元素内部起到浮动作用。不会脱离父元素的包围范围内。
优缺点内容来自(https://www.jianshu.com/p/bbde87714e5f)
假设高度不确定,当float的元素高度超过同一行其他的元素后,会变成下面这样
2/5:absolute实现三栏布局
代码如下:
绝对定位解决方案
效果如下
绝对定位布局优缺点:
优点:快捷，方便，不容易出问题
缺点:容器脱离了文档流，后代元素也脱离了文档流，高度未知的时候，会有问题，这就导致了这种方法的有效性和可使用性是比较差的。
假设高度不确定,三栏的高度有可能一个高一个矮,需要另外处理
3/5:flexbox实现三栏布局
代码如下:
flexbox解决方案
效果如下
flexbox布局优缺点:
优点:flexbox布局是css3里新出的一个，它就是为了解决上述两种方式的不足出现的，是比较完美的一个。目前移动端的布局也都是用flexbox。
缺点:部分浏览器,一些较低版本的浏览器不支持
假设高度不确定,由于flex容器内的元素flex-shrink属性默认值为1,所以当任何一栏高度撑开时,另外两栏也会跟着撑开
4/5:table布局实现三栏布局
代码如下:
table解决方案
效果如下:
表格布局优缺点:
优点:兼容性很好,在flex布局不兼容的时候，可以尝试表格布局。当内容溢出时会自动撑开父元素。
缺点:①无法设置栏边距；②对seo不友好；③当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高的，第三点看实际需求,可能是优先,可能是缺点
假设高度不确定,内容溢出时会自动撑开父元素,当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高
5/5:网格布局(grid)实现三栏布局
代码如下:
网格布局解决方案
效果如下:
网格布局优缺点:
优点:Grid是创建网格布局最强大和最简单的工具。就像表格一样，网格布局可以让Web设计师根据元素按列或行对齐排列，但他和表格不同，网格布局没有内容结构，从而使各种布局不可能与表格一样。例如，一个网格布局中的子元素都可以定位自己的位置，这样他们可以重叠和类似元素定位。
缺点:网格布局的兼容性不好,IE10+上支持，而且也仅支持部分属性。
假设高度不确定,网格布局也比较灵活
PS:如果不熟悉flexbox布局和网格布局(grid)相关的知识,建议读一读阮一峰大神的网络日记,
读的过程自己动手操作一次,很快就可以掌握
Flex 布局教程：语法篇
Flex 布局教程：实例篇
CSS Grid 网格布局教程
第一篇文章打卡,个人博客暂时选择CSDN了,
有访问量的记录,看到访问量慢慢增加,比较容易有坚持下去的动力
要有危机意识,哪天公司不要你了,你能够很快找到另一家公司嘛?