在这段时间的春招，有发现一些css问题有被提及，所以在这里总结一些关于css的知识(这段时间我遇到的这里总结下)，这里也不完全，只是作者找的一些，麻烦各位大佬，提出一些，大家可以一起学习，我会实时更新到本文章，使文章越来越完整。

居中问题

前提环境布置：后面代码都应用于本代码

<style>
        .outer {
            width: 300px;
            height: 300px;
            border: 1px solid #999;
        }
        .inner {
            width: 100px;
            height: 100px;
            border: 1px solid #999;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner">hello world</div>
    </div>
</body>
复制代码

1. 水平居中方法

前两节的适用性较小，更多方法放在第三节

a.使用margin

//使用方式
.inner {
display: block; /* 还可以是 table | flex | grid，但不能是 inline-xxx 即一定为块级元素*/
margin: 0 auto;
}
复制代码

原理：元素为块级元素，会独占一行，如果其宽度没有占满横向空间，那么剩余的空间就处于待分配状态，此时设置 margin:0 auto; 意味着把剩余的空间分配给 margin，并且左右均分，所以就实现了水平居中。

缺点：需要固定居中元素的宽。

b. 使用text-align + inline-block

//在之前的代码中添加下面两条
.outer {
  text-align: center;
}
.inner {
  display:inline-block;//或者inline等，text-align对块级元素无效
}
复制代码

适用于文本类型，内联元素。

c. 使用 fit-content + margin

.inner {
  width: fit-content;
  margin: auto;
}
复制代码

即使子元素是浮动元素也适用。 width:fit-content可以在实现元素收缩效果的同时，保持原本的block水平状态，于是，就可以直接使用margin:auto实现元素向内自适应同时的居中效果。

2. 垂直居中

这里搭配第一节的水平居中方法，也就可以实现水平垂直居中方法，就不放在第三节水平垂直居中里

a. 使用 table-cell + vertical-align

.outer {
  display: table-cell;/*此元素会作为一个表格单元格显示（类似 <td> 和 <th>）*/
  vertical-align: middle;
}
复制代码

优点：不需要固定居中元素的高。

b. 使用 inline-block + line-height

.outer {
  line-height: 300px;/*父元素需要设定高度*/
}
.inner {
  line-height: initial; /* 重置 */
  vertical-align: middle;
  display: inline-block;/*对象必须是文本，本来就是内联元素这一条代码可以没有*/
}
复制代码

元素的 height 和 line-height 相同的时候，会使其文本内容垂直居中。

缺点：需要知道其父元素高度。优点：不需要固定居中元素的高。

c. 使用伪元素，inline-block 元素特性

.outer::after {/*利用伪元素*/
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.inner {
  display: inline-block;
  vertical-align: middle;
}
复制代码

在居中元素的父元素上，使用一个伪元素，将这个伪元素设置为 inline-block 后，就好像它原来就是一个真正的 DOM 元素，存在于页面上。然后再将居中元素设置为 inline-block，根据 inline-block 的特性（多个相邻的 inline-block 元素会横向并排显示），居中元素会和伪元素横向并排显示。并且设置 vertical-align: middle; 后，它们会互相垂直对齐，最后将伪元素高度撑起来 height: 100%;，居中元素会对齐伪元素，从而实现了垂直居中。
优点：不需要固定居中元素的高。

3. 水平垂直居中

a. flex写居中

这也是我用的最多的

.outer {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
复制代码

b. grid写居中

.outer {
  display: grid;
}
.inner {
  justify-self: center; /* 水平居中 */
  align-self: center; /* 垂直居中 */
}
复制代码

c. 定位居中

absolute + transform

translate的两个值分别指定水平和竖直方向移动距离(以百分比计算时是以本身的长宽做参考的)

.outer {
  position: relative;
}
.inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /*因为上面的left和top各设置的50%，是把盒子的左上角移动到中心位置，
  而没有真正居中，所以需要使用transform微调，使内部盒子的中心位于外部盒子中点*/
}
复制代码

absolute + calc

calc不懂得可以点这里

.outer {
  position: relative;
}
.inner {
  position: absolute;
  left: calc(50% - 50px);/*减50px是因为50px正好是inner盒子宽高的一半*/
  /*这里减50px也是因为要把inner这个内部盒子的中心移到outer盒子的中心，和上一项同理*/
  top: calc(50% - 50px);
}
复制代码

absolute + 负 margin

.outer {
  position: relative;
}
.inner {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  /*这里的margin操作同样是为了使内部盒子的中心与外部盒子的中心重合，以居中*/
  margin-top: -50px;
}
复制代码

absolute + margin: auto

.outer {
  position: relative;
}

.inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
复制代码

该方案的原理是：使用了 CSS 中的定位属性（absolute、fixed 等）后，如果 left 设置了具体值，没有设置 right 和 width，那么就会自动计算，把剩余的空间分配给 right 和 width。如果 left、right 和 width 都设置了具体值，并且没有占满横向空间，那么剩余空间就处于待分配状态，此时设置 margin: auto; 意味着把剩余的空间分配给 margin，并且左右均分，所以就实现了水平居中，垂直方向同理。

注意：以上都需要固定居中元素的宽高。

left: 0; right: 0; 相当于 width: 100%;
top: 0; bottom: 0; 相当于 height: 100%;
复制代码

css画图形

这里放上我见过的几个，不全，会一直补充。。。

1.画一个三角型

<style>
        /* 写一个以顶边为底的三角型 至少设置三条边完成形状*/
        .parent{
            width: 0;
            height: 0;
            border-top: 100px solid #000;
            border-right: 100px solid transparent;
            /* transparent透明属性 */
            border-left: 100px solid transparent;
        }
    </style>
</head>
<body>
    <div class="parent">
    <!--空盒子-->
    </div>
</body>
复制代码

原理：
这里给个加四个边框的空盒子(就是没有内容，面积全由边框决定)

 <style>
        .parent{
            width: 0;
            height: 0;
            border-top: 100px solid black;
            border-right: 100px solid red;
            border-left: 100px solid yellow;
            border-bottom: 100px solid green;
        }
    </style>
</head>
<body>
    <div class="parent">
    </div>
</body>
复制代码

实现效果：

放大后的各边框的边界，就是这里就可以看到这样，是斜着相衔接的，盒子没有设置大小和内容，就能实现三角形效果

当只给设置两个边框时是什么样的三角形呢？

<style>
        .parent{
            width: 0;
            height: 0;
            border-top: 100px solid black;
            /* border-right: 100px solid red; */
            border-left: 100px solid yellow;
            /* border-bottom: 100px solid green; */
        }
    </style>
</head>
<body>
    <div class="parent">
    </div>
</body>
复制代码

要有效果显示，必须是相邻的边，下面的是top和left，是如下效果，如果是top和bottom，是没有效果显示的（动手试试）

2.画一个扇形

与画三角形同理，加一个border-radius

 <style>
        /* 写一个扇形 */
        .parent{
            width: 0;
            height: 0;
            border: 100px;
            border-style: solid;
            border-color: #000 transparent transparent;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="parent">
    </div>
</body>
复制代码

3.画一个正方体

 <style>
        .cube {
            font-size: 4em;
            width: 2em;
            margin: 1.5em auto;
            transform-style: preserve-3d;
            transform: rotateX(-35deg) rotateY(30deg);
        }

        .side {
            position: absolute;
            width: 2em;
            height: 2em;
            background: rgba(255, 99, 71, 0.6);
            border: 1px solid rgba(0, 0, 0, 0.5);
            color: white;
            text-align: center;
            line-height: 2em;
        }

        .front {
            transform: translateZ(1em);
        }

        .bottom {
            transform: rotateX(-90deg) translateZ(1em);
        }

        .top {
            transform: rotateX(90deg) translateZ(1em);
        }

        .left {
            transform: rotateY(-90deg) translateZ(1em);
        }

        .right {
            transform: rotateY(90deg) translateZ(1em);
        }

        .back {
            transform: translateZ(-1em);
        }
    </style>
</head>

<body>
    <div class="cube">
        <div class="side front">1</div>
        <div class="side back">6</div>
        <div class="side right">4</div>
        <div class="side left">3</div>
        <div class="side top">5</div>
        <div class="side bottom">2</div>
    </div>
</body>
复制代码

效果：

4. 写一个等宽高的自适应正方形

vw/vh

div{
  width :1vm;
  height:1vm;
}
复制代码

使用外层 relative，内层 absolute，与百分比设置宽度,实现里面带内容一起自适应变化

<style>
      .outer {
        padding-top: 50%;
        height: 0;
        background: #ccc;
        width: 50%;
        position: relative;
      }

      .inner {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: red;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner">HELLO</div>
    </div>
  </body>
复制代码

实现了自适应

5. 画一个箭头

<style>
        div{
            margin: 100px;
            height: 100px;
            width: 100px;
            border-top: 1px solid #000;
            border-left: 1px solid #000;
            transform: rotate(-0.125turn);/*指向左*/
            /*设置0.375turn就是指向右*/
        }
    </style>
</head>
<body>
    <div>
    </div>
</body>
复制代码

说说flex布局

这个可以看看这篇文章 flex布局复习笔记

说说css盒模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

标准盒模型：一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)

待续...

参考文章：水平垂直居中方法你会几种？

css的几个拷问项(慢慢会是N个🤔)