20221018-陈紫怡-CSS

一、今日学习内容：

• 元素的显示和隐藏
  
  • display显示与隐藏
    
    • 属性值：
      
      • none隐藏对象
        
      • block显示对象（元素）
        
    • display隐藏元素之后不占有原来的位置，后期经常与js连用
      
  • visibility显示与隐藏
    
    • visibility属性用于制定一个原色的显示与隐藏
      
      • 属性：
        
        • visible元素可见
          
        • hidden元素隐藏
          
      • 使用visibility：hidden；来隐藏元素时，元素仍然占有原来位置
        
  • overflow溢出显示与隐藏
    
    • overflow: visible; 不剪切内容也不添加滚动条
      
    • overflow: hidden; 将超出盒子的内容隐藏掉
      
    • overflow: scroll; 不管盒子里面的内容有没有超过父盒子的高度，都显示滚动条
      
    • overflow: auto; 超过盒子的高度显示滚动条，不超出则不显示
      
• CSS其他技巧
  
  • 精灵图
    
    • 为什么要用精灵图
      
      • 将多张小的图片，整合到一张大的图片返回给浏览器， 避免重复请求，减轻服务器压力
        
    • 使用步骤
      
      • 1.获取所需要的小图标大小
        
      • 2.设置一个盒子来访需要的小图标，尺寸和所需小图标大小一致
        
      • 3.background-image：url（）；将背景图片引入盒子
        
      • 4.利用background-p来调整背景图片的位置，以显示我们所需的图标，注意，x轴h和y轴的像素值一般都是负值，最大是0
        
  • 鼠标样式
    
    • 属性及样式
      
  • 对齐方式
    
    • 文字各个线说明
      
      • vertical-align：baseline；基线对齐（默认）
        
      • vertical-align：bottom；底线对齐
        
      • vertical-align：middle；中线对齐
        
      • vertical-align：top；顶线对齐
        
    • 备注：
      
      • 图片底部有空白的原因：图片默认是和文字基线对齐，所以下方的空白是给文字底部预留的空间
        
      • 想让图片与文字沿中线对齐，可以直接使用vertical-align：middle；来实现
        
  • 输入框删除外框
    
    • 代码 outline:none;
      
  • 文本域取消拖拽
    
    • 代码 resize:none;
      
  • CSS省略号的制作
    
    • 步骤
      
      • 1、将文字强制一行显示
        
      • 2、将超出盒子的文字给切掉
        
      • 3、将切掉的文字用省略号来代替
        
  • CSS三角制作
    
    • 制作三角的步骤
      
      • 1、设置边框的宽度，样式，颜色设置为透明
        
      • 2、将所需要的边框的颜色设置为所需的颜色即可
        
  • CSS滑动门制作
    
    • 步骤：
      
      • 1.a标签来实现精灵图的左边
        
      • 2.span标签来实现精灵图的右边
        
      • 3.指定padding来撑开盒子即可
        

• 定位
  
  • 为什么需要定位
    
    • 滚动屏幕时，定位可以将盒子固定在屏幕的某位置
      
    • 某元素可以自由的在盒子内移动位置，并且会压住盒子
      
  • 使用
    
    • 定位=定位模式+边偏移
      
      • 定位模式用于指定一个元素在盒子内的定位方式，边偏移决定了元素的最终位置
        
  • 常用定位模式
    
    • position：static；（静态定位）
      
      • （默认）无定位，无边偏移
        
    • position：relative（相对定位）
      
      • 特点：
        
        • 相对于自己原来位置来进行移动（参照点-->自己原位置）
          
        • 原来位置标准流位置继续占有，后面盒子仍然以标准流的方式来对待
          
        • 相对定位没有脱标
          
    • position：absolute（绝对定位）
      
      • 1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为标准进行定位
        
      • 2.若祖先元素有定位（相对、绝对、固定定位），则以最近一级有定位的祖先元素为参考点移动位置
        
      • 3.绝对定位不在占有原来位置（脱标）
        
      • 4.相对定位最大作用就是给绝对定位当爹（子绝父相）
        
    • position：fixed（固定定位）
      
      • 概念
        
        • 元素固定于浏览器可视区域的位置，主要使用场景：在浏览器页面中某个元素需要固定在一个位置，不能随屏幕滚动而滚动
          
      • 特点
        
        • 1.一浏览器的可视窗口为参照点移动元素
          
          • 不跟父元素有任何关系
            
          • 不随滚动条滚动
            
        • 2.固定定位不再占有原来的位置（脱标）
          
    • position：sticky（粘性定位）
      
      • 概念
        
        • 粘性定位是为了实现网页中的元素达到一定的边偏移条件时，停止随屏幕滚动的效果
          
      • 特点
        
        • 1.以浏览器的可视窗口为参照点
          
        • 2.不占有位置（脱标）
          
• 定位的叠放次序
  
  • 可以使用z-index来控制盒子的前后顺序（z轴）
    
    • 数值可以为正、负整数、0，默认auto，数值越大，越靠上
      
    • 属性值相同，按照顺鞋顺序，后来者居上
      
    • 数字后面不加单位
      
    • 只有定位的盒子才有z-index属性
      
• 定位的拓展
  
  • 绝对定位的盒子居中
    
    • 加了绝对定位的盒子不能通过margin： 0  auto；水平居中，但可以通过计算来实现
      
      • 1.left：50%；让盒子的左侧移动到父级元素的水平中心位置
        
      • 2.margin-left：-100px; 让盒子向左移动自身高宽度的一半
        
      • 3.垂直居中，同理
        
  • 定位的特殊性
    
    • 1.行内元素添加绝对定位或者固定定位，可以直接设置高度和宽度
      
    • 2.块级元素添加绝对定位或者固定定位，如果不给宽高，默认大小是内容本身大小
      
  • 脱标的盒子不会触发外边距塌陷问题
    
    • 浮动、绝对定位/固定定位 元素都不会触发外边距塌陷的问题