前端笔记—第5篇CSS基础知识3

定位流

• 定位流的分类：

  • 相对定位：

    • 什么是相对定位：指相对于自己以前在标准流中的位置发生变化
    • 相对定位注意点：
      • 相对定位是不会脱离脱离标准流，会继续在标准流里面占用一份空间
        
      • 在相对定位中同一个方向上的定位属性只能使用一个,也就是说使用了left属性就不要使用right，使用了top属性就在不要使用bottom属性
      • 由于相对定位是不脱离标准流的，所以在相对定位中是区分块级元素\行内元素\行内块级元素的
      • 由于相对定位是不脱离标准流的，并且相对定位的元素会占用标准流中的位置，所以当给相对定位的元素设置margin padding属性时，会影响在标准流中的布局的
    • 相对定位流的应用场景：
      • 用于对元素进行微调
      • 配合后面学习的绝对定位流来使用，因为单独使用的意义是不大的

    格式
    .box1{
       position:relative;//给需要设置样式的盒子设置即可
       left:50px;
       right:30px; 
    }
    "box1">
    复制代码

  • 绝对定位

    • 绝对定位的参考点：默认情况下都是以body作为参考点，其实以网页首屏作为参考点的，而不是整个网页的宽度和高度作为参考点
    • 注意点：
      • 如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，那么这个绝对定位的元素就以绝对定位的祖先元素为参考点
      • 如果多个祖先元素都是绝对定位流，那绝对定位的元素会根据他最近的一个祖先元素定位的
      • 一个绝对定位的元素会忽略祖先元素的padding属性
    • 在开发中我们用的最多的就是子绝父相的定位方式

  • 固定定位

    • 什么是固定定位：固定定位和前面学习的背景的关联方是很像，背景定位可以让背景图片不随着滚动条的滚动而滚动，而固定定位可以让某个盒子不随着滚动条的滚动而滚动
    • 固定定位的元素也是会脱离标准流的，不区分行内块级元素
    • 做导航条的穿透效果的时候，广告的展示，网页底部放回顶部的按钮都用到了固定定位
    • IE6不支持固定定位
    • z-index属性：默认情况下所有的元素都有一个默认的z-index属性，取值是0.
    • z-index属性的作用就是专门用来控制定位流元素的覆盖关系的
    • 默认情况下定位元素会盖住标准的元素
    • .默认情况下定位流元素后面编写的会盖住前面编写的
    • 如果定位流的元素设置了z-index属性谁的值大谁显示在最上面
    • z-index属性的注意点：
      • 从父现象：如果两个元素的父元素都设置了z-index属性，那么谁的z-index属性大，谁就显示在最上面
      • 如果两个父元素都设置了z-index属性，那么子元素的z-index属性就是失效

a标签的伪类选择器

• 通过我们的观察，a标签存在一定的状态：默认状态、 被访问过的状态、鼠标长按的状态、鼠标悬停在a标签上的状态
• 什么是a标签的伪类选择器：就是专门用来修改a标签的样式的
  • :link修改从未访问过的颜色
  • :visited修改被访问过的颜色
  • :active 修改鼠标长按状态下的样式
  • :hover 修改鼠标悬停在a标签上的样式
• 注意点：
  • a标签的伪类选择器可以单独出现也可以一起出现
  • a标签的伪类选择器如果一起出现时那么有严格的原则爱恨原则 love hate
  • 如果默认状态的样式和被访问的样式一样，那样就可以进行缩写
  • a标签的伪类选择器：遵循爱恨原则
  • 在开发中我们最好将伪类选择器写在a标签的下面

过渡模块

• 过渡模块的三要素：
  • 必须要有属性发生变化：告诉系统那个属性是变化的属性
  • 必须要有过渡属性：告诉系统那个属性需要过渡效果
  • 必须要有过渡时长：告诉系统过渡所需要几秒钟事件

transition-property:background,width;//过渡的属性是background和width注意中间是逗号隔开
trnasition-duration:3s,3s;//告诉系统过渡需要的时长(durantion持续时间)
transition-delay:0.5s;//告诉系统过渡延迟几毫秒
transition:过渡的属性,过渡时间,运动速度,延迟时间;//后面两个属性是可以省略的
transition:width 5s linear 0s, background-color 5s linear 0s,height 5s linear 0s;//过个属性的连写方式
复制代码

• 编写过渡的一般方法：
  • 不要管过渡，先编写基本界面
  • 修改我们认为需要修改的属性
  • 再回过头给被修改的属性的那个元素添加过渡即可

2D转换

• 基本用法

transform:rotate(45deg);//表示顺时针旋转45deg
transform: translate(100px,0px);//第一个参数决定水平方向的平移，第二个参数决定垂直方向
transform:scale(1.5,1);//第一个参数水平方向，第二个参数垂直方向，取值为1就是默认情况，大于1的值放大，小于一个值缩小，如果水平垂直缩放一样，设置一个参数就可以了
//2D过渡模块的连写模式，注意中间是空格隔开
 transform:rotate(45deg) translate(100px,0px) scale(1.5,1.5) ;
复制代码

• 2D转换模块—形变中心点
  • 默认情况下元素都是以自己的中心点进行旋转的，我们可以通过改变形变中心点来改变旋转的中线点。就是通过：transform-origin:;控制的，取值可以是 具体像素、百分比、关键字（如：left right）
  • 说白了transform-origin:;就是为了控制形变中心点位置的属性
  • 未使用transform-origin:;的效果
  • 使用了transform-origin:200px,0;后的效果
  • 使用了transform-origin:50% 0;后的效果
  • 使用了transform-origin:left, top;后的效果

旋转轴线

• 默认情况下所有的元素都是围绕Z轴旋转的 transform:rotate(45deg);
• 围绕X轴旋转 transform:rotateX(45deg);
• 围绕Y轴旋转 transform:rotateY(45deg);

• 透视属性：perspective: 500px;注意点：透视属性必须添加到呈现近大远小效果的父级元素

盒子阴影和文字阴影

• 给盒子添加阴影
  • 给盒子添加阴影：box-shadow:水平偏移,垂直偏移,模糊度,阴影扩展,阴影颜色;
  • 注意点：添加了阴影扩展后，就会使盒子添加的阴影边缘不会显得非常的生硬，增加体验效果
  • 如果不设置阴影的颜色，默认情况下阴影的颜色是由盒子内部文字的颜色决定的，如果盒子内没有文字，这是默认就显示黑色的阴影
  • 盒子的阴影分为内外阴影，默认就是外阴影
  • 快速添加阴影只需要添加三个属性：水平偏移 垂直偏移 模糊度（颜色默认和文字一样）
• 给文字添加阴影
  • text-shadow:水平偏移 垂直偏移 模糊度 阴影颜色;
  • IE 9及更早版本的浏览器不支持 text-shadow

动画模块

• 动画模块和过渡模块的区别：
  • 不同点：
    • 过渡动画：需要人为去触发它
    • 动画模块：不需要人为去触发
  • 相同点：
    • 过渡和动画都需要给元素添加动画的
    • 过渡和动画都是系统新增的一些属性
    • 过渡和动画都需要满足三要素才会有动画效果
• 动画模块的基本用法

animation-name:abcd;//告诉系统要执行动画的名字
animation-duration:3s;//告诉动画执行持续的时间
animation-delay:2s;//告诉系统延迟几秒执行
animation-timing-function:linear;//告诉系统动画执行的速度
animation-iteration-count: 5;//告诉系统动画执行的次数
animation-direction: alternate;//告诉系统是否需要执行往返动画,取值为：normal  alternate
animation-play-state:paused;//告诉系统动画是否需要暂停
animation-fill-mode: both;//告诉系统动画结束和开始等待转态的样式
//取值：none不做任何处理  forwards 让元素结束状态的时候显示动画最后一帧的样式  
//backwards  让元素等待状态的时候显示动画第一帧的样式    //both让元素等待状态显示动画第一帧的样式，结束状态显示最后一帧的样式
//动画的连写格式
animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画;
animation:abcd 3s linear 0.5s 5 normal;
 

@keyframes abcd{//创建需要执行的动画
    from{
        margin-left:0px;
    }
    to{
        margin-left:80px;
    }
}
//第二种创建动画的方式,以百分号的形式创建
@keyframes abcd{
    0%{
        
    }
    25%{
        
    }
    50%{
        
    }
    75%{
        
    }
    100%{
        
    }
}
复制代码

3D转换模块

• 什么是2D:只有宽度和高度，没有厚度
• 什么是3D:有宽度 高度 和厚度，默认情况下是2D的元素
• 如何让某个元素展现3D效果，和透视属性一样，只需要给他的父元素添加一个transform-style即可transform-style: preserve-3d;

背景尺寸属性&背景定位区域属性

• 什么是背景尺寸属性：背景尺寸属性是css3中新增的一个属性，专门用来设置背景图片的大小

background-size:100px 100px;//背景尺寸的大小可以是具体的像素单位
background-size:50% 80%;//背景尺寸的大小可以是百分比的形式
background-size:auto 80%;//高度系统宽度自动拉伸
background-size:cove;告诉系统背景图片需要等比拉伸，而且告诉系统宽度和高度需要填满整个元素
background-size:contain;告诉系统图片需要等比拉伸,只要宽度或者高度填满元素即可
复制代码

• 背景图片背景区域定位属性
• 背景图片的区域定位就是指：高度背景图片背景图片是从什么位置开始显示，默认情况下是从padding区域开始显示的

background-origin:padding-box;//默认，padding区域开始
background-origin:border-box;//边框区域开始
background-origin:content-box;//内容区域开始
复制代码

• 多重背景图片
• 先添加的背景图片是会覆盖住后添加的，中间使用逗号隔开，建议是分开一个一个写

CSS的书写格式

• 第一种数书写格式：行内样式
  我是一个div
• 第二种书写格式：在head标签中书写，内嵌样式
• 第三种书写样式:单独创建一个.css的文件，把css代码写在这个文件当中，然后通过link标签把这个文件和.HTML文件关联起来 外联样式
• 第四种书写样式：导入样式通过@import './../css/index.css'的方式
• 注意点：外联样式显示界面的时候，会先加载css样式，再加载结构，所以用户看到界面时一定已经设置了样式，导入样式在显示界面的时候，会先加载结构再加载样式，所以用户看到界面的时候不一定已经设置了样式，用户体验不好，导入样式在vue.js中通过webpack工程化创建项目的时候用的是比较多的

转载于:https://juejin.im/post/5c81e7185188257e252a2b3f