一些css的记录，希望你也能会

## 持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第10天，点击查看活动详情

一. displsy:flex 实现三栏布局的方法，左右定宽，中间自适应，中间内容优先加载。

1. 首先定义html结构，因为中间内容要优先加载所以结构不能改变，需要这样定义

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

2. 定义css样式，给父盒子一个display:flex，left和right给固定的宽度，main来个flex：1自适应，当然最重要的是给left一个 order ：-1

order 设置弹性盒子的子元素排列顺序。 | 数值小的排在前面

.container{
    background-color: black;
    border: 1px solid #ccc;
    height: 300px;
    min-width: 800px;
    display: flex;
    .main{
        background-color: green;
        height: 300px;
        flex: 1 // 重点
    };
    .left{
        background-color: red;
        width: 200px;
        height: 300px;
        order: -1;  // 重点
    };
    .right{
        background-color: blue;
        width: 200px;
        height: 300px;
    }
}

3. 实现的效果

二、还在使用font-size给特殊的文本实大小写，又out了吧，是时候知道 text-transfrom

1.text-transform属性

1.1 text-transform:none 默认，定义带有小写字母和大写字母的标准文本
1.2 text-transform:capitalize 文本中的每个单词以大写字母开头（只有字母开头为大写，别的不管）
1.3 text-transform:lowercase 定义无大写字母，仅有小写字母
1.4 text-transform:uppercase 定义无小写字母，仅有大写字母
1.5 text-transform:inherit 规定应该从父元素继承text-transform属性的值

三、css实现角标效果

1. 结构如下

<tag>未达到审核标准</tag>

2. css样式

// css实现角标
tag{
color: #fff;
// background: #EA3447;
background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.4), transparent) rgba(20, 30, 41, 0.76);
background-blend-mode: soft-light;
font-size: 10px;
padding:2px 6px;
line-height: 16px;
border-radius: 4px 4px 4px 0px;
position: relative;
&::before{
  content:'';
  position: absolute;
  width: 3px;
  height: 3px;
  // background: #BB2A39;
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
  background-color: inherit;
  left: 0;
  bottom: -3px;
  clip-path: polygon(0 0, 100% 0, 100% 100%); /*三角*/
}
}