• 记录一些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;
  • 相关阅读:
    微信商城中使用微信支付接口获取用户地址
    微信支付开发流程
    沉默多年,重新开博
    Extjs 表单验证后,几种错误信息展示方式
    自己对Extjs的Xtemplate的忽略
    js execCommand
    支付宝支付
    C# 将短时间格式变长正常时间格式
    SortedDictionary
    sql操作
  • 原文地址:https://www.cnblogs.com/panic404/p/13196961.html
Copyright © 2020-2023  润新知