圣杯布局（三栏布局）
- flex实现
- float实现
BFC
- 应用场景
- BFC的创建方法
清除浮动（子父）
水平垂直居中(子绝父相，flex)
设置文字居中
三角形
CSS动画
如何实现一个轮播图
perspective 属性
文字、内容限制为指定的行数 | 截断
设置背景图
设置图片

圣杯布局（三栏布局）

CSS相关 - 图1

flex实现

<div class="left"></div>
<div class="main"></div>
<div class="right"></div>

.container {
    display: flex;
}
.left {
    width: 200px;
}
.middle {
    flex: 1;
}
.right {
    width: 220px;
}

float实现

核心是重要的内容先加载。main在前，left和right在后。

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

.container {
    padding:0 220px 0 200px;
    overflow: hidden;
}
.left, .middle, .right {
    position: relative;
    float: left;
    min-height: 130px;
}
.middle {
   width: 100%;
}
.left {
    margin-left: -100%;
    left: -200px;
    width: 200px;
}
.right {
    margin-left: -220px;
    right: -220px;
    width: 220px;
}

BFC

什么是BFC：全称 Block Formatting Context 即块级格式化上下文。
BFC的一个最重要的效果是，让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。这是利用BFC清除浮动所利用的特性。
其实BFC里面，就类似于HTML根部的文档流布局。HTML根部文档流就是一个BFC。

应用场景

清除浮动：内部有元素浮动，可以防止高度塌陷，在计算块元素高度时会包含浮动的元素。
避免某元素被浮动元素覆盖：BFC的区域不会与浮动元素的区域重叠
阻止外边距重叠：属于同一个BFC的两个相邻Box的margin会发生折叠，不同BFC不会发生折叠

CSS相关 - 图2

BFC的创建方法

float: left / right
display: inline-block / table-cell / table-caption
position: absolute / fixed
overflow: hidden / auto / scroll

清除浮动（子父）

发生在子父元素中，由于子元素浮动所导致的父元素高度塌陷，若要阻止父元素塌陷，则需清除浮动。

BFC的相关方法
添加额外标签，应用clear: both

添加伪元素，应用clear: both

水平垂直居中(子绝父相，flex)

涉及到父子定位，记住口诀：子绝父相。

父子宽高固定值

计算距离margin-top和margin-left让子元素在中间。
父元素:

{
 width:500px;
 height:500px;
 position:relative;
}

子元素:

{   
 width:200px;
 height:200px;
 position:absolute;
 margin-top:150px;
 margin-left:150px
}

父宽高不固定，子宽高固定

父元素:

{
 position:relative;
}

子元素:

{   
 width:200px;
 height:200px;
 position:absolute;
 top:50%;
 left:50%;
 margin-top:-100px;
 margin-left:-100px;
}

父宽高不固定，子宽高不固定

方法1：

父元素:

{
 width:50vw;
 height:50vh;
 position:relative;
}

子元素：

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

方法2：flex布局

父元素:

{
 width:50vw;
 height:50vh;
 display:flex;
 align-items:center;
 justify-content:center;
}

子元素:

{   
 width:20vw;
 height:30vh;
}

方法3：flex + 子元素margin: auto

父元素:

{
 width:50vw;
 height:50vh;
 display:flex;
}

子元素:

{   
 width:20vw;
 height:30vh;
 margin:auto;
}

方法4：相对定位绝对定位

父元素:

{
    width:50vw;
    height:50vh;
    position:relative;
}

子元素:

{   
    width:20vw;
    height:30vh;
    position:absolute;
    top, left, right, bottom:0;
    margin:auto;
}

设置文字居中

块状元素(display:block)

margin: 0 auto
利用绝对定位，让元素向右偏移50%，然后再向左偏移自身的50%（其实就是垂直居中的分解）：
```
{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}
```

利用flex：

方法1：父元素:
```
{
display:flex;
justify-content:center;
}
```
方法2：父元素：
```
{
display:flex;
}
```
子元素：
```
{
margin:0 auto;
}
```

行内元素(display:inline)水平居中

{
    text-align:center
}

文字水平、垂直居中

块级元素中的文字初始都在左上角。

.div{
  height:60rpx; // 规定了块级元素的高
  line-height: 60rpx; // 设置垂直居中 (纵轴居中)
    text-align: center; // 设置水平居中 (横轴居中)
}

三角形

<style>
.triangle-top {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 40px 40px 40px;
  border-color: transparent transparent red;
}
.triangle-bottom {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 40px 40px 0 40px;
  border-color: blueviolet transparent transparent transparent;
}
.triangle-left {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 40px 0 40px 40px;
  border-color: transparent transparent transparent #89ff56;
}
.triangle-right {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 40px 40px 40px 0;
  border-color: transparent yellowgreen transparent;
}
</style>

CSS动画

参看资料：2019年了，你还不会CSS动画？ CSS动画思维导图：在百度脑图中

如何实现一个轮播图

设置所有的图片为display:none
设置一个index用来标记获取到的图片

设置一个定时器，每个一段时间令index自增并将对应的图片的display属性改为block

var index = 0;
//改变图片
function ChangeImg() {
 index++;
 var a = document.getElementsByClassName("img-slide");
 if (index >= a.length) index = 0;
 for (var i = 0; i < a.length; i++) {
   a[i].style.display = 'none';
 }
 a[index].style.display = 'block';
}
//设置定时器，每隔两秒切换一张图片
setInterval(ChangeImg, 2000);

perspective 属性

W3C

设置元素被查看位置的视图；目前浏览器都不支持；chrome用-wekit-perspective来代替。定义 3D 元素距视图的距离，以像素计。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

文字、内容限制为指定的行数 | 截断

MDN文档

.box{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 3; //指定行数
  width: 200px; // 指定宽度
}

利用text-overflow属性
```
// 1.需满足文字在块级元素内、2.且不会在块级元素下面溢出、3.单词太长
div .btn{
 text-overflow: ellipsis; /* 溢出显示... */
white-space: nowrap /* 溢出不换行，让其满足第2点 */
overflow: hidden /* 防止单词太长而无法'安置', 满足第三点 */ 
}
```
设置背景图
通常需要为某些文字设置一些图片，如：

CSS通常这样设置：
```
.box{
 background: url(https://img12.360buyimg.com/img/s63x22_jfs/t1/157202/32/682/483/5febf8a3Eb0428ea9/e59b5027f1599c67.png) no-repeat; // 设置盒子的背景，背景不重复
background-size: 100% auto; // 设置背景图的大小，第1个值为宽度，第2个为高度，这里设置宽度100%，高度自适应
width: 50rpx; // 盒子的宽度
height: 32rpx; // 盒子的高度
line-height: 32rpx; // 设置文字垂直居中 
text-align: center; // 设置文字水平居中
font-size: 20rpx; // 文字大小
color: red; // 文字颜色
font-family: JDZH-Regular; // 字体
}
```
设置图片
图像和视频被描述为替换元素。这意味着CSS不能影响这些元素的内部布局-仅影响它们在页面上于其他元素中的位置。默认情况下将使用文件的固有尺寸进行显示。
当盒子的大小小于图片大小，图片就会溢出，如何处理溢出的问题？

法一：设置img的样式为max-width: 100%，这样溢出的图片能放盒子里，而小图片则不变；
（底下会留空）
法二：img的样式设置object-fit属性。
object-fit: cover;
height: 100%;
width: 100%;
（1）这样设置，图片缩小大小但比例不变，且充满盒子，但会裁切一部分；（若只设置图片height和width为100%，图片会变形）
object-fit: contain;
height: 100%;
width: 100%;
（2）这样设置，图片不会被裁切，但会有“开天窗”。

在父元素为flex、grid布局中，图片不会被拉伸，而是保持原有比例（除非你设置了height…），若想元素拉伸到等宽，可以这样设置，但可能不是理想的效果：
```
img {
width: 100%;
height: 100%;
}
```