菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 202211118 孙科 [打印本页]

---

作者: Sunke丶    时间: 2022-11-19 01:00
标题: 202211118 孙科

• 定位的组成
  
  • 定位=定位模式 + 边偏移
    
  • 定位模式指的是一个元素在文档中的定位方式，边偏移决定了该元素的最终位置
    
• 定位模式
  
  • static：静态定位
    
  • relative：相对定位
    
  • absolute：绝对定位
    
  • fixed：固定定位
    
• 静态定位static
  
  • 静态定位是元素的默认定位方式，也就是没有定位的意思。
    
    • 静态定位是按照标准流的特性来摆放盒子的，没有边偏移
      
  • 例
    
• 相对定位relative
  
  • 相对定位的例子
    
  • 特点：
    
    • 1、它是相对于自己原来的位置进行移动的
      
    • 2、原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式来对待它（相对定位不脱标）
      
• 绝对定位absolute
  
  • 概念：
    
    • 绝对定位是元素在移动的时候，是相对于它的祖先元素来说。
      
    • 例
      
  • 绝对定位的特点
    
    • 如果祖先元素没有定位、就以浏览器为标准进行定位，
      
    • 如果祖先元素有定位，就以有定位最近的一级祖先元素为标准
      
    • 绝对定位不会再占有原来的位置（脱离标准流）
      
  • 子绝父相
    
    • 如果儿子是绝对定位，那么父亲就用相对定位来限制儿子的边偏移的边界。
      
    • 例
      
• 固定定位 fixed
  
  • 概念：
    
    • 固定定位是元素固定于浏览器可视区域的位置
      
  • 特点：
    
    • 1、以浏览器的可视窗口为参展点进行偏移，跟父元素没有关系
      
    • 2、固定定位不再占有原来的位置（脱标）
      
  • 例
    
• 定位总结
  
  • 
    
• 定位的叠放次序
  
  • 在使用定位的时候会出现盒子重叠的情况，需要使用z-index来控制盒子的前后次序
    
  • 注意点：
    
    • 数值可以是正整数、负整数或者0，默认值是auto，数值越大，盒子越靠上
      
    • 如果属性值相同，按照书写的顺序，后来者居上
      
    • 数字后面不可以加单位
      
    • 只有定位的盒子才有z-index属性
      
  • 例
    
• 定位拓展
  
  • 1、绝对定位的盒子居中问题
    
    • 加了绝对定位的盒子不能通过margin: 0 auto;进行水平居中，但是可以通过计算的方式实现水平和垂直居中
      
    • 水平居中的方法
      
      • 先将左边偏移50%
        
      • 使用margin-left 让盒子往左偏移自己宽的一半
        
    • 例
      
  • 2、不论是什么元素，使用固定定位或者绝对定位之后都可以直接设置宽高
    
  • 3、脱标的盒子不会触发外边距塌陷的问题
    
  • 4、固定定位和绝对定位都会完全压住下面的盒子
    

---

欢迎光临 菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)

Powered by Discuz! X3.4