5.3-CSS面试题

掌握盒子模型水平垂直居中的五大方案

这个需求是我之前项目中非常常见的
刚开始我用了，新技术出来之后我又用了，过了段时间我又看掘金/博客又会了

定位：三种
（1）不知道父亲的宽高，但也要有，需要知道该子盒子的宽高

.box {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -250px;
        }

（2）需要该元素有宽高限制

   .box {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

（3）不需要该元素有具体宽高限制（兼容性不好）

 .box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

非定位
（4）弹性盒子模型（移动端常用）

body{
            display:flex;
            justify-content:center;
            align-items:center;
        }

（5）js实现模拟css写样式

（6）父级元素有固定宽高，display：table-cell;
把块级元素变成行内元素，用行内元素水平居中的方法（不用这种方法）

body {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            width: 500px;
            height: 500px;
        }
        
        .box {
            display: inline-block;
        }

CSS3盒子模型
（1）标准盒子模型（content-box）（W3C标准）
盒子的宽度为设置的宽度：

（2）ie怪异盒子模型（border-box）

使用box-sizing:border-box;可以设置为使用IE盒子模型，它的好处：设置了宽高为盒子的大小，而不是内容的大小，设置了宽高之后，盒子就固定了大小，设置padding和border时，它会自己通过缩放内容来实现整个盒子保持设置的宽高，这样写样式方便，不用来回算值，真实项目中常用。
我看了各大UI组件，都是设置box-sizing:border-box;所以这样会更规范。

（3）flex 弹性伸缩盒子模型

阮一峰flex布局

（4）column 多列盒子模型

几大经典布局方案

左右固定，中间自适应
圣杯布局

首先把left、middle、right都放出来
1.给它们三个设置上float: left, 脱离文档流；
2.一定记得给container设置上overflow: hidden; 可以形成BFC撑开文档
3.left、right设置上各自的宽度
4.middle设置width: 100%;
接下来比较重要了：
5.给left、middle、right设置position: relative;
6.left设置 left: -leftWidth, right设置 right: -rightWidth;
7.container设置padding: 0, rightWidth, 0, leftWidth;
作者：前端小然子
链接：https://juejin.cn/post/6844903817104850952
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处

<div class="container">
        <div class="conter"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

  html,
        body {
            height: 100%;
            overflow: hidden;
        }
        
        .container {
            height: 100%;
            padding: 0 200px;
        }
        
        .center {
            width: 100%;
            min-height: 400px;
            background: skyblue;
        }
        
        .left,
        .right {
            width: 200px;
            min-height: 200px;
            background: #ccc;
        }
        
        .left,
        .right,
        .center {
            float: left;
        }
        /* 因为都设置为了浮动，.center占了100%，所以其他的盒子换行
        设置margin-left的值为负值相当于左移了，左移100%就到起点了
        这里的100%是父盒子的值的百分比
        再设置相对定位的left，就可以左移到左边了 */
        
        .left {
            /* 这里的右外边距是浮动后的，
            中间的盒子的宽度的负值，
            这样本来被挤得换行的兄弟盒子可以显示在上边 */
            margin-left: -100%;
            position: relative;
            left: -200px;
        }
        
        .right {
            margin-right: -200px;
        }

双飞翼

<div class="clearfix">
        <div class="containter">
            <div class="center"></div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

     html,
        body {
            height: 100%;
            overflow: hidden;
        }
        
        .containter,
        .left,
        .right {
            float: left;
        }
        
        .containter {
            width: 100%;
        }
        
        .containter .center {
            margin: 0 200px;
            min-height: 400px;
            background: lightsalmon;
        }
        
        .left,
        .right {
            width: 200px;
            height: 200px;
            background: skyblue;
        } 
        
        .left {
            margin-left: -100%;
        }
        
        .right {
            margin-left: -200px;
        }

CSS3
CALC计算属性，性能不好

  .center {
            width: calc(100% - 400px);
            margin: auto;
            min-height: 400px;
            background: lightsalmon;
        }

使用计算属性确定.center的宽

flex布局实现的方法

 html,
        body {
            height: 100%;
            overflow: hidden;
        }
        
        .container {
            display: flex;
            /* 左中右布局 */
            justify-content: space-between;
            height: 100%;
        }
        
        .left,
        .right {
            /* 合写：放大的比例 缩小的比例 占据的固定的空间 */
            flex: 0 0 200px;
            height: 200px;
            background: lightblue;
        }
        
        .center {
            /* 0是既不放大，也不缩小，1是自动分配剩余空间 */
            flex: 1;
            min-height: 400px;
            background: lightsalmon;
        }

定位实现

      * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body {
            height: 100%;
            overflow: hidden;
        }
        
        .container {
            position: relative;
            height: 100%;
        }
        
        .left,
        .right {
            position: absolute;
            top: 0;
            width: 200px;
            min-height: 200px;
            background: lightblue;
        }
        
        .left {
            left: 0;
        }
        
        .right {
            right: 0;
        }
        
        .center {
            margin: 0 200px;
            min-height: 400px;
            background: #CCC;
        }

移动端响应式布局开发的三大方案

media
rem
flex 实现某些效果
vh/vm 相当于百分比
flex和vh/vm实现某一类需求