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

标题: css浮动和定位知识_汪刚_2023.04.18 [打印本页]

---

作者: 霁后彩虹O    时间: 2023-4-19 00:24
标题: css浮动和定位知识_汪刚_2023.04.18
今日所学内容：

• 1.CSS的浮动
• 传统网页布局的方式
• 标准流
  
  • 所以的标准流就是标签按照规定好默认方式进行排列
  • 块元素单独占一行，行内元素和行内块元素可以一行显示多个。
  • 浮动
  • 浮动的属性 float
  • 属性值
  • right 右浮动
  • left 左浮动
  • none（默认值，没有浮动）
    
  
  
  • 
    
    • 为什么需要浮动
      
      • 有很多布局方式使用标准流无法完成，但是浮动可以解决，浮动可以改变元素默认的排列方式。
        
      • 网页布局准则：多个块元素纵向排列找标准流，多个元素要横向排列找浮动。
        
    • 浮动的特性
      
      • 浮动的盒子具有行内块元素的特点（一行可以显示多个，可以设置宽高）
        
      • 浮动的元素会脱离标准流（脱标）
        
        • 浮动的盒子不再占有原来标准流的位置
          
      • 浮动的盒子无法压住图片和文字
        
      • 网页布局的方式
        
        • 先用标准流的盒子进行上下排列，内部的子元素采用浮动的方式进行左右排列。
          
        • 浮动的元素只会影响后面的标准流，对前面的标准流没有影响
          
        • 理论上来说，只要一个盒子浮动了，那么其他的兄弟元素也需要浮动。
          
    • 清除浮动
      
      • 为什么要清除浮动
        
        • 由于父盒子在很多情况下不方便给高度，但是子盒子浮动起来又不占位置，最后父元素的高度会变成0，会影响后面的标准流。
          
      • 清除浮动的方法
      • 1、额外标签法
      • 额外标签法会在浮动的元素末尾添加一个空标签，要求这个标签必须是块级元素
      •   优点：书写简单
      • 缺点：会添加很多没有意义的标签，结构比较差
      • 2、给父级添加overflow:hidden;
      • 3、给父级添加单伪元素
        
        • 4、给父级添加双伪元素
          

• 2.CSS的定位
  
  • 为什么需要定位
    
    • 浮动是可以让多个盒子在一行上个没有缝隙的排列
      
    • 定位可以让盒子自由的在某个盒子内部进行位置移动，或者固定在屏幕中的某个位置，并且它可以压住其他盒子。
      
  • 定位的组成
    
    • 定位 = 定位的模式 + 边偏移
      
      • 定位模式：就是来指定这个元素在html文档中的定位方式，指定定位模式的属性是position
        
        • static（静态定位）
          
          • 静态定位其实就是元素的默认定位方式，也就是无定位（标准流）
            
          • 语法：
          • 选择器 {position:static;}
            
          • 注意点：静态定位没有边偏移，基本不用。
            
      
      
      • relative （相对定位）
        
        • 相对定位是元素在移动位置的时候，是相对于他自己原来的位置来说的。
          
        • 选择器 {position:relative;}
          
        • 特点
        • 它是相对于自己原来的位置进行移动的
          
          • 原来在标准流的位置继续占有，后面的盒子还是按照标准流去对待它（没有脱标）
            
      
      
      • absolute（绝对定位）
        
        • 绝对定位是元素在移动的时候参照它的祖先元素来说的
          
      
      
      
      
      • 语法
        
        • 选择器 {position:absolute;}
          
      
      
      • 特点
        
        • 1、如果祖先元素没有定位，那么就以浏览器为标准进行偏移
          
        • 2、如果没有祖先元素，那么就以浏览器为标准进行偏移
          
        • 3、如果祖先元素有定位（相对、绝对、固定）, 则以最近的一级有定位的父级元素为标准进行边偏移。
          
      
      
      • 4、绝对定位的盒子不再占有原来的位置（脱标）
        
      
      
      • 5、子绝父相，子元素是绝对定位，父元素就是相对定位（相对定位更多是为了限制绝对定位的子盒子在父元素内部）
        
      
      
      • fixed（固定定位）
        
        • 固定定位是元素固定于浏览器的可视区域的位置
          
      
      
      • 语法
        
        • 选择器 {position:fixed}
          
      • 特点
        
        • 1、以浏览器的可视窗口为参照点移动元素位置
          
      
      
      • 2、不随滚动条滚动，而且和它的父元素没有关系
        
      
      
      • 3、固定定位的盒子不再占有原先的位置（脱标的）
        
    
    
    • 边偏移：决定该元素的具体的偏移量，以及最终的位置。
    • left 距离左侧的偏移量、right 距离右侧的偏移量、top 距离顶部的偏移量、bottom 距离底部的偏移量
      

今日遇到问题：无
解决问题的方法：无

---

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

Powered by Discuz! X3.4