CSS入门篇基础总结（四）

固定定位与粘滞定位

固定定位
当元素的position属性设置fixed时，则开启了元素的固定定位

  （1）用于固定在浏览器页面上，不随浏览器的滚动而改变位置；

  （2）以浏览器为参照物，和父元素没有任何关系；

　（3）固定定位不占有原来的位置，即脱离标准流 ，更改元素的性质

  (4)应用场景

        - 固定导航

        - 固定侧边栏

        - 广告  

粘滞定位
 粘滞定位 （一般用于页面导航的吸顶效果)

    -当元素的position属性设置为sticky时，则开启了元素的粘滞定位

    （1）以浏览器为参照物（体现固定定位特点）；

    （2）占有原来位置（体现相对定位特点）,不会脱离文档流，元素性质也不会发生变化；

　　 （3）粘滞定位可以在元素到达某个位置时，将其固定

     (4)配合top值设置，没有达到top值之前正常显示，随着滚动条滚动而滚动，

        达到top值之后类似于固定定位，不会跟随滚动条滚动而滚动
 

层级与透明效果

层级：
z-index  设置元素的层级  

            后面跟正整数，数值越大，层级越高

            注意：

             1、 z-index属性必须要开启定位的前提下使用

             2、设置z-index，父元素的层级再高也不会高于子元素

透明度：
 设置透明度第一种方式，rgba 

  设置透明第二种方式： opacity: ;0-1 

  设置透明的第三种方式background-color: transparent;

设置透明有几种方式？能说一说他们之间的区别？

    1、opacity是属性，rgba、transparent是属性值

    2、rgba、transparent是属性值，他必须要跟在特定的属性后，

        例如 background-color、color、border-color等

    3、opacity是属性，它有继承性,给祖先元素设置，会继承给它的后代元素

         相当于在元素前面放一层玻璃，整个元素都是朦朦胧胧的

       rgba、transparent是没有继承的，给谁设置，谁就有
 

背景样式（一）

背景样式：
1: background-color  设置背景颜色

2:background-image来设置背景图片

    - 语法：background-image:url(相对路径);

    -可以同时为一个元素指定背景颜色和背景图片，

        这样背景颜色将会作为背景图片的底色

    -图片在元素中的位置

        如果背景图片大于元素，默认会显示图片的左上角

        如果背景图片和元素一样大，则会将背景图片全部显示

        如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素  

3:background-repeat用于设置背景图片的重复方式

 可选值：

    repeat，默认值，背景图片会双方向重复（平铺）

    no-repeat ，背景图片不会重复，有多大就显示多大

    repeat-x， 背景图片沿水平方向重复

    repeat-y，背景图片沿垂直方向重复

4:background-position可以调整背景图片在元素中的位置

    背景图片默认是贴着元素的左上角显示

可选值：

    该属性可以使用 top right left bottom center中的两个值

        来指定一个背景图片的位置

        top left 左上

        bottom right 右下

        如果只给出一个值，则第二个值默认是center

  也可以直接指定两个偏移量，

        第一个值是水平偏移量

            - 如果指定的是一个正值，则图片会向右移动指定的像素

            - 如果指定的是一个负值，则图片会向左移动指定的像素

        第二个是垂直偏移量  

            - 如果指定的是一个正值，则图片会向下移动指定的像素

            - 如果指定的是一个负值，则图片会向上移动指定的像素
 

背景样式（二）

5:background-clip

    设置背景色的范围

      可选值：

          border-box 默认值，背景颜色会出现在边框的下边

          padding-box  背景不会出现在边框，只会出现在内容区和内边距

          content-box  背景只出现在内容区

6:background-origin

    设置背景图片的偏移量计算的原点,配合偏移量使用的

      padding-box  从内部距处开始计算

      content-box  背景图片的偏移量从内容区处计算

      border-box   从边框开始计算偏移量

7:background-size

    设置图片的大小

  参数：

    第一个值：宽度

    第二个值：高度

        如果只写一个，第二值，默认为auto

    cover  图片的比例不变，将元素铺满

    contain 图片比例不变，将图片完整显示
 

雪碧图

雪碧图
一、图片整合技术（CSS-Sprite）

  优点：

    1 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，

    提高访问效率，提高了用户体验。

    2 将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度

二、雪碧图使用步骤

      1:先确定要使用的图标

      2:测量图标的大小

      3:根据测量结果创建一个元素

      4:将雪碧图设置为元素的背景

      5：设置一个偏移量以显示正确的图片

     可以看作是管中窥豹

表单

创建表单关键字：form
    action:表单信息提交的地址

method:表单提交的方式；

可选值：post：将表单数据包含在表单体发送：更安全，所以常用与敏感数据的传送

get：将表单数据随着action提交的路径以？相隔的形式传输，不安全

autocomplete:设置表单内容是否可以自动填充

可选值：

on：默认值；可以自动填充

off：取消自动填充;

自动填充的前提条件：input要有name属性

target：设置跳转页面在哪个页面显示

可选值：_blank:在新页面展示

_self:默认值，在原先页面显示

_parent\_top?今天二选一总结一下效果

novalidate：设置表单不自动验证信息格式是否正确

    input
type:设置类型的

常用的类型：text（文本输入框）、password(密码)、checkbox（复选框）、radio(单选框)、

button（普通的按钮)、submit(提交按钮)、reset（重置按钮）、file（文件）

新添加的类型：

date：设置日期 可以通过value设置初始日期，格式：1988-02-03

color：颜色设置

email:邮箱，提交表单时可以自动验证邮箱格式是否正确-->

    button标签：

    type:button(普通按钮)

    submit（提交按钮）

    reset（重置按钮）

    总结一下：与input设置按钮，button设置更灵活

 标签的属性

1.value：设置一个默认值

2.checked ：设置默认选中

3.disabled:设置不可操作的内容

4.readonly:只读属性

5.placeholder：设置提示词，注意不要和value一起使用

6.required:设置一个必选项

7. minlength/ maxlength:设置文本长度的限制

8.multiple:设置上传文件可以是多个
 

动画与变形

动画：

使用css技术来控制页面元素的css属性的变化

优势：

不需要js也能写，比较流畅，由浏览器去执行动画，减少代码量，性能比较高

过渡：（transtion）同时设置过渡相关的所有熟悉
只有一个要求，两个数值时，第一个是过渡时间，第二个是延迟时间

理解

通过过渡可以指定一个属性发生变化时的切换方式，平滑的过渡
只有两帧
一次性，不能循环
在某种条件下触发，如：hover、active、focus
属性：

Transtion-property：（必填）指定过渡的属性（宽，高，颜色等，用，隔开）

可选值：

None 无效果

All （默认）所有属性都参与过渡

Property 自定义过渡属性，用逗号隔开

注意：

所有数值类型的属性，都可以进行过渡。

从一个有效地的数值向另一个有效地数值过渡

Transtion-duration：（必填）指定过度的时间（s、ms）

Transtion-delay：指定过渡的延迟时间（s、ms）

Transtion-timing-function：指定过渡方式

可选值：

Ease （默认）慢-快-慢

Ease-in 慢--快

Ease-out 快--慢

Ease-in-out 以慢速结束和开始的过渡

Linear 匀速运动

Steps（） 分布执行过渡效果

Cublic-bezier（n，n，n，n）0--1的数值

动画
a设置关键帧 @keyframes

b命名 move

第一种写法：

1设置关键帧

@keyframes move{
Form{
执行前

}

To{
执行后

}

}

2调用关键帧

Animation-nave：（必填）执行动画的名字
Animation-duration：（必填）执行动画的时间
Animatio-delay：动画的延迟时间
Animation-iteration--count：动画的执行次数（infinnte：无限执行）
Animation--timing-function：指定动画的方式
可选值：

Ease （默认）慢-快-慢

Ease-in 慢--快

Ease-out 快--慢

Ease-in-out 以慢速结束和开始的过渡

Linear 匀速运动

Steps（） 分布执行过渡效果

Cublic-bezier（n，n，n，n）0--1的数值

Animation-direction：指定轮流反向播放动画
可选值：

Nomal（默认）

Alternate 设置动画从from向to

Animatio-fill-mode：forwards指定动画结束停留的位置
Animatio-play-state：paused  指定动画暂停
Animation：简写
第二种写法：

1设置关键帧

@keyframes move{
0%{
执行前

}

100%{
执行后

}

}

注意：

帧的顺序可以更改，不管顺序的事；初始帧和结尾帧的值不写，默认是元素额的初始值

可以同时设置关键帧，用逗号隔开

变形2D
变形属性：transform

可选值：

位移：Translate（0，0）

不改变其他元素

位移的参考点是元素的左上角

对行内元素没有效果

旋转：rotate（xxdeg）正顺负逆

默认围绕元素中心点旋转

默认单位deg

缩放：scale（默认1）

倾斜：skew（xxdeg）

变形原点：transform-origin：（center，center）默认值

变形3D
变形属性：transform-style：preserve-3d