9. 定位流

1.css书写方式

• 书写优先级(同等优先级): !important > 行内 > 外链 = 内嵌

  //行内  
  样式写在标签的开始标签里
  //内嵌  
    //样式直接style标签里
  //外链  
    //先加载css样式, 再渲染网页结构
  // 导入 
    //先显示网页结构, 再加载样式(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 可省略. 定义过渡效果何时开始