前端之css3

css3优势:

        1 新增实用的选择器,例如动态伪类,目标伪类,伪元素

        2 新增更好的视觉效果

        3 新增丰富的背景效果

        4 新增全新的布局方案

        5 新增web字体

        6 新增颜色,hsl,hsla,rgba

        7 新增2D和3D变换

        8 新增动画和过渡效果

css3 私有前缀:

       作用:w3c在浏览器正式支持某个新的属性前,浏览器根据浏览器的内核,使用此前缀测试新属性,正式上线后,不需要加上此前缀

     查询浏览器是否兼容:Can I use... Support tables for HTML5, CSS3, etc

     谷歌,edge,safari浏览器:--webkit--

       firefox浏览器:--moz--

       旧opera浏览器:--o--

       旧Ie浏览器:--ms--

长度单位:

      rem  字体大小倍数

      vw  视口的宽度

      vh  视口的高度

      vmax 宽度或者高度最大值的百分比值

      vmin 宽度或者高度最小值的百分比值

盒子模型:

  box-sizing 设置盒子模型的类型

       取值:

           border-box       宽高设置为盒子大小

          contentent-box   宽高设置为盒子内容区域大小,默认值

   resize    自己调节盒子大小

       必须和overflow搭配使用

       取值:

          horizontal  水平方向调节

          vertioal      垂直方向调节

          both           两个方向都可调节

box-shadow 盒子阴影

        取值:

             1 水平方向 垂直方向

             2 水平方向 垂直方向     阴影颜色

             3 水平方向 垂直方向   阴影模糊程度

             4 水平方向 垂直方向 模糊程度  阴影颜色---常用

             5 水平方向 垂直方向 模糊程度 阴影外延  阴影颜色

             6 水平方向 垂直方向 模糊程度 阴影外延  阴影颜色  内阴影(inset)

opacity 不透明度

    取值:

       0-1   取值范围

       0      完全透明

       1       不透明 

 注意:修改的是整个元素的透明度

背景:

    background-origin  设置背景图的原点

         取值:

           padding-box   默认值,按照内边距

           content-box     按照内容

           border-box       按照边框

  background-clip  设置背景图的向外裁剪区域

         取值:

           border-box       默认值,按照边框

           padding-box   按照内边距

           content-box     按照内容

            text                  背景呈现在文字区域(需要添加前缀)

      background-size  设置背景图大小

            取值:

                 contain  包含

                 cover     等比例缩放

                  auto      默认值

       background 复合属性:

              background:颜色,url,重复,位置/大小,原点,裁剪方式;

         多种背景图片设置:           

 background: url("") no-repeat  left top,
                    url("") no-repeat  right top,
                    url("") no-repeat  left bottom,
                    url("") no-repeat  right top,;

 边框:

       border-radius  边框圆角

         取值:

            像素

             百分比

border-top-left-radius: 10px 5px;
border-top-left-radius: 20px 2px;
border-bottom-left-radius: 10px 30px;
border-bottom-right-radius: 30px 40px;

复合属性:
border-radius: 左上角,右上角,右下角,左下角;

       outline 边框外轮廓

         不计入盒子大小;不占位置;

           取值:

outline-width: 20px;
outline-offset: 30px;
outline-style: solid;
outline-color: red;

复合属性
 outline: width,style,color;

   文本属性:              

      text-shadow:文本阴影

           取值:

              1 水平方向 垂直方向 模糊程度  阴影颜色        

              2 none 默认值,无文本阴影

       white-space:文本换行

          取值:

              pre          按照原文格式显示

             pre-wrap 按照原文格式显示,超出换行

             pre-line    按照原文格式显示,首尾空格不显示

            nowrap     不换行

            normal       超出自动换行,默认值

         text-overflow:文本溢出

               使用时添加overflow:hidde;

             取值:

                  ellipsis 溢出显示省略号

            text-decoration 文本修饰     

               修改为复合属性              

            -webkit-text-stroke 文本描边

                     仅有webkit可以使用

 -webkit-text-stroke:3px  red;

渐变属性:       

       线性渐变:

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

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

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

background-image: linear-gradient(red 50px,yellow 80px,green 100px);

         径向渐变:     

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

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

background-image: radial-gradient(circle,red,yellow,green);
        
background-image: radial-gradient(100px,red,yellow,green);
        
background-image: radial-gradient(red 30px,yellow 60px,green 90px);

        重复渐变:

            前提:在线性渐变或者径向渐变的基础上 ,在纯色区域进行重复渐变

background-image:repeating-radial-gradient(red 30px,yellow 60px,green 90px);

        字体:

             图标库:iconfont-阿里巴巴矢量图标库

//引入字体
@font-face {
   font-family: "ces";
   src: url("");
}

//使用:
font-family: "ces";

//阿里使用
https://www.iconfont.cn/fonts/index?spm=a313x.7781069.1998910419.16

//字体图标
   1 比图片清晰
   2 灵活性好
   3 兼容性好

   变换transform:

         2D变换:

              语法:transform: translate(x,y);

                   位移

                        特点:

                             1 参考自身位置

                             2 不脱离标准文档流

                             3 行内元素使用效果不好

                             4支持链式操作

                             5 综合写法仅仅只写一个值代表X值

                       取值:

                         translateX    x轴位移

                         translateY    y轴位移

                       xy取值:px,%

                        translate(x,y)综合写法

                  缩放:

                           特点:

                             1 行内元素使用效果不好,可以改成行内块使用

                             2 支持链式操作

                             3 综合写法仅仅书写一个值时,代表两个方向

                           取值:

                              scaleX() x轴缩放

                             scaleY()  y轴缩放

                              scale()  综合写法

                  旋转:

                       特点:

                        1 使用之后,xy轴修改

                    取值:

                         rotateZ() 正值顺时针;负值逆时针

                         rotate()  综合写法

               扭曲:

                   特点:

                      1 综合写法仅仅写一个值时,修改是x轴

                    取值:

                        skewX()

                       skewY()

                       skew(x,y)

注意:使用链式操作时,最好把旋转放到最后

     transfrom-origin 修改变换的圆心位置

           影响功能:缩放,旋转

           取值:

                 关键词(只写一个值时,另一个值取中间值)

                  px

     3D变换:

            前提:父元素开启3D空间(transform-style:preserve-3d;)

                                            设置景深(perspective:500px;)

            透视点:

                   含义:父盒子的中心点

                   修改:

                       perspective-origin:30px 30px;

         位移:

                        translateX    x轴位移

                         translateY    y轴位移

                          translateZ    z轴位移

                       xy取值:px,%

                         z取值:px

                        translate3d(x,y,z)综合写法,3值缺一不可

           旋转 :  

                        rotateX() 正值顺时针;负值逆时针

                        rotateY() 正值顺时针;负值逆时针

                         rotate3d(x,y,z,deg)  综合写法

             缩放:

                             scaleX() x轴缩放

                             scaleY()  y轴缩放

                              scaleZ()  Z轴缩放--搭配旋转使用效果更好

                              scale(x,y,z)  综合写法 

      过渡:

//设置需要过渡的元素本身属性
 transition-property: width,height,background-color;
 transition-property: all;  //所有可以过渡的属性进行过渡
//设置过渡的时间
 transition-duration: 1s;
//设置过渡的延迟时间
 transition-delay: 2s;
//设置过渡的样式      
 transition-timing-function:;
  取值:
     ease    平滑过渡,默认值(慢-快-慢) 
     linear  匀速过渡
     ease-in  先慢后快
     ease-out 先快后慢
     ease-in-out 慢-快-慢
     step-start  直达终点,不考虑过渡时间
     step-end    直达终点,考虑时间,没有过渡效果
     steps()     分布过渡
     使用贝塞尔曲线:
         官网:https://cubic-bezier.com/
         例子:cubic-bezier(.17,.67,.83,.67)

//复合属性
transition:duration delay  property timing-function;

   动画:

        

//元素设置动画属性,初始化 
animation-name: yufaname;

//定义动画1
@keyframes  yufaname{
  form{

  }
 to{
 //设置动画名称   
  animation-name: yufaname;
//设置动画持续时间
  animation-duration: 1s;
//设置动画延迟时间
  animation-delay: 1s;
//设置动画的样式
animation-timing-function: ;
   取值:
     ease    平滑过渡,默认值(慢-快-慢) 
     linear  匀速过渡
     ease-in  先慢后快
     ease-out 先快后慢
     ease-in-out 慢-快-慢
     step-start  直达终点,不考虑过渡时间
     step-end    直达终点,考虑时间,没有过渡效果
     steps()     分布过渡
     使用贝塞尔曲线:
         官网:https://cubic-bezier.com/
         例子:cubic-bezier(.17,.67,.83,.67)
//设置动画执行的次数
 animation-iteration-count: 3;
    取值:数字,infinite(无限循环)
//设置动画的方向
animation-direction: ;
 取值:
    normal 默认值
    reverse 反转
    alternate 交替来回播放
    alternate-reverse  交替来回反转
//不发生动画
animation-fill-mode:;
 取值:
   forwards  留在最后一帧
   backwards 返回到第一帧
//动画播放状态
 animation-play-state: ;
  取值:
    paused 停止播放
    running  运行
    
   }
 }

//定义动画2
@keyframes  yufaname{
        0%{

        }
        20%{

        }

         40%{

         }
         60%{

         }
         80%{

         }
         100%{

         }
        
      }

//复合属性
 animation: name duration timing-function delay iteration-count direction fill-mode;

过渡和动画的区别:

     1 动画不需要任何触发条件,过渡必须需要触发条件

     2 动画可以实现内容精细化处理,过渡不行

布局技巧:

    多列布局:

内容区域
//指定页面显示列数
column-count: 4;
//指定每一列的宽度,会自动计算列数
column-width: 200px;
//复合方法--不推荐使用
columns: count width;

//调整列间距
column-gap: 20px;

//每一列边框宽度
column-width: 2px;
//每一列边框颜色
column-rule-color: ;
//每一列边框样式
column-rule-style: ;
//边框的复合属性
column-rule: width style color;

标题
//设置是否横跨
column-span: ;
取值:
  none
   all

      伸缩盒模型(弹性盒子):

          特点:

               1 轻松控制元素分布,元素对齐,元素视觉顺序

               2 兼容性好,除部分ie不支持,其他全部支持

               3 提供新的布局方案flex布局

      语法:

//开启flex布局子元素成为块及化元素
display:flex;  //开启flex布局
display:inline-flex  //开启行内块flex--很少使用

flex-direction: ;//设置主轴方向
 取值:
    row             默认,从左到右
    row-reverse     从右到左
    column          从上到下
    column-reverse  从下到上
flex-wrap: ; //设置主轴换行方式
  取值:
     nowrap        默认,不换行
     wrap          换行
     wrap-reverse  反向换行

//复合属性(设置主轴)---很少使用
flex-flow: direction wrap; 

justify-content:; //设置主轴对齐方式
  取值:
    flex-start  默认值,主轴的起始位置
    flex-end    主轴的结束位置
    center      居中对齐
    space-around均匀分布,元素之间距离是边缘距离的两倍
    space=between均匀分布,元素之间距离是相等的,边缘没有距离
    space-evenly 均匀分布

//设置侧轴对齐方式
一行内容
align-items:; 
 取值:
   flex-start 侧轴起始位置
   flex-end   侧轴结束位置
   center     居中
   baseline   基线对齐
   stretch    默认值,拉伸到整个盒子高度(前提:子盒子没有高度)
多行内容
 align-content: ;
  取值:
   flex-start   侧轴起始位置
   flex-end      侧轴结束位置
   center        居中
   space-around  元素之间距离相等,是边缘的两倍
   space-between 元素之间距离相等,没有边缘
   space-evenly  元素之间距离相等
   stretch       默认值,拉伸到整个盒子高度(前提:子盒子没有高度)




 flex-basis: ;//设置元素在主轴的基准长度,主轴是横向宽失效,    纵向高失效
 取值:
   auto 默认值,自适应
   px
flex-grow //设置子元素的拉伸比例,剩余空间/比例
 取值:
   0 默认值,不拉伸
flex-shrink//设置子元素的缩放比例,
 前提:未设置主轴换行方式
 取值:
   1 默认值

复合属性:
 flex:grow shrink basis;
   取值:auto ===1 1 auto
         1   ===1 1  0
        none ===0 0 auto
        0 auto ===0 1 auto


order //设置子元素的显示顺序
 取值越小,元素顺序越靠前
 取值:
    0   默认值
    负值
align-self //设置子元素在侧轴的单独对齐
 取值:
    auto 默认值

//元素水平垂直居中
1 父元素
display: flex;
align-items:center;
justify-content: center;
2父元素 
display: flex;
子元素
margin:0 auto;

      响应式布局:

           媒体查询:

@media  值{
  
}

取值:
  print   打印/打印预览时样式
  screen  屏幕下使用的样式
  all     检测所有设备
  (width:800px) 视口为800时的样式 //例子
    取值:
    (device-width:1920) 设备宽度-宽度
 运算符:
   and     且
   ,/or   或
   not     否定
   only    肯定,处理ie浏览器兼容
   

calc动态设置宽高:

 width: calc(100% - 100px);

注意:
  使用时需要添加一个空格分开

BFC: 

  含义: 块及格式上下文,可以理解为元素的特异功能   

   默认是关闭状态,需要一定条件开启  

  作用:

         1 子元素不会产生margin塌陷问题

         2 自己不会被其他元素覆盖

         3子元素浮动,元素自身高度不会塌陷

开启:

//设置根元素,浮动元素,绝对/固定定位,行内块,表格单元格,overflow不等于visible,多列布局,flex,colum:all,display:flow-root;--效果最好;ie不支持

你可能感兴趣的:(前端学习笔记们,前端,css3,javascript)