前端学习--CSS2

（15）弹性布局（flex）

1、基本概念：

   采用 Flex 布局的元素，称为 Flex 容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称“项目”。容器默认存在两根轴，分别为水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。如下图所示：

注意：

当一个元素设置了flex布局以后，其子元素的float、clear和vertical-align等属性将失效。

行内元素变成块级元素

CSS flex布局（弹性布局/弹性盒子） (biancheng.net)

2、容器属性

1）flex-dirextion：

flex-direction 属性用来决定主轴的方向（即项目的排列方向），属性的可选值如下：

2）flex-wrap

flex-wrap 属性用来设置当弹性盒子的子元素（项目）超出父容器时是否换行，属性的可选值如下：

3） flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 两个属性的简写，语法格式如下：

flex-flow: flex-direction flex-wrap;

4）justify-content

justify-content 属性用于设置弹性盒子中元素在主轴（横轴）方向上的对齐方式，属性的可选值如下：

5）align-items

align-items 属性用来设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式，属性的可选值如下：

3、項目属性

1） Order

order 属性用来设置项目在容器中出现的顺序，您可以通过具体的数值来定义项目在容器中的位置，属性的语法格式如下：

order: number;

order为1时元素就排在第一个

2）align-self

align-self 属性允许您为某个项目设置不同于其它项目的对齐方式，该属性可以覆盖 align-items 属性的值。align-self 属性的可选值如下：

3) flex

flex 属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写，语法格式如下：

flex: flex-grow flex-shrink flex-basis;

（16）网格布局

定义：网格是一组相交的水平线和垂直线，它定义了网格的行和列

CSS提供了一个基于网格的布局系统，带由行和列，可以让我们更轻松地设计网页，而无需使用浮动和定位。

1. grid-template-columns属性定义网格中的列的宽度
2. grid-template-rows 属性定义网格中的行的高度

        div.gridCls{

            display:grid;

            /* 设置每一列的宽度 */

            grid-template-columns: 200px 200px 200px auto;

            /* 设置每一行的高度 */

            grid-template-rows: 200px 200px;

        }

1. 单位：fr(一个 fr 单位代表网格容器中可用空间的一等份。)
2. 网格三栏布局

        div.parent{

            display:grid;

            grid-template-columns: 200px 1fr 200px;

            grid-template-rows: 100vh;

        }

        div.parent div.left{

            background-color: aqua;

        }

        div.parent div.center{

            background-color: red;

        }

        div.parent div.right{

            background-color: yellow;

        }

（17）渐变与变形

1>渐变

CSS3渐变可以让你在两个或多个指定的颜色之间显示平稳的过度

CSS3定义了两种类型的渐变：

线性渐变（Linear Gradients）--向下/向上/向左/向右/对角方向

径向渐变（Radial Gradients）--由它们的中心定义

线性渐变的属性：background-image

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

从左向右：

background-image: linear-gradient(to right, red , yellow);

从右向左：

background-image: linear-gradient(to left, red , yellow);

对角（从左上角到右下角）：

background-image: linear-gradient(to bottom right, red, yellow);

使用角度：

background-image: linear-gradient(-90deg, red, yellow);

使用透明度（transparent）

background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

重复的线性渐变

/* 标准的语法 */

background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

CSS3 径向渐变

为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

颜色分别均匀

background-image: radial-gradient(red, yellow, green);

颜色分别不均匀

background-image: radial-gradient(red 5%, yellow 15%, green 60%);

设置形状

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

background-image: radial-gradient(circle, red, yellow, green);

不同尺寸大小关键字的使用

CSS3 渐变 | 菜鸟教程 (runoob.com)

2>变形

1、移动：

Translate()方法：根据左（X轴）和顶部（Y轴）位置给定的参数，从当前元素位置移动。

            /* 向下200px */

            transform: translate(0, 200px);

 2、旋转

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

             /* 旋转 */

            transform: rotate(20deg);

3、增加或减小

scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：

/* div元素的宽度是原始大小的两倍，高度是原始大小的三倍 */

    transform: scale(2,3);

4、倾斜

skew() 方法，包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜

3>过渡

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

• 指定要添加效果的CSS属性
• 指定效果的持续时间

        div:hover {

            transform: skew(30deg, 30deg);

            /* 过度 */

            transition: transform 2s;

        }