CSS3学习 ——（完整版知识总结）

已于 2023-08-24 13:34:05 修改
阅读量215 收藏
点赞数
文章标签： css3 css 前端 学习 笔记
于 2023-08-07 19:29:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lerrel1/article/details/132152841
版权

CSS3基础

一. 边框

用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序

1.1 圆角

在 CSS3 中 border-radius 属性被用于创建圆角：

div.radius {
    border: 2px solid red;
    border-radius: 25px;
}

1.2 盒阴影

CSS3 中的 box-shadow 属性被用来添加阴影：

div.shadow {
    border: 1px solid gray;
    box-shadow: 10px 10px 5px #888888;
}

1.3 边界图片

CSS3 的 border-image 属性，可以使用图像创建一个边框。

 div{
            width: 200px;
            height: 200px;
            border: 20px solid rebeccapurple;
            margin: 100px;
            /* 图片边框 */
            border-image: url(img/border.png) 27 27 round;/*简写*/
            border-image-source: url(img/border.png);    
            border-image-slice: 27;
            border-image-repeat: round; 
        }

二. 圆角

2.1 border-radius属性

使用 CSS3 border-radius 属性，你可以给任何元素制作“圆角”。

      div{
            width: 200px;
            height: 100px;margin: 100px;

            /*带背景*/
            background-color: rebeccapurple;
            border-radius: 20px;

            /*带边框*/
            border: 2px solid rebeccapurple;
            border-radius: 20px;

            /*带背景图片*/
            background-image: url(img/paper.gif);
            border-radius: 20px;
        }

2.2指定每个圆角

CSS 拥有用于为元素的每个角指定圆角的属性：

  • border-radius: 15px 50px 30px 5px; ：左上角为15px，右上角为50px，右下角为30px，左下角为5px。

  • border-radius: 15px 50px 30px; ：左上角为15px，右上角和左下角为50px，右下角为30px。

  • border-radius: 15px 50px; ：左上角和右下角为15px，右上角和左下角为50px。

  • border-radius: 15px; ：四个角都是15px。

    div{
            width: 200px;
            height: 100px;margin: 100px;
            /*指定每个圆角*/
            border: 3px solid rebeccapurple;
            border-radius: 20px 30px 40px 50px;    
        }

2.3 椭圆边角

 div{
            width: 200px;
            height: 100px;margin: 100px;
            /*椭圆边角 (border-radius设置为50% 或者长宽的一半 正方形不能设置成椭圆)*/
            border: 3px solid rebeccapurple;
            border-radius: 50%;
        }

2.4 圆形边角

    div{
            width: 200px;
            height: 200px;
            margin: 100px;
            /*圆形边角*/
            border: 3px solid rebeccapurple;
            border-radius: 50%;
            background-image: url(img/avatar.jpg);
        }

三. 背景

CSS3 中包含几个新的背景属性，提供更大背景元素控制。

3.1 background-image属性

CSS3 中可以通过 background-image 属性添加背景图片。

不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。

div {
    width: 700px;
    overflow: auto;
    padding: 5px 10px;
    background-image: url('img/flower.gif'), url('img/paper.gif');
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
   }

3.2 background-size属性

background-size 指定背景图像的大小。CSS3 以前，背景图像大小由图像的实际大小决定。

CSS3 中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。你可以指定像素或百分比大小。

百分比大小是相对于父元素的宽度和高度的百分比的大小。

div {
    width: 700px;
    overflow: auto;
    padding: 5px 10px;
    background-image: url('img/flower.gif'), url('img/paper.gif');
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
    /*使图片背景等比例放大，直到长宽均撑满整个容器为止*/
    background-size: cover;
    /*使背景图片等比例放大，当背景的长或者宽达到容器的边缘为止*/
    background-size: contain;
    background-size:right bottom;
   }

3.3 background-origin属性

background-origin 属性指定了背景图像的位置区域。

background-origin: padding-box; （默认值）

从padding起始处开始生成背景图像

background-origin: content-box;

从内容起始处开始生产背景图像

background-origin: border-box;

从边框起始处开始生成背景图像

3.4 background-clip属性

background-clip 背景剪裁属性是从指定位置开始绘制。

background-clip: border-box; （默认值）

边框内有背景图像

background-clip: content-box;

内容部分有背景图像

background-clip: padding-box;

padding内有背景图像

四. CSS渐变

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

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

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

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

4.1 CSS3线性渐变

为了创建一个线性渐变，你必须至少定义两种颜色结点。同时，你也可以设置一个起点和一个方向（或一个角度）。

语法：

background-image: linear-gradient(direction/degree,color-stop1 占比, color-stop2 占比, ...);

  • direction方向：渐变的方向位置，属性值可以为(to)left、right、top、bottom(可组合使用)

  • 角度：渐变终止方向的角度，角度以deg表示

  • 起始颜色…

  • 终止颜色… (颜色可以是多个)

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 300px;
            height: 200px;
            border: 1px solid black;
            background-image: linear-gradient(red,yellow );
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

线性渐变-从上到下（默认情况）

 .box1{
     width: 300px;
     height: 200px;
     border: 1px solid black;
     background-image: linear-gradient(( red,yellow) );
    }

线性渐变-从左到右

 .box1{
     width: 300px;
     height: 200px;
     border: 1px solid black;
     /*从左到右*/
     background-image: linear-gradient( to right, red, yellow );
     /*从右到左*/
     background-image: linear-gradient( to left, red, yellow );  
    }

线性渐变-对角

 .box1{
     width: 300px;
     height: 200px;
     border: 1px solid black;
     /*从左上角到右下角*/
     background-image: linear-gradient( to right bottom, red, yellow );
     /*从右下角到左上角*/
     background-image: linear-gradient( to left top, red, yellow );  
    }

使用角度

如果你想要在渐变的方向上做更多的控制，你可以定义一个角度

角度是指水平线和渐变线之间的角度，逆时针方向计算。
在这里插入图片描述

 .box1{
     width: 300px;
     height: 200px;
     border: 1px solid black;
     /*从左上角到右下角*/
     background-image: linear-gradient( 45deeg, red, yellow );
     /*从右下角到左上角*/
     background-image: linear-gradient( -45deg, red, yellow );  
    }

使用多个颜色节点

 .box1{
     width: 300px;
     height: 200px;
     border: 1px solid black;
     background-image: linear-gradient( red, yellow，green);
     background-image: linear-gradient(red,orange,yellow,green,blue,indigo,violet);  
    }

使用透明度（transparent）

CSS3 渐变也支持透明度**（transparent）**，可用于创建减弱变淡的效果。

.box1{
     width: 300px;
     height: 200px;
     border: 1px solid black;
         background-image: linear-gradient( rgba(255,0,0,0), rgba(255,0,0,1);
    }

重复的线性渐变

repeating-linear-gradient() 函数用于重复线性渐变：

.box1{
     width: 300px;
     height: 200px;
     border: 1px solid black;
         background-image: repeating-linear-gradient(red 10%,yellow 20%,green 30%);
    }

4.2 CSS3径性渐变

径向渐变由它的中心定义。

为了创建一个径向渐变，你也必须至少定义两种颜色结点。同时,你也可以指定渐变的中心,形状(圆形或椭圆形),大小。

默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)。

语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box2{
            width: 300px;
            height: 200px;
            border: 1px solid black;
            background-image: radial-gradient( farthest-side at 40% 60%, red ,yellow,green);
        }
    </style>
</head>
<body>
    <div class="box2"></div>
</body>
</html>

径向渐变-颜色结点均匀分布（默认情况下）

.box2{
      width: 300px;
      height: 200px;
      border: 1px solid black;
      background-image: radial-gradient(red,yellow,green);
   }

径向渐变-颜色结点不均匀分布

.box2{
      width: 300px;
      height: 200px;
      border: 1px solid black;
      background-image: radial-gradient(red 5%,yellow 15%,green 50%);
   }

设置形状

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

.box2{
      width: 300px;
      height: 200px;
      border: 1px solid black;
      /*形状为圆形的径向渐变*/
      background-image: radial-gradient(circle red,yellow,green);
   }

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

size 参数定义了渐变的大小。它可以是以下四个值：

  • closest-side:圆心到距离最近的边

  • farthest-side:圆心到距离最远的边

  • closest-corner：圆心到距离最近的角

  • farthest-corner：圆心到距离最远的角

.box2{
      width: 300px;
      height: 200px;
      border: 1px solid black;
    /*at定义中心的位置*/
      background-image: radial-gradient(closest-side at 30% 50%，red,yellow,green);
   }

重复的径向渐变

repeating-radial-gradient() 函数用于重复径向渐变：

.box2{
      width: 300px;
      height: 200px;
      border: 1px solid black;
    /*at定义中心的位置*/
      background-image: repeating-radial-gradient(closest-side at 30% 50%，red,yellow,green);
   }

渐变练习
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渐变练习</title>
    <style>
        input[type="submit"]{
            width: 100px;
            height: 50px;
            background-image: linear-gradient(to right,red ,orange);
            border: none;
        }
        input[type="submit"]:nth-child(2){
            border-radius: 10px;
        }
        input[type="submit"]:nth-child(3){
            border-radius: 20px;
        }
    </style>
</head>

<body>
    <form action="练习1.html">
        <input type="submit" value="渐变练习">
        <input type="submit" value="渐变练习">
        <input type="submit" value="渐变练习">
    </form>
</body>

</html>

五. 过渡

CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。

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

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

  • 指定要添加效果的CSS属性

  • 指定效果的持续时间。

5.1 速度曲线

transition-timing-function 属性规定过渡效果的速度曲线。

transition-timing-function 属性可接受以下值：

  • ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）

  • linear - 规定从开始到结束具有相同速度的过渡效果

  • ease-in -规定缓慢开始的过渡效果

  • ease-out - 规定缓慢结束的过渡效果

  • ease-in-out - 规定开始和结束较慢的过渡效果

  • cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值

.box1{
            margin: auto;
            height: 200px;
            width: 200px;
            border: 2px solid rebeccapurple;
            background-color: rebeccapurple;
            line-height: 200px;
            text-align: center;
            transition: all 2s ;
            transition-timing-function:linear
        }
        .box1:hover{
            width: 300px;
            height: 300px;
            transform: rotatez(45deg);
        }

5.2 延迟过渡效果

transition-delay 属性规定过渡效果的延迟（以秒计）。

.box1{
            margin: auto;
            height: 200px;
            width: 200px;
            border: 2px solid rebeccapurple;
            background-color: rebeccapurple;
            line-height: 200px;
            text-align: center;
            transition: all 2s ;
            transition-timing-function:linear
            transition-delay:1s
        }
        .box1:hover{
            width: 300px;
            height: 300px;
            transform: rotatez(45deg);
        }

5.3 简写属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            margin: auto;
            height: 200px;
            width: 200px;
            border: 2px solid rebeccapurple;
            background-color: rebeccapurple;
            line-height: 200px;
            text-align: center;
            /*改变那些效果进行改变*//*效果的持续时间*//*速度曲线*//*延迟时间*/
            transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
        }
        .box1:hover{
            width: 300px;
            height: 300px;
            transform: rotatez(45deg);
        }
    </style>
</head>
<body>
    <div class="box1">CSS过渡</div>
</body>
</html>

六. 动画

6.1 什么是CSS动画

动画使元素逐渐从一种样式变为另一种样式。

您可以随意更改任意数量的 CSS 属性。

如需使用 CSS 动画，您必须首先为动画指定一些关键帧。

关键帧包含元素在特定时间所拥有的样式。

6.2 @keyframes规则

如果你在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。

要使动画生效，必须将动画绑定到某个元素。

animation-duration 属性定义需要多长时间才能完成动画。如果未指定 animation-duration 属性，则动画不会发生，因为默认值是 0s

可以通过使用关键字“from”和“to”(代表 0％(开始)和 100％(完成))，设置了样式何时改变。

你也可以使用百分比值。通过使用百分比，你可以根据需要添加任意多个样式更改。

6.3 延迟动画

animation-delay 属性规定动画开始的延迟时间。

6.4 运行次数

animation-iteration-count 属性指定动画应运行的次数。 animation-iteration-count:infinite表示循环运行

6.5 反向或交替运行动画

animation-direction 属性指定是向前播放、向后播放还是交替播放动画。

animation-direction 属性可接受以下值：

  • normal - 动画正常播放（向前）。默认值

  • reverse - 动画以反方向播放（向后）

  • alternate - 动画先向前播放，然后向后

  • alternate-reverse - 动画先向后播放，然后向前

6.6 速度曲线

animation-timing-function 属性规定动画的速度曲线。

animation-timing-function 属性可接受以下值：

  • ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）

  • linear - 规定从开始到结束的速度相同的动画

  • ease-in - 规定慢速开始的动画

  • ease-out - 规定慢速结束的动画

  • ease-in-out - 指定开始和结束较慢的动画

  • cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值

6.7 填充模式

CSS 动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。 animation-fill-mode 属性能够覆盖这种行为。

在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode 属性规定目标元素的样式。

animation-fill-mode 属性可接受以下值：

  • none - 默认值。动画在执行之前或之后不会对元素应用任何样式。

  • forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iterationcount）。

  • backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。

  • both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

6.8 简写属性

div {
    animation-name: example;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
/*简写属性*/
div {
    animation: example 4s linear 2s infinite alternate;
}

动画属性示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: rebeccapurple;

            /* 名称 */
            /* animation-name: changecolor; */

            /* 动画播放时间 */
            /* animation-duration: 2s; */

            /* 延迟动画 （允许负数，表示动画已经运行的时间） */
            /* animation-delay: 1s; */

            /* 运行次数 */
            /* animation-iteration-count: infinite; */

            /* 反向或交替运行动画 */
            /* animation-direction: alternate-reverse; */

            /* 速度曲线 */
            /* animation-timing-function: cubic-bezier(); */

            /* 填充模式 */
            /* animation-fill-mode: forwards; */

            /* 简写属性 */
            animation: changecolor 2s 1s 3 alternate linear both;
            position: relative;
        }

        @keyframes changecolor {
            0%{
                background-color: rebeccapurple;
                left: 0;
                top: 0;
            }
            25%{
                background-color: red;
                left: 200px;
                top: 0;
            }
            50%{
                background-color: green;
                top: 200px;
                left: 200px;
            }
            75%{
                background-color: blue;
                top: 200px;
                left: 0;
            }

            to{
                background-color: yellow;
                top: 0;
                left: 0;
            }
        }
    </style>
</head>
<body>
    <div class="box1">动画</div>
</body>
</html>

七. 2D转换

CSS 转换（transforms）允许你移动、旋转、缩放和倾斜元素。

通过使用 CSS transform 属性，你可以利用以下 2D 转换方法：

方法描述
translate()从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）。
rotate()根据给定的角度顺时针或逆时针旋转元素。
scale()增加或减少元素的大小（根据给定的宽度和高度参数）。
scaleX()增加或减少元素的宽度。
scaleY()增加或减少元素的高度。
skew()使元素沿 X 和 Y 轴倾斜给定角度。
skewX()使元素沿 X 轴倾斜给定角度。
skewY()使元素沿 Y 轴倾斜给定角度。
martix()把所有 2D 变换方法组合为一个。

7.1 translate()方法

translate() 方法从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）。

7.2 rotate()方法

rotate() 方法根据给定的角度顺时针或逆时针旋转元素。

7.3 scale()方法

scale() 方法增加或减少元素的大小（根据给定的宽度和高度参数）。

7.4 scaleX()方法

scaleX() 方法增加或减少元素的宽度。

7.5 scaleY()方法

scaleX() 方法增加或减少元素的高度。

7.6 skew()方法

skew() 方法使元素沿 X 和 Y 轴倾斜给定角度。

7.7 skewX方法

skewX() 方法使元素沿 X 轴倾斜给定角度。

7.8 skewY方法

skewX() 方法使元素沿 Y 轴倾斜给定角度。

7.9 matrix()方法

matrix() 方法把所有 2D 变换方法组合为一个。

matrix() 方法可接受六个参数，其中包括数学函数，这些参数使你可以旋转、缩放、移动（平移）和倾斜元素。

参数如下：matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

2D转换示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 100px;
            background-color: rebeccapurple;
            border: 1px solid black;
            margin: 200px;

            /* translate(x轴移动的距离，y轴移动的距离)允许为负值  可以为百分比（自身宽高的百分比） */
            /* transform: translate(200px,200px); */

            /* 元素旋转（可以为负值，表示逆时针旋转） */
            /* transform: rotate(60deg); */

            /* 改变元素的大小 */
            /* transform: scale(2); */
            
            /* 改变元素的宽度 */
            /* transform: scaleX(2); */
            
            /* 改变元素的高度 */
            /* transform: scaley(2); */

            /* 元素沿x和y轴倾斜 */
            /* transform: skew(20deg,20deg); */
            
            /* 元素沿x轴倾斜 */
            /* transform: skewx(20deg); */
            
            /* 元素沿y轴倾斜 */
            /* transform: skewy(20deg); */

            transform: matrix();
        }
    </style>
</head>
<body>
    <div class="box">内容元素</div>
</body>
</html>

八. 3D转换

X轴：水平向右，X右边是正值，左边是负值。

Y轴：垂直向下，Y下面是正值，上面是负值。

Z轴：垂直屏幕，往外面是正值，往里面是负值。

通过 CSS transform 属性，你可以使用以下 3D 转换方法：

  • rotateX()

  • rotateY()

  • rotateZ()

8.1 rotateX()方法

rotateX() 方法使元素绕其 X 轴旋转给定角度。

8.2 rotateY()方法

rotateY() 方法使元素绕其 Y 轴旋转给定角度

8.3 rotateZ()方法

rotateZ() 方法使元素绕其 Z 轴旋转给定角度。

8.4 透视

perspective 指定了观察者与 z = 0 平面的距离，使具有三维位置变换的元素产生透视效果。

perspective添加在父元素上

九. 文本效果

9.1 文本阴影

text-shadow 属性适用于文本阴影。

 p {
    padding: 10px;
    text-shadow: 5px 5px 5px #FF0000;
}

9.2 盒子阴影

box-shadow 属性适用于盒子阴影。

div {
    padding: 10px;
    box-shadow: 10px 10px 5px #999999;
}

7.3 在伪元素中添加阴影效果

.shadow {
   width: 400px;
   padding: 10px;
   background: white;
   box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
   position: relative;
}
.shadow img {
   border: 1px solid #8a4419;
   border-style: inset;
}
.shadow::after {
   content: '';
   position: absolute;
   width: 70%;
   height: 100px;
   left: 15%;
   bottom: 0;
   z-index: -1;
   box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
}

9.4 卡片效果

.card {
   width: 250px;
   height: 200px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.card h2 {
   margin: 0;
   width: 250px;
   height: 150px;
   color: white;
   font-size: 30px;
   text-align: center;
   line-height: 150px;
   background-color: #4CAF50;
}
.card p {
   margin: 0;
   width: 250px;
   height: 50px;
   font-size: 20px;
   text-align: center;
   line-height: 50px;
}

9.5 文本溢出

CSS3 文本溢出属性指定应向用户如何显示溢出内容。

p {
  width: 200px;
  overflow: hidden;
  border: 1px solid #cccccc;
  white-space: nowrap;
  text-overflow: clip;
}

效果
在这里插入图片描述

p {
  width: 200px;
  overflow: hidden;
  border: 1px solid #cccccc;
  white-space: nowrap;
  text-overflow: ellipsis;
}

效果：在这里插入图片描述

如果需要保留两行文本，并省略溢出文本，则可以设置如下样式：

p {
  width: 200px;
  overflow: hidden;
  border: 1px solid #cccccc;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
}

效果：在这里插入图片描述

9.6 CSS3字体(服务器端字体)

@font-face规则

@font-face {
            /*自定义字体名称*/
   font-family: myFirstFont;
            /*指定字体路径*/
   src: url(sansation_light.woff);
}
div {
   font-family:myFirstFont;
}

十. Flex布局

10.1 flex布局基本概念

Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。

  • 采用 Flex 布局的元素，称为 Flex容器 （flex container），简称容器 。

  • 它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称项目 。

  • 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。

  • 主轴的开始位置（与边框的交叉点）叫做 main start，结束位置叫做 main end；

  • 交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。

  • 项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size

10.2 容器的属性

  • flex-direction：决定主轴的方向。

  • flex-wrap：如果一条轴线排不下，如何换行。

  • flex-flow：flex-direction 属性和 flex-wrap 属性的简写属性。

  • justify-content：定义项目在主轴上的对齐方式。

  • align-items：定义项目在交叉轴上如何对齐。

  • align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

10.2.1 flex-direction属性

flex-direction属性决定主轴的方向（即项目的排列方向）。

它可能有 4 个值：

  • row（默认值）：主轴为水平方向，起点在左端。

  • row-reverse：主轴为水平方向，起点在右端。

  • column：主轴为垂直方向，起点在上沿。

  • column-reverse：主轴为垂直方向，起点在下沿。

10.2.2 flex-wrap属性

默认情况下，项目都排在一条轴线上。 flex-wrap 属性定义，如果一条轴线排不下，如何换行。

它可能取三个值：

  • nowrap（默认）：不换行。

  • wrap：换行，第一行在上方。

  • wrap-reverse：换行，第一行在下方。

10.2.3 flex-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为 row nowrap 。

.box {
   flex-flow: <flex-direction> <flex-wrap>;
}
10.2.4 justify-content属性

justify-content 属性定义了项目在主轴上的对齐方式.

它可能取 5 个值，具体对齐方式与轴的方向有关。

  • flex-start（默认值）：左对齐。

  • flex-end：右对齐。

  • center： 居中。

  • space-between：两端对齐，项目之间的间隔都相等。

  • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

10.2.5 align-items 属性

align-items 属性定义项目在交叉轴上如何对齐。

它可能取 5 个值。具体的对齐方式与交叉轴的方向有关。

  • flex-start：交叉轴的起点对齐。

  • flex-end：交叉轴的终点对齐。

  • center：交叉轴的中点对齐。

  • baseline：项目的第一行文字的基线对齐。

  • stretch（默认值）：如果项目未设置高度或设为 auto，将占满整个容器的高度。

10.2.3 align-content 属性

align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

该属性可能取 6 个值：

  • flex-start：与交叉轴的起点对齐。

  • flex-end：与交叉轴的终点对齐。

  • center：与交叉轴的中点对齐。

  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

  • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

  • stretch（默认值）：轴线占满整个交叉轴。

10.3 项目的属性

以下 6 个属性设置在项目上：

  • order：定义项目的排列顺序。数值越小，排列越靠前，默认为 0。

  • flex-grow：定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。

  • flex-shrink：定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。

  • flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。它的默认值为 auto，即项目的本来大小。

  • flex： flex-grow 、 flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto 。后两个属性可选。

  • align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto 。

10.3.1 order 属性

order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为 0。

10.3.2 flex-grow 属性

flex-grow 属性定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。

10.3.3 flex-shrink 属性

flex-shrink 属性定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。

如果所有项目的 flex-shrink 属性都为 1，当空间不足时，都将等比例缩小。

如果一个项目的 flex-shrink 属性为 0，其他项目都为 1，则空间不足时，前者不缩小。

10.3.4 flex-basis 属性

flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto，即项目的本来大小。
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间

10.3.5 flex属性

flex 属性是 flex-grow 、 flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto 。后两个属性可选。

该属性有两个快捷值： auto （ 1 1 auto ）和 none （ 0 0 auto ）。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

10.3.6 align-self 属性

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto ，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch 。

lerrel1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值