zoukankan      html  css  js  c++  java
  • 记录一些CSS的实用技巧

    隐藏元素 display 和 visibility
    
    display: none    
    隐藏对象,隐藏后,本来的位置会消失,会被其他文档流顶替
    
    display: block
    除了是转换为块级元素,还有显示该元素的意思
    
    visibility: hidden
    使用该属性隐藏元素后,本来的位置保存,元素保留该位置,空白显示
    
    visibility: visible
    显示隐藏元素
    神奇的 overflow
    
    overflow: visible
    不剪切内容也不添加滚动条
    
    overflow: hidden
    不显示超过对象尺寸的内容,超出的部分隐藏掉
    
    overflow: scroll
    不管是不是超出内容,都显示滚动条
    
    overflow: auto
    超出自动显示滚动条,不超出不显示滚动条
    垂直对齐 vertical-align
    
    该属性不影响块级元素中的内容对齐,它只针对于行内元素和行内块元素,特别是行内块元素,通常用来控制图片、表单和文字的对齐
    vertical-align: baseline
    垂直于基线对齐
    vertical-align: top
    垂直于顶线对齐
    vertical-align: middle
    垂直于中线对齐
    vertical-align: bottom
    垂直于底线对齐
    溢出的文字用省略号显示
    
    当需要设置或检索是否使用一个省略标记(...)标示对象内文本的溢出:
    
    text-overflow: clip
    不显示省略标记,裁切多余的文字
    
    text-overflow: ellipsis
    当对象内文本溢出时显示省略号代替
    
    当需要设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容:
    
    white-space: normal
    默认处理方式
    
    white-space: nowrap
    强制在同一行内显示所有文本,直到文本结束或者遭遇br标签对象才换行
    
    使用技巧:
      /*1. 先强制一行内显示文本*/
          white-space: nowrap;
      /*2. 超出的部分隐藏*/
          overflow: hidden;
      /*3. 文字用省略号替代超出的部分*/
          text-overflow: ellipsis;
  • 相关阅读:
    爬取卡通图片
    python 列表生成式
    python 装饰器
    python 协程 and 进程
    ssh登录缓慢问题
    解决 input 元素点击有蓝色边框的问题
    JavaScript面试题总结系列(九)
    JavaScript面试题总结系列(八)
    JavaScript面试题总结系列(七)
    JavaScript面试题总结系列(六)
  • 原文地址:https://www.cnblogs.com/panic404/p/13196961.html
Copyright © 2011-2022 走看看