前端rem布局配置

目录

一、行内块级水平垂直居中方案。

二、定位实现水平垂直居中方案（一）

三、定位实现水平垂直居中方案（二）

四、定位实现水平垂直居中方案（三）

五、定位实现水平垂直居中方案（四）

六、flex方案

七、Grid方案

八、两列布局法

1、float+calc（）完成左列定宽，右列自适应

2、float+margin-left   完成左列定宽，右列自适应

3、position: absolute;+   margin-left   完成左列定宽，右列自适应

4、float+overflow   完成左列定宽，右列自适应

---

一、行内块级水平垂直居中方案。

1、设置行高等于容器高度；

        2、通过text-align：center；实现水平居中

.box{
            line-height: 200px;
            text-align: center;
        }

1、将子集元素设置为水平块级元素

        2、通过tical-aline：middle；实现垂直居中

.box1{
           display: inline-block;
           vertical-align: middle;
        }

二、定位实现水平垂直居中方案（一）

1、使子元素相对于本元素定位

        2、开启绝对定位

        3、设置该元素的偏移量，值为50%减去宽度/高度的一半

.box{
            width: 200px;
            height: 200px;
            background-color: aqua;
            position: relative;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: antiquewhite;
          position: absolute;
          left: calc(50% - 50px);
          top: calc(50% - 50px);
        }

<div class="box">
        <div class="box1">

        </div>
    </div>

三、定位实现水平垂直居中方案（二）

1、使子元素相对于本元素定位

 2、开启绝对定位

 3、设置该元素的偏移量，值为50%

4、再向上、向左移动50px；（盒子宽高的一半）

.box{
            position: relative;
        }
        .box1{
          position: absolute;
          left: 0;
          top: 0;
          margin-left: -50px;
          margin-top: -50px;
        }

四、定位实现水平垂直居中方案（三）

1、使子元素相对于本元素定位

 2、开启绝对定位

3、将元素拉满整个容器

4、通过margin：auto；实现水平居中

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

五、定位实现水平垂直居中方案（四）

1、使子元素相对于本元素定位

 2、开启绝对定位

 3、设置该元素的偏移量，值为50%

4、通过transform: translate(-50%,-50%);反方向偏移的方式，实现居中

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

六、flex方案

1、将元素设为flex布局

2、通过justify-content: center;和align-items: center;实现

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

.box1{
            background-color: violet;
            width: 100px;
            height: 100px;
        }

或者通过margin: auto;来实现也可

.box1{
            margin: auto;
        }

七、Grid方案

1、将元素至设为Grid元素

2、 通过 items来实现

.box{
          justify-items: center;
          align-items: center;
        }

3、或者    通过 centent来实现

.box{
           justify-content: center;
          align-content: center;
        }

4、过着通过self属性

.box1{
          align-self:center;
          justify-self: center;
        }

5、或者通过margin: auto;来实现也可

.box1{
            margin: auto;
        }

注意：content   缩写：place-content: center;

            self  缩写：place-self: center;

           items  缩写：place-items: center;

八、两列布局法

1、float+calc（）完成左列定宽，右列自适应

1、左列设置浮动

        2、右列设置浮动

        3、宽度减去左列的宽度

.box{
            float: left;
        }
        .box1{
          float: left;
          width: calc(100% - 50px);
        }

2、float+margin-left   完成左列定宽，右列自适应

1、左列设置浮动

2、通过外边距的方式使该容器的左边有100px

.box{
            float: left;
        }
        .box1{
          margin-left: 100px;
        }

3、position: absolute;+   margin-left   完成左列定宽，右列自适应

1、开启定位，脱离文档流

2、2、通过外边距的方式使该容器的左边有100px

.box{
           position: absolute;
        }
        .box1{
          margin-left: 100px;
        }

4、float+overflow   完成左列定宽，右列自适应

1、左列设置浮动

2、右侧自适应元素设置，overflow  会创建一个BFC完成自适应

.box{
           float: left;
        }
        .box1{
          overflow: hidden;
        }