笔记

transform：变形   变形不会影响页面布局  用来设置元素的变形效果
translateX（） 沿着X轴平移
translateY（） 沿着Y轴平移
translateZ（） 沿着Z轴平移    平移元素的百分比是相对于自身
元素开启绝对定位后居中方式： {
    top:0;
    left:0;
    bottom:0;
    right:0;
    margin:50%;}
                              这种只适用于元素的 width 和 height 确定的时候

{
    left:50%;
    top:50%;
    transform:translateX(-50%) translateY(50%);}
                              这种元素的大小不确定的时候也适用
rotateX(45deg):沿着X轴旋转45度
rotateY(.5turn):沿着Y轴旋转半圈
rotateZ():沿着Z轴旋转
perspective：视距   设置z轴的变形时都最好设置视距  效果才会明显
backface-visiblity: 设置背面是否显示
transform-style：preserve-3d；  设置3d效果
scaleX()  水平方向缩放
scaleY()  垂直方向缩放
scale()   双反向缩放   加overflow：hidden  子元素放大后就不会从父元素里出来了
transform-origin：变形的原点  默认值是center center
flex：弹性盒(老版本的浏览器不支持  移动端支持)   
css3中为了解决浮动带来的影响新加入的属性  主要用来页面布局 让元素可以根据页面的改变而改变
弹性盒子用法:  display:flex               块级弹性容器
                       display:inline-flex            行内弹性容器
弹性元素的子元素是弹性元素(弹性项)，一个元素可以同时是弹性容器和弹性元素
flex-direction:
               row-reverse        水平排列（自右向左）
               colum              纵向排列（自上向下）
               colum-reverse      纵向排列（自下向上）
               row           弹性元素在容器中水平排列（自左向右）
主轴：弹性元素的排列方向称为主轴
侧轴：与主轴垂直的
flex-grow:
          1          代表铺满父元素 
          n          值越大伸展的越大
          0          flex-grow表示弹性元素的伸展系数   0是默认值  不伸展
flex-shrink：1          收缩系数    1是默认值   0代表不收缩   缩减多少是根据缩减系数和元素大小来计算的
flex-wrap:
          wrap       元素沿辅轴方向自动换行
          wrap-reverse    沿着辅轴反方向换行
          nowrap   默认值  元素不会自动换行
flex-flow：wrap和direction的简写属性
justify-content:
                flex-end              沿着终边排列
                center                居中排列
                space-around          空白元素分布到每一个元素的两侧
                space-evenly          空白分布到元素的单侧（）兼容性不好
                space-between         空白均匀分布到元素
                flex-start          justify-content表示如何分配主轴上的空白空间    start表示元素沿着主轴起始位置排列
align-items:元素在辅轴上如何对齐   可选值：
                                         flex-start    元素不会拉伸  沿着辅轴起边对齐
                                         flex-end        沿着辅轴终边对齐
                                         center  居中对齐
                                         baseline    基线对齐（用的少）
                                         strecth   默认值   将元素的长度设为相同的值
弹性盒子垂直水平居中方式：justify-content：center；
                        align-items：center；
align-content：   辅轴上空白空间的分布   可选值和justify-content一样
align-self  用来覆盖当前弹性元素的align-items
flex-basis    指定的是元素主轴上的基础长度  如果主轴是横向的 则该值指定的是元素的宽度   
              如果是纵向  则是高度  默认值是auto  参考元素自身的高度和宽度
flex简写   flex：inital        inital：0  1  auto         增长  缩减   基础长度
                 auto            auto：1  1  auto 
                 none             none：0  0  auto
order   指定弹性元素的排列顺序 可选值：1  2  3 ...n
在前端开发中像素分为：css像素和物理像素
物理像素：例如1920*1080
css像素：例如width：100px
默认情况下一个css像素等于一个物理像素
默认情况下 移动端的网页都会将视口设置为980像素（css像素） 以确保pc端网页可以在移动端正常访问  
如果网页的宽度超过了980 移动端的浏览器会对网页自动缩放以完整显示网页
响应式布局：网页可以根据不同的设备或窗口大小呈现不同的效果   响应式布局的关键是媒体查询
媒体查询语法：@media 查询规则{}  
媒体类型：
         print  打印设备
         screen  带屏幕的设备   
         speech  屏幕阅读器
         all  所有设备
        例如   @media print,screen{ }
               @media only screen{ }      only 主要是为了兼容老版本的浏览器
@media (min-width:500px）{ }    视口大于500px的时候样式生效
样式切换的分界点称为断点
常用的断点：  
             大于768px  小屏幕   min-width：768px
             大于992px  中型屏幕  min-width：992px
             大于1200px  大屏幕   min-width：1200px
             小于768px  超小屏幕   max-width：768px
             例如  @media (min-width:500px),(max-width:300px){ }   或者大于500px  或者小于300px时 样式生效
                  @media (min-width:500px) and (max-width:700px){ }   在500px和700px之间时样式生效
最保险的常用写法：@media only and (min-width:500px) and (max-width:700px){ }