【面向CSS--3.css进阶】

最新推荐文章于 2024-02-23 09:50:36 发布
最新推荐文章于 2024-02-23 09:50:36 发布
阅读量468 收藏
点赞数 1
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hf872914334/article/details/78071428
版权

1.内容生成

作用：使用css的方式，向现有的标记中增加新的内容
方法：通过伪元素选择器（before ，after）

1、属性：content
2、取值：
    1、字符串 ：普通文本，使用""引起来
    2、url() ：生成图像到指定的内容区域
    3、计数器

利用内容生成生成图标： 图标展示

div{
    text-align:center;
    height:30px;
    line-height:30px;
}

div:before{
    content:url('...');
    display:inline-block;
    width:16px;
    height:16px;
    margin:0 5px;
}

利用内容生成解决外边距溢出问题（before）：

div:before{
    content:'';
    display:table;
}

利用内容生成解决浮动元素父元素高度问题（after）：

.clear:after{
    content:'';
    display:block;
    clear:both;
}

计数器

1、声明计数器：counter-reset

作用：声明或复位一个计数器
取值：名称 初始值;
ex:1、counter-reset:c1 0;
   2、counter-reset:c1 0 c2 10;
注意：初始值可以省略，省略的话为0
        counter-reset:c1;
        counter-reset:c1 c2;

2、设置计数器的增量(变化范围)

属性：counter-increment
作用：设置某个选择器每次出现的计数器的增量，默认增量为1
取值：计数器名 增量值;
ex:counter-increment:c1 1;

3、使用计数器

函数：counter(计数器名称)

<!doctype html>
<html>
  <head>
    <title>计数器</title>
    <meta charset="utf-8">
    <style>
      /*1、声明计数器*/
      body{
        counter-reset:c1;
      }
      /*2、设置计数器增量*/
      h3{
        counter-increment:c1;
        /*声明或复位c2计数器*/
        counter-reset:c2 0;
      }
      h4{
        counter-increment:c2;
      }
      /*3、使用计数器*/
      h3:before{
        content:counter(c1)"、";
      }
      h4:before{
        content:counter(c1)"."counter(c2)"、";
        margin-left:15px;
      }
    </style>
  </head>
  <body>
    <h3>Web基础知识</h3>
    <h4>基础1</h4>
    <h4>基础2</h4>
    <h4>基础3</h4>
    <h3>HTML快速入门</h3>
    <h4>入门1</h4>
    <h4>入门2</h4>
    <h3>网页中的文本</h3>
    <h4>文本1</h4>
    <h4>文本2</h4>
  </body>
</html>

过渡

2.转换

转换，向元素应用2D或3D转换，包括旋转、缩放、移动、倾斜

1、什么是转换

转换就是改变元素在页面上的位置，大小，形状，角度。可分为 2D转换 和 3D转换。

属性：transform
取值：none : 默认值，即无转换效果
    transform-functions : 表示一组转换函数，多个转换函数之间用 空格 隔开

原点：transform-origin
    转换原点的默认位置，在元素的中心点位置处
取值：两个值 ：原点在 x轴 和 y轴的位置
     三个值 ：原点在 x轴，y轴，z轴的位置
单位：数值/百分比/关键字
ex:transform-origin:35% 28%;
   transform-origin:0px 0px;
   transform-origin:right bottom;

1、2D位移：改变元素在 x轴和y轴上的位置

取值(函数)：
    translate(x):在x轴上的移动距离  x,y,x单位：px %
        x取值为正，向右移动，x取值为负，向左移动
    translate(x,y):在x轴和y轴上的移动距离
        x取值为正，向右移动，x取值为负，向左移动
        y取值为正，向下移动，y取值为负，向上移动
    translateX(x):在x轴上的移动距离
    translateY(y):在y轴上的移动距离

/* 根据position及translate实现不确定宽高元素居中 */
#position{
    position:absolute;
    top:50%;
    left:50%;
    translate(-50%,-50%);
}

2、2D，3D缩放：改变元素在页面中的大小

取值(函数)：
    scale(value)：各坐标轴缩放比例是相同的
        value取值：1、默认值 为1 ==>原始大小
                  2、缩小：0-1之间的小数
                  3、放大：大于1的数值
    scale(x,y)    2D缩放
    scale(x,y,z)  3D缩放
                  x:x轴的缩放比例
                  y:y轴的缩放比例
                  z:z轴的缩放比例
    scaleX(x)     x轴的缩放比例
    scaleY(y)     y轴的缩放比例
    scaleZ(z)     z轴的缩放比例

3、2D旋转：改变元素的角度

取值(函数)：
    rotate(ndeg);  n为具体旋转的角度值  ex:45deg
        取值为正，则顺时针旋转，取值为负，则逆时针旋转

注意：1、会根据转换 原点 实现角度的变换
     2、元素在旋转时，连同坐标轴也一同旋转

4、2D倾斜：改变元素的形状为平行四边形

取值（函数）：
    skew(xdeg) : 沿x轴倾斜的角度(改变的是y轴倾斜角度)
    skew(xdeg,ydeg):
    skewX(xdeg) : 沿x轴倾斜的角度(改变的是y轴倾斜角度)
    skewY(ydeg) : 沿y轴倾斜的角度(改变的是x轴切斜角度)

注意：x轴的倾斜，最终是改变y轴的倾斜角度
     y轴的倾斜，最终是改变x轴的倾斜角度

在讲3D转换之前先讲两个属性：

perspective：定义 人眼 到 3D投射物体的距离，即设置从何处查看一个元素的角度，以像素计。

注意：该属性要定义在 3D转换元素的父元素上
兼容性：目前浏览器都不支持 perspective 属性。
       Chrome 和 Safari ：-webkit-
       Firefox：-moz-
       ex：-webkit-perspective:1000px;

transform-style：指定嵌套元素是怎样在三维空间中呈现，写在要实现3D效果元素的父元素上

取值：1、flat  默认值，所有子元素在2D平面呈现
     2、preserve-3d  所有子元素在3D空间中呈现

5、3D旋转：能够使元素在 x轴，y轴，z轴分别做旋转操作

取值（函数）：
    rotateX(xdeg);   以x轴做为中心轴，实现元素的旋转
    rotateY(ydeg);   以y轴做为中心轴，实现元素的旋转
    rotateZ(zdeg);    以z轴做为中心轴，实现元素的旋转
    rotate3D(x,y,z,ndeg)  
    rotate3D(1,0,0,45deg)  -->rotatex(45deg)
    rotate3D(1,1,0,45deg)  -->1表示实现旋转，0表示不实现
    rotate3D(1,1,1,45deg)
= transform:rotatex(45deg) rotatey(45deg) rotatez(45deg)
注意：1、会根据转换 原点 实现角度的变换
     2、元素在旋转时，连同坐标轴也一同旋转
所以：要注意函数书写的顺序，先旋转再位移，先位移再旋转，所得结果不一样

6、3D位移：在2D位移基础上，增加对 z 轴上的位移距离控制

取值（函数）：
    translate(x,y,z): x,y,x单位：px %
    translateX(x):
    translateY(y):
    translateZ(z):

<!doctype html>
<html>
  <head>
    <title>Insert a title</title>
    <meta charset="utf-8">
    <style>
      #parent{
        width:400px;
        height:400px;
        border:1px solid #333;
        margin:100px auto;
        position:relative;
        /*保留其子元素的3D位置*/
        transform-style:preserve-3d;
        -webkit-transform-style:preserve-3d;
      }
      #parent div{
        width:200px;
        height:200px;

        position:absolute;
        left:100px;
        top:100px;
      }
      #s1{
        background-color:red;
        /*向后退:200px*/
        transform:translatez(-200px);
      }
      #s2{
        background-color:blue;
        /*原地不动*/
      }
      #s3{
        background-color:green;
        /*向前走200px*/
        transform:translatez(200px);
      }

      #stage{
        perspective:1200px;
        -webkit-perspective:1200px;
      }

      #parent{
        transform:rotatex(-20deg);
      }
    </style>
  </head>
  <body>
    <div id="stage">
      <div id="parent">
        <div id="s1">1</div>
        <div id="s2">2</div>
        <div id="s3">3</div>
      </div>
    </div>
  </body>
</html>

转换

3.过渡

过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：

1、指定要添加效果的CSS属性
2、指定效果的持续时间。

属性 transition：定义在要实现功能的标签下

选项：
    transition-property：规定设置过渡效果的css属性的名称
    transition-duration：（必须）规定完成过度需要多少秒或毫秒
    transition-timing-function：规定速度效果的速度和曲线
        取值：1.ease默认 
             2.linear匀速 
             3.ease-in慢速开始，快速结束
             4.ease-out 快速开始，慢速结束 5.ease-in-out 慢-快-慢
    transition-delay：规定在过渡效果开始之前需要等待的时间，以秒或毫秒计，默认0

简写transition：property duration timing-function delay（多过度用逗号隔开）

Ex：transition：transform 1s ease 0s;
    transition:background 2s linear,border-radius 2s linear;

可以设置过渡效果的属性：

1.颜色属性 2.取值为数值的属性 3.转换属性 4.渐变属性 5.阴影属性 6.visibilitty

注意：过渡放在’:hover’等上管去不管回，放在元素上，管去管回

<!doctype html>
<html>
  <head>
    <title>Insert a title</title>
    <meta charset="utf-8">
    <style>
      #d1{
        width:200px;
        height:200px;
        border:2px solid #333;
        background-color:#E4393C;
        /*此处声明过渡：管去管回*/
        /*增加过渡*/
        /*1、指定属性(必须的)*/
        transition-property:background,border-radius;
        /*2、指定时长(必须的)*/
        transition-duration:2s;
        /*3、指定速度时间速率*/
        transition-timing-function:linear;
        /*4、指定延迟*/
        /*transition-delay:5s;*/
      }
      #d1:hover{
        background-color:#005aa0;
        border-radius:50%;
        /*此处声明过渡：只管去不管回*/
      }

      #scroll{
        width:50px;
        height:50px;
        background-color:#e4393c;
        border:2px solid #005aa0;
        text-align:center;
        line-height:50px;
        border-radius:50%;
        font-weight:bold;
        font-size:24px;
        color:#fff;
        /*此处声明过渡：管去管回*/
        transition:transform 3s;
      }
      #scroll:hover{
        transform:translate(500px) rotate(1080deg);
      }
    </style>
  </head>
  <body>
    <div id="scroll">滚</div>
    <div id="d1"></div>
  </body>
</html>

4.动画

动画是复杂版的过渡！

1、什么是动画

使元素从一种样式逐渐变化为另一种样式的过程，通过关键帧来控制动画的每一步

关键帧：当前关键帧所显示的时间点和样式

2、使用动画的步骤

1、声明动画
    为动画指定名称
    定义动画中的关键帧(时间点，样式 )
2、调用动画

3、声明动画

语法：
    @keyframes 动画名称{
        /*声明若干关键帧*/
        0%{  动画开始时元素的样式 }
        25%{    动画运行到 1/4 处是显示的样式 }
        ... ...
        100%{ 动画运行结束时 显示的样式 }
    }

4.调用动画-动画属性

1、指定调用动画名称
    属性：animation-name
    取值：已声明好的 keyframes 的名称

2、指定动画执行时长：完成一个周期所用时间
    属性：animation-duration
    取值：s | ms 为单位的数值

3、指定动画 速度时间曲线函数
    属性：animation-timing-function
    取值：ease,linear,ease-in,ease-out,ease-in-out

4、指定动画 延迟
    属性：animation-delay
    取值：以 s | ms 为单位的数值

5、指定动画播放次数
    属性：animation-iteration-count
    取值：1、具体数值；具体执行次数
         2、infinite；无限次

6、指定动画播放方向
    属性：aniamtion-direction
    取值：1、normal：正向播放，由0% ~100%
         2、reverse：逆向播放，由100%~0%
         3、alternate：轮流播放

7、动画属性（简写）
    animation：name(名称) duration(时长) timing-function(速率) delay(延迟) iteration-count(次数) direction(方向);

8、指定 动画的填充模式
    作用：规定动画在播放前或播放后的显示模式
    属性：animation-fill-mode
    取值：1、none
         2、forwards
            当动画完成后，将动画保持在最后一个帧的状态中
         3、backwards
            当动画播放前(在延迟时间内)，动画会应用在第一个帧的状态上
         4、both：播放前后的填充模式都引用

9、指定动画的播放状态
    属性：animation-play-state
    取值：1、paused暂停
         2、running播放

10.兼容性
    通过 浏览器前缀解决 兼容性问题:
    Firefox : -moz-keyframes 
    Chrome 和 Safari : -webkit-keyframes 

<div id="stage">
    <div id="parent">
        <div id="child1"></div>
        <div id="child2"></div>
        <div id="child3"></div>
        <div id="child4"></div>
        <div id="child5"></div>
        <div id="child6"></div>
    </div>
</div>

<style>
    #stage{
        width:800px;
        height:100px;
        margin: 50px auto;
        padding: 100px 0;
        border:1px solid red;
    }
    #parent:hover{
        animation-play-state:paused;
    }
    #parent div{
        width:100px;
        height:100px;
        border:1px solid #333;
        position:absolute;
        left:50px;
    }

    #child1{
        background:url(image/kaola.jpg) no-repeat;
        background-size:100% 100%;
        transform:translateZ(200px);
        animation:child1 5s linear infinite alternate;
    }
    #child2{
        background:url(image/baxianhua.jpg) no-repeat;
        background-size:100% 100%;
        transform:rotatey(60deg) translatez(200px);
        animation:child2 5s linear infinite alternate;
    }
    #child3{
        background:url(image/image31.jpg) no-repeat;
        background-size:100% 100%;
        transform:rotatey(120deg) translatez(200px);
        animation:child3 5s linear infinite alternate;
    }
    #child4{
        background:url(image/image32.jpg) no-repeat;
        background-size:100% 100%;
        transform:rotatey(180deg) translatez(200px);
        animation:child4 5s linear infinite alternate;
    }
    #child5{
        background:url(image/image33.jpg) no-repeat;
        background-size:100% 100%;
        transform:rotatey(240deg) translatez(200px);
        animation:child5 5s linear infinite alternate;
    }
    #child6{
        background:url(image/img3.jpg) no-repeat;
        background-size:100% 100%;
        transform:rotatey(300deg) translatez(200px);
        animation:child6 5s linear infinite alternate;
    }
    @keyframes xuanzhuan{
        0%{
            transform:rotateX(-20deg) rotatey(0deg);
        }
        50%{
            transform:rotateX(-20deg) rotatey(180deg);
        }
        100%{
            transform:rotateX(-20deg) rotatey(360deg);
        }
    }
    @-moz-keyframes xuanzhuan{
        0%{
            transform:rotateX(-20deg) rotatey(0deg);
        }
        50%{
            transform:rotateX(-20deg) rotatey(180deg);
        }
        100%{
            transform:rotateX(-20deg) rotatey(360deg);
        }
    }
    @-webkit-keyframes xuanzhuan{
        0%{
            transform:rotateX(-20deg) rotatey(0deg);
        }
        50%{
            transform:rotateX(-20deg) rotatey(180deg);
        }
        100%{
            transform:rotateX(-20deg) rotatey(360deg);
        }
    }

    @-moz-keyframes child1{
        0%{
            transform:rotatey(0deg) translatez(200px);
        }
        50%{
            transform:rotatey(0deg) translatez(100px);
        }
        100%{
            transform:rotatey(0deg) translatez(0px);
        }
    }
    @-moz-keyframes child2{
        0%{
            transform:rotatey(60deg) translatez(200px);
        }
        50%{
            transform:rotatey(60deg) translatez(100px);
        }
        100%{
            transform:rotatey(60deg) translatez(0px);
        }
    }
    @-moz-keyframes child3{
        0%{
            transform:rotatey(120deg) translatez(200px);
        }
        50%{
            transform:rotatey(120deg) translatez(100px);
        }
        100%{
            transform:rotatey(120deg) translatez(0px);
        }
    }
    @-moz-keyframes child4{
        0%{
            transform:rotatey(180deg) translatez(200px);
        }
        50%{
            transform:rotatey(180deg) translatez(100px);
        }
        100%{
            transform:rotatey(180deg) translatez(0px);
        }
    }
    @-moz-keyframes child5{
        0%{
            transform:rotatey(240deg) translatez(200px);
        }
        50%{
            transform:rotatey(240deg) translatez(100px);
        }
        100%{
            transform:rotatey(240deg) translatez(0px);
        }
    }
    @-moz-keyframes child6{
        0%{
            transform:rotatey(300deg) translatez(200px);
        }
        50%{
            transform:rotatey(300deg) translatez(100px);
        }
        100%{
            transform:rotatey(300deg) translatez(0px);
        }
    }
    @-webkit-keyframes child1{
        0%{
            transform:rotatey(0deg) translatez(200px);
        }
        50%{
            transform:rotatey(0deg) translatez(100px);
        }
        100%{
            transform:rotatey(0deg) translatez(0px);
        }
    }
    @-webkit-keyframes child2{
        0%{
            transform:rotatey(60deg) translatez(200px);
        }
        50%{
            transform:rotatey(60deg) translatez(100px);
        }
        100%{
            transform:rotatey(60deg) translatez(0px);
        }
    }
    @-webkit-keyframes child3{
        0%{
            transform:rotatey(120deg) translatez(200px);
        }
        50%{
            transform:rotatey(120deg) translatez(100px);
        }
        100%{
            transform:rotatey(120deg) translatez(0px);
        }
    }
    @-webkit-keyframes child4{
        0%{
            transform:rotatey(180deg) translatez(200px);
        }
        50%{
            transform:rotatey(180deg) translatez(100px);
        }
        100%{
            transform:rotatey(180deg) translatez(0px);
        }
    }
    @-webkit-keyframes child5{
        0%{
            transform:rotatey(240deg) translatez(200px);
        }
        50%{
            transform:rotatey(240deg) translatez(100px);
        }
        100%{
            transform:rotatey(240deg) translatez(0px);
        }
    }
    @-webkit-keyframes child6{
        0%{
            transform:rotatey(300deg) translatez(200px);
        }
        50%{
            transform:rotatey(300deg) translatez(100px);
        }
        100%{
            transform:rotatey(300deg) translatez(0px);
        }
    }
    @keyframes child1{
        0%{
            transform:rotatey(0deg) translatez(200px);
        }
        50%{
            transform:rotatey(0deg) translatez(100px);
        }
        100%{
            transform:rotatey(0deg) translatez(0px);
        }
    }
    @keyframes child2{
        0%{
            transform:rotatey(60deg) translatez(200px);
        }
        50%{
            transform:rotatey(60deg) translatez(100px);
        }
        100%{
            transform:rotatey(60deg) translatez(0px);
        }
    }
    @keyframes child3{
        0%{
            transform:rotatey(120deg) translatez(200px);
        }
        50%{
            transform:rotatey(120deg) translatez(100px);
        }
        100%{
            transform:rotatey(120deg) translatez(0px);
        }
    }
    @keyframes child4{
        0%{
            transform:rotatey(180deg) translatez(200px);
        }
        50%{
            transform:rotatey(180deg) translatez(100px);
        }
        100%{
            transform:rotatey(180deg) translatez(0px);
        }
    }
    @keyframes child5{
        0%{
            transform:rotatey(240deg) translatez(200px);
        }
        50%{
            transform:rotatey(240deg) translatez(100px);
        }
        100%{
            transform:rotatey(240deg) translatez(0px);
        }
    }
    @keyframes child6{
        0%{
            transform:rotatey(300deg) translatez(200px);
        }
        50%{
            transform:rotatey(300deg) translatez(100px);
        }
        100%{
            transform:rotatey(300deg) translatez(0px);
        }
    }
</style>

案例

动画资源库
Animate.css 一款强大的预设css3动画库

5.媒体查询

多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。

语法：@media

@media not|only mediatype and (expressions) {
    CSS 代码...;
}
not: not是用来排除掉某些特定的设备的，必须配合mediatype，比如 @media not print（非打印设备）。
only: 用来定某种特别的媒体类型。必须配合mediatype ，可省略only关键字。
all：匹配所有设备，可省略。

mediatype ：多媒体类型
取值：all  ：用于所有多媒体类型设备
     print：用于打印机
     screen：用于电脑屏幕，平板，智能手机等。
     speech：用于屏幕阅读器

and：and关键字用于合并多个媒体属性或合并媒体属性与媒体类型。

@media only screen and (min-width: 500px) and (max-width: 1000px) {
    .gridmenu {
        width:100%;
    }

    .gridmain {
        width:100%;
    }

    .gridright {
        width:100%;
    }
}
常用判断条件属性：
    device-height   定义输出设备的屏幕可见高度。
    device-width    定义输出设备的屏幕可见宽度。
    max-height  定义输出设备中的页面最大可见区域高度。
    max-resolution  定义设备的最大分辨率。
    max-width   定义输出设备中的页面最大可见区域宽度。
    min-height  定义输出设备中的页面最小可见区域高度。
    min-resolution  定义设备的最小分辨率。
    min-width   定义输出设备中的页面最小可见区域宽度。
    orientation 定义输出设备中的页面可见区域高度是否大于或等于宽度。
    resolution  定义设备的分辨率。如：96dpi, 300dpi, 118dpcm

@media不但可以卸载css中，也可以写在link中，判断是否在不同的媒体上使用不同的样式文件：

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(min-width: 700px) and (orientation: landscape)" href="print.css">

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

详细媒体查询介绍看这里 菜鸟教程 媒体查询介绍

6.Flex

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

写法：display：flex | inline-flex;
注意：元素设置flex属性后,其float,clear vertical-align属性将失效

兼容性

Webkit 内核的浏览器，必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

容器

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

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

水平主轴：main start，main end
垂直交叉轴：cross start, cross end
占据空间：main size  cross size

容器属性：flex-direction：子元素的的排列顺序

取值：row：默认,主轴为水平方向,起点在左边
     row-reverse：主轴为水平方向,起点在右边
     column：主轴为垂直方向,起点在上沿
     column-reverse：主轴为垂直方向,起点在下沿

容器属性：flex-wrap：如何换行

取值：nowrap：默认，不换行
     wrap：向下换行
     wrap-reverse：向上换行

简写：flex-flow：flex-direction flex-wrap

容器属性：justify-content：子元素在主轴方向的对齐方式

取值：flex-start：默认，左对齐
     flex-end：右对齐
     center：居中
     space-between：两端对齐，子元素之间的间隔都相等
     space-around：子元素两侧的间隔相等(子元素之间的距离是子元素与边框的距离的两倍)

容器属性：align-items：子元素在交叉轴上的对齐方式

取值：stretch：默认值，子元素未设置高度，则沾满整个容器
     flex-start：起点对齐
     flex-end：终点对齐
     center：中点对齐
     baseline：子元素的第一行文字的基线对齐

容器属性：align-content：定义多根轴线的对齐方式

取值：stretch：默认值，轴线占满整个交叉轴
     flex-start：与交叉轴的起点对齐
     flex-end：与交叉轴的终点对齐
     center：与交叉轴的中点对齐
     flex-between：与交叉轴两端对齐，轴线之间均匀分布
     flex-around：轴线两侧的间隔相等(轴线之间的距离是轴线与边框的距离的两倍)

子元素属性：order：定义子元素的排列顺序

取值：数字，数值越小，排列越靠前，默认0

子元素属性：flex-grow：当容器空间有余时,放大倍数

取值：数字，默认0，不放大，所有子元素按数值比例分配剩余空间，数值相等则平分

子元素属性：flex-shrink：定义子元素的缩小比例

取值：数字，默认0，不缩小，所有子元素按数值比例缩小，数值相等则均匀缩小

子元素属性：flex-basis：规定子元素占据的主轴空间(未分配多与空间前)

取值：(同width，height)，默认auto

简写：flex：flex-grow flex-shrink flex-basis

默认：0  1  auto   
auto：(1 1 auto)
none：(0 0 auto)

子元素属性：align-self：允许单个子元素有与其他子元素不一样的对齐方式

取值：默认auto,等同于atretch
     stretch：子元素未设置高度，则沾满整个容器
     flex-start：起点对齐
     flex-end：终点对齐
     center：中点对齐
     baseline：子元素的第一行文字的基线对齐

更多Flex的介绍
阮一峰的网络日志：Flex 布局教程

7.Filter

定义了元素(通常是)的可视效果(例如：模糊与饱和度)。
这里写图片描述

了解详情，可以看 CSS3 Filter的十种特效

8.多列

1、分隔列：将一段文本拆分成几列

属性：column-count
取值：数字

2、列间隔：设置每两列之间的水平距离

属性：column-gap
取值：px为单位的数值

3、列规则：设置每两列之间的 分割线 的宽度，样式，颜色

属性：column-rule
取值：width style color

4、兼容性

IE10 和 Opera 支持多列
通过 浏览器前缀解决 兼容性问题:
Firefox : -moz-
Chrome 和 Safari : -webkit-
-moz-column-count:  
-moz-column-gap:
-moz-column-rule:

9. CSS Hack

有IE就有hack！！虽然也有其他一些浏览器可能用到Hack，可也是忽略不计的。

CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的。

CSSHack原理：通过 css属性的 优先级 来解决兼容性问题
CSSHack解决方式：

1、CSS类内部Hack

在 属性名称前 或 属性值后 增加一些指定浏览器能识别的前后缀 解决兼容性问题

2、选择器Hack

在 选择器 前增加指定浏览器能够识别的标识，来解决兼容性问题
        * : IE6 识别
        *+: IE7 识别

div{
    background-color:red;
}

/*以下浏览器只有在IE6中能识别*/
*div{
    background-color:green;
}
/*以下浏览器只有在IE7中能识别*/
*+div{
    background-color:blue;
}

3、HTML头部引用Hack

IE 条件注释 来解决兼容性问题
在 注释中 嵌入浏览器判断条件，如果条件满足，则执行内容，如果条件不满足，则当注释处理
语法：
    <!--[if 条件 IE 版本]>
        在指定浏览器中要执行的内容
    <![endif]-->
    版本： 6,7,8,9,10,
        省略不写的话，判断是否为 IE浏览器
    条件：
        1、gt 在指定版本以上的浏览器版本中，正常解析
            ex: <!--[if gt IE 6]>
                    该段内容，只能在大于IE6的浏览器中被解析
                <![endif]-->
        2、gte 在 大于等于指定浏览器版本中，可以被正常解析
            ex: <!--[if gte IE 6]>
                    该段内容，只能在IE6以及以上的浏览器中被解析
                <![endif]-->
        3、lt 小于
        4、lte 小于等于
        5、! 非，指定版本以外的所有版本中被解析
            ex: <!--[if !IE 6]>
                    该段内容会在IE6以外的浏览器中被解析
                <![endif]-->

#d1{
    width:200px;
    height:200px;
    background-color:black;
    background-color:green\0;/*IE8,9,10*/
    background-color:blue\9\0;/*IE9,10*/
    +background-color:pink;/*IE6 IE7*/
    -background-color:red;/*IE6*/
  }
<!-- 引入 个浏览器的 兼容性css文件 -->
<!--[if IE 6]>
  <link rel="stylesheet" href="style_ie6.css">
<![endif]-->


<!--[if IE 7]>
  <link rel="stylesheet" href="style_ie7.css">
<![endif]-->

<!--[if IE 8]>
  <link rel="stylesheet" href="style_ie8.css">
<![endif]-->

<!--[if gt IE 8]>
  <link rel="stylesheet" href="style_ie9.css">
<![endif]-->
<!doctype html>
<html>
  <head>
    <title>Insert a title</title>
    <meta charset="utf-8">
    <!--[if IE 6]>
      <style>
        h1{
          color:red;
        }
      </style>
    <![endif]-->

    <!--[if IE 8]>
      <style>
        h1{
          color:blue;
        }
      </style>
    <![endif]-->
  </head>
  <body>
    <h1>正常显示的H1</h1>
    <!--[if IE 6]>
      <h1>只在IE6中执行的内容</h1>
    <![endif]-->

    <!--[if IE 8]>
      <h1>只在IE8中执行的内容</h1>
    <![endif]-->
    <!--[if gt IE 6]>
            <h1>该段内容只有在IE6以上浏览器才能显示</h1>
        <![endif]-->
  </body>
</html>

资源链接
W3C CSS3
菜鸟教程 CSS3

hfhan_872914334
关注
专栏目录
css3的一些动画（代码及演示）
qq_43955202的博客
03-31 7244
CSS3 的一些动画（代码及演示） 1. 过渡： Transition(实现元素不同状态间的平滑过渡） 补间动画：从初始状态到终了状态。 帧动画：按固定顺序和速度播放。 属性： Transition-property：all； 所有属性均过渡 Transition-duration：1s； 设置过渡时间 Transition-timing-function:linear;设置运动曲线 （...
CSS3旋转动画(平滑,无限循环)
别当程序员的博客
11-03 7405
CSS3旋转动画
CSS3中的animation属性实现无限循环的无缝滚动
热门推荐
JackieDYH的博客
04-23 1万+
在页面中循环展示信息的功能之前一般是用js来实现的，那么用CSS3该如何实现实现呢 有时候在页面的某个模块中，需要无限循环的滚动一些消息。那么如果我们用js实现无缝衔接滚动的思路是什么呢（比如我们这个模块是向上滚动的）？ 克隆A一份完全一样的数据B放在原数据A的后面； 使用setInterval向上滚动A的父级容器； 当向上滚动的距离L正好的A的高度时(L==A.height())，L=0，重新开始滚动，无限循环。 克隆一份数据放在后面，是为了当A向上移动时，后面有数据能填补
css属性
zh__quan的博客
08-06 2445
目录 CSS Unicode字体 CSS外观属性 CSS复合选择器 标签显示模式（display） 块级元素(block-level) 行内元素(inline-level) CSS 三大特性 CSS 背景(background) 盒子模型（CSS重点） 盒子边框（border） 内边距（padding） 外边距（margin） 盒子模型布局...
WEB前端--CSS学习笔记（四）
qq_39953312的博客
04-28 308
1.厂商前缀 IE： -ms- Chrome&Safari： -webkit- FireFox： -moz- Opera： -o- 2.CSS3选择器 丰富选择的目的：在标签中减少class和id属性的使用。 1）属性选择器 [属性名] [属性名=属性值] [属性名^=属性值] [属性名$=属性值] [属性名*=属性值] ...
Javascript教程--从入门到精通.rar
07-09
1. **面向对象编程**：JavaScript支持基于原型的对象导向编程，包括构造函数、原型链、继承和封装等概念，对于编写复用性更强的代码至关重要。 2. **闭包**：闭包是JavaScript中的一个高级特性，它能保留内部函数的...
头歌python答案及题目-100(1).zip
最新发布
04-17
3. **网页解析**：学习HTML和CSS选择器，使用BeautifulSoup或lxml进行元素定位和内容提取。 4. **数据提取**：利用正则表达式或特定库（如PyQuery）从HTML文本中抽取目标数据。 5. **异步爬虫**：了解asyncio和...
Python爬虫 - 全网精华资源汇总.rar
03-18
3. **HTML与CSS选择器**：理解HTML的基本结构和元素是解析网页内容的关键。CSS选择器用于选取HTML或XML文档中的特定元素，如`id`、`class`、`tag`等，BeautifulSoup库提供了对CSS选择器的良好支持。 4. **正则...
CSS进阶指引
09-25
接下来，我们将探讨CSS进阶中的一些关键知识点，包括BEM和OOCSS方法论、CSS预处理器的使用，以及代码组织和模块化的技巧。 BEM（Block, Element, Modifier）是一种CSS类命名方法论，旨在帮助开发人员创建可重用和...
网页设计与制作-1期 学习指南.pdf
07-14
这门课程以前导课程计算机基础为起点，随后衔接数据结构、面向对象程序设计、ASP.NET程序设计和Java Web程序设计等进阶课程。通过学习《网页设计与制作》，学生应建立起Web客户端静态页面设计的思维，掌握HTML语言、...
Css3实现3D旋转代码
weixin_44560357的博客
07-28 886
Css3动画旋转： animation:属性用来设计旋转一次后的时间间隔 linear infinite：让旋转无限循环， 旋转的幅度：旋转沿x轴旋转-10度,再绕y轴旋转，这样看起来就顺畅，不然旋转起来会一卡一顿的 旋转时先绕y轴旋转,再沿z轴平移200px,就会形成立体感。 下面是html页面布局代码： <div class="nn"> <b><im...
css3实现动画无限循环
qq_58626489的博客
02-23 1579
要在CSS3中实现动画的无限循环，你可以使用animation属性和infinite关键字。在上面的示例中，我们首先使用@keyframes声明了一个名为的关键帧动画。然后，在.element类选择器中，通过animation属性将该动画应用到一个元素上。设置2s即动画的时长为2秒，并且使用infinite关键字来表示动画应该无限循环。你可以根据需要调整关键帧的百分比和对应的样式，以创建不同效果的动画。
css 动画
weixin_41929029的博客
03-23 145
css中动画的书写 .map3 { width: 7.075rem; height: 7.075rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: url(../images/jt.png) 100% 100% ...
认识css关键帧动画
True_cl的博客
04-26 785
一，css动画 我们可以使用 CSS3的一些属性，能够创建动画，可以在许多网页中取代动画图片、Flash 动画以及JavaScript 二，关键帧动画的了解 animation这个属性也就是关键帧动画，配合@keyframs的使用，可以绘制一个简单的动画效果， transition这个属性作用就是可以作为过度的作用，可以让动画在规定的时间里面执行， transform这个属性的作用可以让规定的内...
HTML入门DAY15
t3163786的博客
02-24 491
背景渐变 1.线性渐变 background：linear-gradient(颜色1，颜色2)普通渐变 background：linear-gradient(颜色1 %，颜色2 %)设置渐变比例 background：linear-gradient(to 方向， 颜色1，颜色2)设置渐变方向 background：linear-gradient(to 方向一 方向，二颜色1，颜色2)设置对角渐变 background：linear-gradient( *dog ，颜色1，颜色2)设置渐变角度 如果渐变比
css3中的animation属性
diaota2693的博客
04-02 218
作用：通过给元素添加animation属性，可以赋予该元素动画效果。 <!DOCTYPE html><html> <head> <style> div{width:100px;height:100px;background:red;animation:my 5s;} @keyf...
CSS深入学习三——动画
Lotus_fragrance的博客
05-09 535
动画 使用animation添加动画效果 思考： 过渡可以实现什么效果？ 答：实现2个状态间的变化过程 动画效果： 实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停） 语法： @keyframes 动画名称 { from { } to { } } @keyframes 动画名称 { 0% { } 10% { } 15% { } 100% { } } 使用动画： naima
CSS：实现动态流光线条效果/动态流光线条颜色渐变效果
smm的博客
04-25 1万+
使用纯CSS实现动态流光线条效果（拖尾透明）
CSS3 用动画实现无缝滚动图效果
xiongmouren_jy的博客
05-12 1万+
使用CSS3 实现无缝滚动窗口效果
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值