9. 定位流

1.css书写方式

书写优先级(同等优先级): !important > 行内 > 外链 = 内嵌
选择器优先级： !important > 行内样式> ID选择器 > 类选择器 > 标签 > 通配符（*） > 继承 > 浏览器默认属性

    //行内  
    <p style="color:red;">样式写在标签的开始标签里</p>
    //内嵌  
     <style> p{color:red;}</style> //样式直接style标签里
    //外链  
    <link rel="stylesheet" href="css/index.css" />  //先加载css样式, 再渲染网页结构
    // 导入 
    <style> @import "css/index.css";</style>  //先显示网页结构, 再加载样式(css2.1推出的 有兼容问题)

2.定位流-定位流分类

相对定位position:relative;
- 相对定位不会脱离标准流, 会继续在标准流中占用自己的空间
  - 所以当给相对定位元素设置margin或padding属性会影响到标准流布局
- 同一个方向上(left / right / top / bottom)只能设置一个属性
- 相对定位是区分块级元素 / 行内元素 / 行内块级元素
- 应用: 元素微调 / 配合绝对定位使用
绝对定位position:absolute;
- 绝对定位会脱离标准流, 不会占用标准流中的空间
- 绝对定位不区分块级 / 行内 / 行内块级元素
  - 默认所有绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点
  - 如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流(绝对定位 / 相对定位 / 固定定位), 那么这个绝对定位的元素就会以定位流的那个祖先元素为参考点
    - 绝对定位是以网页可视区域(首屏 / 没有滚动前)作为参考点
    - 只要是这个绝对定位的祖先元素都可以
    - 定位流中只有静态定位不行
  - 如果一个绝对定位有多个祖先元素, 并且祖先元素有多个定位流, 这个绝对定位会以最近的有定位的祖先元素作为参考点
    - 绝对定位会忽略父元素的padding
- 注意点: 后定位的会覆盖前面的元素
子绝父相 //顾名思义:在父元素使用相对定位下, 子元素使用绝对定位
- 相对定位不会脱离文档流, 也就是说会占据文档流中的空间, 不利于网页布局
- 绝对定位默认情况下以body作为参考点, 如果网页的宽高发生变化(缩放网页时), 布局会发生错乱
- 子元素绝对定位, 父元素相对定位
- 只要父元素宽高不发生改变,那么子元素定位就不会发生变动
- 可以利用百分比让子元素居中显示
注意点: 后定位的会覆盖前面的元素
固定定位position:fixed;
- 固定定位只相对于body定位
- 固定定位脱离标准流, 不区分块级 / 行内 / 行内块级
- 固定定位可以让某元素不随滚动条滚动而滚动
静态定位/标准流默认

3.标签的伪类选择器

a标签的状态
- :link 默认状态-未被访问过/默认蓝色
- :visited 被访问过的状态/默认紫色
- :hover 鼠标悬浮的状态
- :active 鼠标长按状态/默认红色
注意点
- a标签的伪类选择器可以单独出现
- 它也可以一起出现, 但须遵循爱恨原则的出现顺序-love hate(l-v-h-a)

4.过渡模块transition: property duration timimg-function delay;

三要素:

有属性变化
哪个属性需要执行过渡

执行过渡持续时长

  div{width:100px; height:100px; background:green; transition:all 1s;}  //执行属性 过渡时长
  div:hover{width:300px;}  //属性变化

transition-property 过渡效果的CSS属性名称. 取值: all / none / property
transition-duration 过渡效果需要多少秒或毫秒
transition-timing-funtion 可省略. 规定效果的速度曲线. 取值如下:
- ease 默认值. 慢速开始-然后变快-然后慢速结束的过渡效果
- ease-in 慢速开始的过渡效果
- ease-out 慢速结束的过渡效果
- ease-in-out 规定以慢速开始和结束的过渡效果
- linear 以相同的速度开始至结束过渡效果
transition-delay 可省略. 定义过渡效果何时开始

最后编辑于：2020.10.16 16:37:25