经典实现

居中布局

1.1 定位+移动

父元素包裹子元素，子元素居中

1. 父元素：position: relative，任意宽高，
2. 子元素：position: absolute，平移50%父元素相对位置，返回50%自身位置

元素居中

<template>
  <div class="center-parent1">
    <div class="center-child1">元素居中</div>
  </div>
</template>
<style>
  .center-parent1 {
    position: relative;
    border: 1px solid #d92424;
    height: 250px;
    width: 250px;
  }

  .center-child1 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
</style>

Expand Copy Copy

1.2 定位+边距

1. 父元素：position: relative，任意宽高，
2. 子元素：position: absolute，平移50%父元素相对位置，返回50%自身位置

注意： margin 需要是具体的数字，因为 margin 的百分比依然是父级的

元素居中

<template>
  <div class="center-parent2">
    <div class="center-child2">元素居中</div>
  </div>
</template>
<style>
  .center-parent2 {
    position: relative;
    border: 1px solid #d92424;
    height: 250px;
    width: 250px;
  }

  .center-child2 {
    position: absolute;
    border: 1px solid #ccc;
    left: 50%;
    top: 50%;
    width: 100px;
    height: 100px;
    margin-left: -50px;
    margin-top: -50px;
    text-align: center;
  }
</style>

Expand Copy Copy

1.3 flex 居中

1. 父元素
   • 设置 flex 布局
   • 设置项目居中排列
   • 设置项目

注意： margin 需要是具体的数字，因为 margin 的百分比依然是父级的

元素居中

<div class="center-flex">
  <div>元素居中</div>
</div>
<style>
  .center-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
  }
</style>

Expand Copy Copy

1.4 table 居中

• 使用display: table使 center 成为一个<table>元素。
• 设置height和width使元素填充其父元素内的可用空间。
• 使用display: table-cell使得子元素为一个<td>元素。
• 在子元素上使用text-align: center和vertical-align: middle使其水平和垂直居中。

Ps: 外部父级 ( .container) 必须具有固定的 width 和 height。

文字居中

<div class="center-table">
  <div class="center-table-child">
    <span>文字居中</span>
  </div>
</div>
<style>
  .center-table {
    border: 1px solid #9c27b0;
    height: 250px;
    width: 250px;
  }

  .center-table-child {
    display: table;
    height: 100%;
    width: 100%;
  }

  .center-table-child > span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }
</style>

Expand Copy Copy

1.5 absolute + margin auto

1. 父元素：设置相对定位，不定宽高

2. 子元素：

   • 子元素定宽定高
   • 子元素绝对定位 left:0;right:0;top:0;bottom:0; margin:auto;

注：子元素需要定宽高，否则会跟随父元素宽高

元素居中

<template>
  <div class="center-parent-5">
    <div class="center-child-5">元素居中</div>
  </div>
</template>
<style>
  .center-parent-5 {
    position: relative;
    height: 200px;
  }

  .center-child-5 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    border: 1px solid #ccc;
    width: 100px;
    height: 100px;
    text-align: center;
  }
</style>

Expand Copy Copy

1.6 absolute + calc

父元素包裹子元素，子元素居中

1. 父元素：定义相对定位，任意宽高
2. 子元素：
   • 子元素定宽定高
   • 子元素绝对定位 left:calc(50% - width/2px);top:calc(50% - height/2)

注：子元素需要定宽高，与 1.2 类似

元素居中

<template>
  <div class="center-parent-6">
    <div class="center-child-6">元素居中</div>
  </div>
</template>
<style>
  .center-parent-6 {
    position: relative;
    border: 1px solid #d92424;
    height: 200px;
    width: 200px;
  }

  .center-child-6 {
    position: absolute;
    left: calc(50% - 50px);
    top: calc(50% - 50px);
    text-align: center;
    height: 100px;
    width: 100px;
    border: 1px solid #ccc;
  }
</style>

Expand Copy Copy

1.7 grid

利用 grid 使项目居中

• 使用display: grid创建网格布局。
• 用于justify-content: center将项目水平居中。
• 用于align-items: center将项目垂直居中。

居中的项目

<div class="grid-centering">
  <div class="child">居中的项目</div>
</div>
<style>
  .grid-centering {
    display: grid;
    justify-content: center;
    align-items: center;
    height: 100px;
  }
</style>

Expand Copy Copy

三角形

原理：宽高都为 0 的正方形，设置边框颜色，当其中另外三边颜色为透明时，就会得到一个三角形

<template>
  <div class="triangle"></div>
</template>
<style>
  .triangle {
    width: 0;
    height: 0;
    border: 50px solid pink;
    border-bottom-color: green;
    border-left-color: yellow;
    border-right-color: orange ;
  }
</style>

Expand Copy Copy

超出文本省略

4.1 单行文本溢出省略

 {
  white-space: nowrap; /*强制文本在一行内显示，不换行*/
  overflow: hidden; /*超出部分隐藏*/
  text-overflow: ellipsis; /*文本溢出时显示省略标记 */
}

注：需要设置 width 或者是 max-width

我是文本我是文本我是文本我是文本我是文本我是文本

<template>
  <div class="text-box-1">
    我是文本我是文本我是文本我是文本我是文本我是文本
  </div>
</template>
<style>
  .text-box-1 {
    border: 1px solid #ccc;
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>

Expand Copy Copy

4.2 多行文本溢出省略

 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /*想展示几行*/
  overflow: hidden; /*超出部分隐藏*/
}

注：需要设置 width 或者是 max-width，只适用于 webkit 内核的浏览器

我是文本我是文本我是文本我是文本我是文本 我是文本我是文本我是文本我是文本我是文本 我是文本我是文本我是文本我是文本我是文本

<template>
  <div class="text-box-2">
    我是文本我是文本我是文本我是文本我是文本
    我是文本我是文本我是文本我是文本我是文本
    我是文本我是文本我是文本我是文本我是文本
  </div>
</template>
<style>
  .text-box-2 {
    border: 1px solid #ccc;
    width: 200px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

Expand Copy Copy

翻转卡片

利用backface-visibility属性，定义当元素不面向屏幕时是否可见。

• 正反面设置不同颜色和rotateY
• 设置hover翻转

<div class="wrapper">
  <div class="card one"></div>
  <div class="card two"></div>
</div>
<style>
  .wrapper {
    position: relative;
    width: 120px;
    height: 200px;
  }
  .card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transition: all 0.3s;
    cursor: pointer;
  }
  .card.one {
    background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);
  }
  .card.two {
    transform: rotateY(-180deg);
    background-image: linear-gradient(
      43deg,
      #4158d0 0%,
      #c850c0 46%,
      #ffcc70 100%
    );
  }

  .wrapper:hover .card.one {
    transform: rotateY(180deg);
  }

  .wrapper:hover .card.two {
    transform: rotateY(0deg);
  }
</style>

Expand Copy Copy

flex多列布局

space-between/space-around 最后一行无法左对齐

多列布局，如果最后一行没有满，无法左对齐的解决方式：

6.1 伪元素

1. 缺一个的时候，可以设置相同宽度的伪元素来占位
2. 缺好几个的时候，可以使用flex：auto，配合计算好的margin

1

2

3

4

<div class="wrapper-flex-1">
    <div class="item">1</div>  
    <div class="item">2</div>  
    <div class="item">3</div>  
    <div class="item">4</div>   
</div>
<style>
    .wrapper-flex-1 {
        width: 400px;
        border: 1px solid red;
        display: flex;
        flex-wrap: wrap;
    }
    .wrapper-flex-1:after{
        content: '';
        flex: auto;
    }
    .item {
        width: 30%;
        height: 80px;
        margin-bottom: 20px;
        background: pink;
        list-style: none;
        text-align: center;
        margin-right: calc((100% - 30%*3)/2);
    }
   
    .item:nth-child(3n) {
        margin-right: 0;
    }
</style>

Expand Copy Copy

6.2 从根本解决问题，margin计算好，不使用space-between

1

2

3

4

5

<div class="wrapper-flex-2">
    <div class="item">1</div>  
    <div class="item">2</div>  
    <div class="item">3</div>  
    <div class="item">4</div>  
    <div class="item">5</div>  
</div>
<style>
    .wrapper-flex-2 {
        width: 400px;
        border: 1px solid red;
        display: flex;
        flex-wrap: wrap;
    }
    .item {
        width: 30%;
        height: 80px;
        margin-bottom: 20px;
        background: pink;
        list-style: none;
        text-align: center;
        margin-right: calc((100% - 30%*3)/2);
    }
   
    .item:nth-child(3n) {
        margin-right: 0;
    }
</style>

Expand Copy Copy

善用not选择器

有些情况下 所有 元素都需要一个样式，唯独 一个 不需要，这时候使用not选择器会很方便

单元格

单元格

单元格

单元格

单元格

单元格

单元格

<template>
<div class="not-box">
    <div>单元格</div>
    <div>单元格</div>
    <div>单元格</div>
    <div>单元格</div>
    <div>单元格</div>
    <div>单元格</div>
    <div>单元格</div>
</div>
</template>
<style>
.not-box{
    width: 200px;
    background: lightgoldenrodyellow;
    text-align: center;
}
.not-box div:not(:last-child){
    border-bottom: 1px solid lightskyblue;
}
</style>

Expand Copy Copy

一行代码将页面变成哀悼模式

在body上添加filter: grayscale(1);即可将整个网站变为哀悼模式

多彩页面

<template>
<div class="gray-box">
    <div class="color-page">多彩页面</div>
</div>
</template>
<style>
.color-page{
    width: 200px;
    height: 400px;
    text-align: center;
    line-height: 400px;
    background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
}
.gray-box{
    filter: grayscale(1);
}
</style>

Expand Copy Copy