CSS基础知识（四）

1、transition 过渡

       -通过过渡可以指定一个属性发生变化时的切换方式

       -通过过渡创建一些非常好的效果，提升用户体验 

transition-property  指定执行过渡的属性,多个属性使用，隔开，

                所有都需要指定则使用all

                -大部分属性都支持过渡效果（可计算的值，颜色等)

注意：过渡效果必须是一个有效值向另外一个有效值过渡

transition-duration  指定过渡效果的持续时间

           -时间单位：s 和 ms  1s=1000ms

 transition-timing-function 过渡的时序函数，指定过渡的持续方式

          可选值：

                      ease 默认值 慢速开始，先加速，再减速

                      linear 匀速运动

                      ease-in 加速运动

                      ease-out 减少运动

                      ease-in-out 先加速，再加速

                      cubic-bezier() 贝塞尔曲线，来指定时序函数\

                      steps()  分布执行

                         -end 表示时间结束时执行

                         -start 表示时间开始时执行

 transition-delay  表示过渡效果的延迟，等待一段时间后执行过渡

transition  简写属性：

可以设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中前者是持续时间，后者是延迟时间。

2、动画

动画和过渡类似 可以实现一些动态效果

   不同点：

                  过渡需要在某个属性发生变化时才会触发，

                  而动画可以自动触发

设置动画效果，必须要设置一个关键帧 ，关键帧设置动画执行的每一个步骤

一般定义动画语法：  @keyframes  名称{

   from{

                         }

  to{

                        }

                    }

 animation-name 要设置对当前元素生效的关键帧的名字

 animation-duration 设置动画持续时间

 animation-delay  设置动画延时

 animation-timing-function  动画时序函数

 animation-iteration-count  设置执行次数(infinite  无限执行)

 animation-direction   指定动画的运行的方向

                      可选值：

                         -normal   默认值 从from到to运行  重复方向不变

                         -reverse 从to向from运行  重复方向不变

                         -alternate 从from到to运行，重复执行动画时反向执行

                         -alternate-reverse 从to向from运行,重复执行动画时反向执行

 animation-play-state  指定动画的播放状态

                       可选值： 

                               running 默认值 动画执行

                               paused   动画暂停

animation-fill-mode  指动画的填充模式

                       可选值：

                          none 默认值  动画执行完毕回到原来位置

                          forwards  动画结束时停在to处

                          backwords  动画延时等待时，元素就会处于开始位置

                          both   结合了forwards和 backwords特点

3、变形

变形是指通过 css来改变元素的形状和位置

   变形不会影响页面的布局 

            translateX()  沿着x轴平移

            translateY()   沿着y轴平移    

            translateZ()     沿着z轴平移 

注意：平移元素百分比相对于自身计算

z轴平移调整元素在z轴的位置，正常情况下的就是调整元素和人眼的之间的距离

            距离越大，元素离人越近

z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，

                如果需要看见效果必须设置网页的视距

  html{
            /* 设置网页视距为800px,人眼距离网页的距离 */
            perspective: 800px;
        }

   旋转：通旋转可以使元素沿着x、y和z旋转指定的角度

                 rotateX()

                 rotateY()

                 rotateZ()

对元素进行缩放的函数

               scaleX()   水平方向缩放

               scaleY()   垂直方向缩放

               scale()     双方向缩放

               scaleZ()   3d图中进行z轴缩放

4、弹性容器和弹性元素样式

 flex(弹性盒、伸缩盒)

            -是css中地又有一种布局手段，它主要用来代替浮动来完成页面布局

            -flex可以使元素具有弹性，让元素可以跟随页面大小的改变而改变

 弹性容器

               -现将元素设置为一个弹性容器

               -通过display来设置弹性容器

                   display：flex  设置块弹性容器

                   display：inline-flex  设置为行内弹性容器

 弹性元素

               -弹性容器的直接子元素是弹性元素

               -一个元素可以同时是弹性元素和弹性容器

（1）弹性容器样式

主轴 -弹性元素排列方向

侧轴(辅轴)-与主轴垂直的方向

       justify-content 

                        -如何分配主轴上的空白空间

                        -可选值：

                            -flex-start  元素沿着主轴起边排列

                            -flex-end    元素沿着主轴终边排列

                            -flex-center  元素居中排列

                            -space-around  空白分布到元素两侧

                            -space-evenly   空白均匀分布到元素的单列

                            -space-between   空白均匀分布到元素间

       align-items 

                    -元素在辅轴上是如何对齐

                    -元素间的关系

                    可选值：

                          stretch 默认值，将元素的长度设置为相同的值

                          flex-start  元素不被拉伸，沿着辅轴起边对齐

                           flex-end   元素不被拉伸，沿着辅轴终边对齐

                           center     居中对齐,元素不被拉伸

                           baseline   基线对齐,元素不被拉伸

align-self   用来覆盖当前弹性元素上的align-items

       align-content  辅轴元素空白空间

                        可选值：

                          flex-start

                          flex-end

                          space-around

                          space-between

                          space-evenly    

（2）弹性元素属性

弹性元素的属性：

        flex-grow 指定弹性元素的伸展系数,默认值为0

                   - 当当父元素有多余空间时，子元素如何生长

                   -父元素的剩余空间会按照比例进行分配

        flex-shrink 指定弹性元素的收缩系数

                   -当父元素空间不足以容纳所有子元素时，如何对子元素进行收缩

        flex-direction  指定容器中弹性元素的排列方式

               可选值：

                    row 默认值  弹性元素在容器中水平排列（从左向右）

                    row-reverse 弹性元素在容器中水平排列（自右向左）

                    column 弹性元素在容器中垂直排列（自上向下）

                    column-reverse  弹性元素在容器中垂直排列（自下向上）

         flex-wrap  当元素溢出时，设置弹性元素是否在弹性容器中自动换行

                   可选值：

                       nowrap 默认值 ，元素不会自动换行

                       wrap      自动换行

                       wrap-reverse  元素沿着辅轴反方向换行

 flex-flow   是wrap和direction的简写属性

        flex-shrink   弹性元素缩减系数

                -缩减系数的计算方式比较复杂

                -缩减多少是根据缩减系数和元素大小来计算

       flex-basis  指定的是元素在主轴上的基础长度

                      -主轴是横向的 则该值指定的是元素的宽度

                      -主轴是纵向的 则该值指定的是元素的高度

                      -默认值是auto 表示参考自身高度和宽度

                        如果传递一个具体的数值，则该以该具体值为准

flex 简写属性

          语法：

                  flex： 增长  缩减 基础；

          可选值：

                  initial  表示 "flex:0 1 auto"

                  auto  表示 "flex :1 1 auto"

                  none  表示"flex: 0 0 auto"(弹性元素没有弹性)

5、像素

 -css像素  编写网页时所写的像素

 -物理像素  实际使用时所示像素

浏览器在显示网页时，需要将css像素转换为物理像素然后再呈现

            一个css像素转换为几个物理像素由浏览器决定

            默认情况下，pc端一个css像素等于一个物理像素

 视口(viewport)：

            -屏幕中用来显示网页的区域

            -可以通过视口的大小来观察css像素和物理像素的比值

默认情况下：

                (html宽度）视口像素1920px (css像素)

                        1920px(物理像素)

                        比例1:1

放大两倍情况下

                        960px (css像素)

                        1920px(物理像素)

                        比例1:2

            可以通过改变视口大小来改变两种像素间的比例

6、移动端

在不同的屏幕，单位的像素的大小不同，像素越小屏幕越清晰

    智能手机的像素点远远小于计算机的像素点

默认情况下移动端的网页都会将视口设置为980像素（css像素）

        以确保移动端的网站可以在移动端正常访问，

        但是如果网页的宽度超过了980，移动端的浏览器会自动将网页缩放以完整显示网页

大部分的pc端网站都可以在移动端正常浏览，但是往往都不会有一个好的用户体验

         为了解决这个问题大部分网站都会专门为移动端设计网页

移动端默认视口大小是980px(css像素)

   默认情况下，移动端的像素比为 980/移动端宽度

            编写移动页面时，必须要确保有一个比较好的像素比：

               1css像素 对应2个物理像素

               1css像素 对应3个物理像素

 可以通过meta标签来调整视口大小

               每一款移动设备设计时，都有一个最佳像素比

               完美视口在每款移动设备中不一样

 <!-- 移动端页面设置时完美视口代码 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

7、视口

由于不同移动设备的完美视口不一样， 所以在移动端开发是不能用px进行布局 

vw 表示视口的宽度

           -100vw 对应一个完美视口宽度

             1vw=1%

网页中字体大小最小是12px 不能设置比一个12px的的字体

        若设置了，字体会自动设为12px

 vw适配方案

        0.1333vw=1px

        5.3333vw=40px  扩大40倍

        13.33vw=100px  扩大100倍

8、 响应式布局，媒体查询

网页可以根据不同的设备或窗口大小呈现出不同效果

            -使用响应式布局可以使一个网页适用于所有设备

            -通过媒体查询可以为不同的设备，或设备不同的状态来设置样式

使用媒体查询

           语法： @media 查询规则（）

            媒体类型： 

                 all   所有设备

                 print  打印设备

                 screen  带屏幕的设备

                 speech  屏幕阅读器

 -可以使用逗号隔开，连接多个媒体类型，其之间是或关系

-用and表示且的关系

-not 整体取非

  可以在媒体类型前添加only，表示只有

                only的使用主要为了兼容一些老版本的浏览器（老版本浏览器不能识别）

媒体特性：

            width 视口宽度

            height 视口高度

           min-width 最小宽度

            max-width 最大宽度

  样式切换的分界点，称其为断点，即网页样式在改点发生变化

一般常用的断点：

               小于768  超小屏幕  max-width=768px

               大于768  小屏幕    min-width=768px

               大于992  中型屏幕   min-width=992px

               大于1200 大屏幕    min-width=1200px

 @media (min-width:500px) and (max-width: 600px){
            body{
                background-color: blueviolet;
            }
        }