这是我参与「第五届青训营」伴学笔记创作活动的第 2 天

一、本次笔记的重点内容：

Css的一些小tips(比较熟悉的不再进行说明)
Flex布局

二、详细知识点介绍：

1.选取标签名

在平常我们写css进行对html修饰的时候，通常直接用标签的class名称或者id名进行选取，这边提几点可以帮助快速选取合适的标签进行修饰的小方法。这边用a或input标签做举例

输入框为密码类型的样式

input [type="password"]{}

路径开头为#的样式

a[href^="#"]{}

路径结尾为.jpg的样式

a[href$=".jpg"]{}

访问过该a标签的样式

a:visited{}

带有链接的a标签样式

a:link{}

鼠标移上的样式

a:hover{}

鼠标点击的样式

a:active{}

2.颜色

提到颜色，大家可能先想到的肯定是rgba了，还有一种表示颜色的方法今天学到了，就是hsla。简单介绍一下

h：色相（0~360）

s：饱和度（0~100%）

l：亮度（0~100%）

a：透明度（0~1）可省略

例如：

background-color:hsl(360,50%,50%);

大家可以去试试噢

3.边框的巧妙运用

我们可以根据边框的特性进行制作一些巧妙的图形

比如：

.border {
  width: 0;
  height: 0;
  border-top: 100px solid rgb(85, 255, 0);
  border-left: 100px solid red;
  border-right: 100px solid rgb(55, 0, 255);
  border-bottom: 100px solid rgb(255, 230, 0);
}

或者通过设置其他边框的长度或者透明度实现不同的三角形(亲测好用)

  .border {
    width: 0;
    height: 0;
    border-top: 50px solid rgba(255, 255, 255,0);
    border-left: 100px solid red;
    border-bottom: 50px solid rgba(255, 255, 255,0);
  }

4.flex布局

这应该是css比较厉害的杀手锏了（除grid布局外），也是大家最常用的一个弹性布局。

简单介绍一下flex的基础属性，具体用法在下面展示

  display: flex;
   /* 主轴对齐—水平划分居中 */
  justify-content: space-between;
  /* 主轴对齐-水平居中 */
  justify-content: center;
  /* 侧轴对齐—垂直居中 */
  align-items: center;

相应的还有：

flexibility（值为数字）
flex-grow: 有剩余空间时的伸展能力
flex-shrink:容器空间不足时收缩的能力
flex-basis：没有伸展或收缩时的基础长度(px)

三、实践练习例子：

相应的例子在上面都有说明，这边就只展示flex布局的例子啦

首先定义一个容器，里面有相应的子容器，并给上固定的宽高（我这边是父容器300px，子容器80px），一开始是这样的排布

当加上flex属性后，会发现变成的横向排布，因为父容器内的子容器不能超出父容器的宽度，因此子容器的宽度被压缩了，那要怎么解决呢

display

display: flex;

利用flex-wrap可以让其超出父容器宽度的其他子元素进行换行

flex-wrap属性

flex-wrap: wrap;

这只是默认的排版样式，如果要有更多的排布方式，只需要添加justify-content属性

justify-content

justify-content: space-between;

如果不想要其中的数字顺序，还可以变换方向默认为行方向，纵方向为column

flex-wrap属性

flex-direction: column;

还有其他的一些样式在上面有给大家介绍，可以回去试试，大概的排布样式如图所示

四、总结：

这次学习让我认识到了更多的css用法，也对flex布局有了更深的认识，希望上述笔记的梳理可以帮到大家！然后还有grid布局，我会在下次也进行介绍,感谢大家观看，如有错误，欢迎指出

前端与CSS | 青训营笔记