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

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

---

作者: Sunke丶    时间: 2022-11-16 00:18
标题: 20221115 孙科

• CSS的浮动
  
  • 传统网页布局的三种方式（标准流、浮动、定位）
    
    • 标准流（标签按照默认的方式进行排列）
      
      • 块元素会独占一行，从上到下顺序排列
        
      • 行内元素是按照顺序，从左到右依次排列，碰到父元素的边缘就会自动换行
        
    • 浮动
      
      • 为什么需要浮动
        
        • 很多的布局效果用标准流无法完成，浮动可以更好的来控制盒子的位置。
          
      • 浮动的属性
        
        • float
          
          • 值
            
            • none：元素不浮动（默认值）
              
            • left：左浮动
              
            • right：右浮动
              
      • 总结：
        
        • 多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
          
        • 浮动最典型的应用就是让多个块级元素一行内排列显示
          
      • 浮动的特性
        
        • 1、浮动的元素会脱离标准流
          
        • 2、浮动的元素会一行内显示并且沿元素顶部对齐，相邻的元素之间没有空白间隙，如果超过父级宽度会自动换行显示
          
        • 3、浮动的元素具有行内块元素的特性
          
        • 4、浮动研发之初就是为了实现文字环绕的，所以浮动的盒子并不会压住标准流盒子里面的文字
          
      • 浮动布局的注意点
        
        • 1、先用标准流父元素进行上下排列，内部的子元素采用浮动排列左右的位置。
          
        • 2、理论上来说，当一个元素浮动了，那么它的兄弟元素也要跟着浮动。
          
        • 3、浮动只会影响后面的标准流，不会影响前面的标准流。
          
    • 清除浮动
      
      • 为什么要清除浮动
        
        • 由于父盒子在一些情况下不方便给高度，但是子盒子浮动又不占位置，所以父盒子的高度就会变成0，会影响后面的标准流盒子
          
      • 清除浮动的方法
        
        • 1、额外标签法
          
          • 也叫做隔墙法，是W3C推荐的做法
            
          • 注意点：
            
            • 要求最后的这个新的空标签必须是块级元素
              
          • 优点：
            
            • 通俗易懂、书写方便
              
          • 缺点：
            
            • 会添加很多没有意义的标签，结构化较差。
              
        • 2、给父级添加overflow:hidden;
          
          • 例
            
        • 3、父级添加after伪元素
          
          • 例
            
        • 4、给父级添加双伪元素
          
          • 例
            
• CSS的定位
  
  • 定位的组成
    
    • 定位=定位模式 + 边偏移
      
    • 定位模式指的是一个元素在文档中的定位方式，边偏移决定了该元素的最终位置
      
  • 定位模式
    
    • static：静态定位
      
    • relative：相对定位
      
    • absolute：绝对定位
      
    • fixed：固定定位
      
  • 静态定位static
    
    • 静态定位是元素的默认定位方式，也就是没有定位的意思。
      
      • 静态定位是按照标准流的特性来摆放盒子的，没有边偏移
        
    • 例
      
  • 相对定位relative
    
    • 相对定位的例子
      
    • 特点：
      
      • 1、它是相对于自己原来的位置进行移动的
        
      • 2、原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式来对待它（相对定位不脱标）
        
  • 绝对定位absolute
    
    • 概念：
      
      • 绝对定位是元素在移动的时候，是相对于它的祖先元素来说。
        
      • 例
        
    • 绝对定位的特点
      
      • 如果祖先元素没有定位、就以浏览器为标准进行定位，
        
      • 如果祖先元素有定位，就以有定位最近的一级祖先元素为标准
        
      • 绝对定位不会再占有原来的位置（脱离标准流）
        
    • 子绝父相
      
      • 如果儿子是绝对定位，那么父亲就用相对定位来限制儿子的边偏移的边界。
        
      • 例
        
  • 固定定位 fixed
    
    • 概念：
      
      • 固定定位是元素固定于浏览器可视区域的位置
        
    • 特点：
      
      • 1、以浏览器的可视窗口为参展点进行偏移，跟父元素没有关系
        
      • 2、固定定位不再占有原来的位置（脱标）
        
    • 例
      
  • 定位总结
    
    • 
      
  • 定位的叠放次序
    
    • 在使用定位的时候会出现盒子重叠的情况，需要使用z-index来控制盒子的前后次序
      
    • 注意点：
      
      • 数值可以是正整数、负整数或者0，默认值是auto，数值越大，盒子越靠上
        
      • 如果属性值相同，按照书写的顺序，后来者居上
        
      • 数字后面不可以加单位
        
      • 只有定位的盒子才有z-index属性
        
    • 例
      

---

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

Powered by Discuz! X3.4