在这段时间的春招，有发现一些css问题有被说起，因此在这里总结一些关于css的知识(这段时间我遇到的这里总结下)，这里也不彻底，只是做者找的一些，麻烦各位大佬，提出一些，你们能够一块儿学习，我会实时更新到本文章，使文章愈来愈完整。css

居中问题

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

<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. 水平居中方法

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

a.使用margin

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

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

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

b. 使用text-align + inline-block

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

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

c. 使用 fit-content + margin

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

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

2. 垂直居中

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

a. 使用 table-cell + vertical-align

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

优势：不须要固定居中元素的高。oop

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个🤔)