面试视频知识点整理1-3（页面布局）

1、准备要充分，知识要系统，沟通要简洁，内心要诚实，态度要谦虚，回答要灵活（不能把话说太死）

2、面试模拟

 

  1）页面布局

 

       1 、使用浮动

             给三个div设置高，然后div.left div.right div.center;div.center必须放在div.left及div.right节点下面。（个人理解：浏览器渲染会先计算上面两浮动节点的宽，

             然后在对下面没有浮动的进行自适应，同理，左边写死右边自适应，div.left，div.center）

       2、使用绝对定位

             给三个div设置高，然后div.center设置left:300px;right:300px;(个人理解，给中间center同时设置left和right则会盒子拉伸自适应)

       3、使用flex布局

             给三个div设置高，然后给div.center设置flex-grow:1;则会自适应剩余空间

       4、使用table布局

            给父盒子设置display：table，子盒子设置display：table-cell,并且设置高，中间盒子不设置宽

       5、使用网格布局

            给父盒子设置display:grid,grid-template-rows:100px,grid-template-columns:300px auto 300px

       延伸：

          1、5种方案的优缺点

                浮动：缺点是需要清除浮动，优点是兼容性好

                绝对定位：缺点是脱离文档流可使用性差，优点是快捷，配合js用很方便

                flex：为了解决上面两种方案的不足而出现的，当前比较完美的解决方案

                table：优点是兼容性比较好，缺点是高不能齐平

                网格布局：优点是布局方便，代码简洁

          2、去掉高度还有哪个适用

                浮动：不在适用

                绝对定位：不在适用，同行高度不撑开，内容会溢出

                flex：依然适用，同行内将撑开高度

                table:依然适用，同行内将撑开高度

                网格布局：不在适用，同行高度不撑开，内容会溢出

          页面布局总结：

               语义化掌握到位（不要通篇div）

               页面布局理解深刻（原理要懂）

         页面布局的变通：

               三栏布局：

•      左右宽度固定，中间自适应
•      上下高度固定，中间自适应             

               两栏布局

•      左宽度固定，右自适应
•      右宽度固定，左自适应
•      上高度固定，下自适应
•      下高度自适应，上自适应

github:   https://github.com/llcMite/interview.git