首先是HTML以及CSS篇，主要问题集中在CSS上

一、.说一下你常用的集中布局方式

答：这个你需要集中的往盒模型、flex布局说，还有一个grid布局，我浏览过，但是没有实际的用到过

二、.实现水平居中的几种方法？

答：1.对于行内元素：text-align:center;

       2.对于确定宽度的块级元素：margin和width实现水平居中；固定宽度块级元素水平居中，通过使用绝对定位，以及设置元素margin-left为其宽度的一半。

       3.对于未知宽度的块级元素：

           （1）table标签配合margin左右auto实现水平居中，使用table标签（或直接将块级元素设值为display:table），再通过给该标签添加左右margin为auto；

          （2）inline-block实现水平居中方法（存在问题：需额外处理inline-block的浏览器兼容性（））；

          （3）绝对定位实现水平居中，绝对定位+transform，translateX可以移动本省元素的50%

          （4）相对定位实现水平居中，用float或者display把父元素变成行内块状元素

          （5）CSS3的flex实现水平居中方法，法一

                        .contentParent{

                                 display: flex;

                                flex-direction: column;

                               }

                       .content{

                              align-self:center;

                             }

            （6）CSS3的flex实现水平居中方法，法二

                     .contentParent{

                             display: flex;

                         }

                     .content{

                             margin: auto;

                        }

            （7）CSS3的fit-content配合左右margin为auto实现水平居中方法

                        .content{

                              width: fit-content;

                              margin-left: auto;

                             margin-right: auto;

                        }

三、如何实现左右两栏一定比例，左栏高度随右栏高度自适应

答：

margin负值实现分栏高度显示一致可以说是最好的方法，还有其他一些轻便的替代方法。例如使用

min-height属性，IE6不支持

min-height但是

height会自动撑高，所以

min-height + 

_height的组合也是常用手段之一；另外就是使用背景图片了，利用背景图片的垂直平铺，可以模拟分栏的等高背景效果，但是，此方法对布局宽度有一定的要求，如果布局宽度改变，背景图片可能也要做一番修改。