• 常用css属性拓展


    text-overflow:clip | ellipsis(默认值:clip)
    clip:当内联内容溢出块容器时,将溢出部分裁切掉。
    ellipsis:当内联内容溢出块容器时,将溢出部分替换为(...)。
    ----------------------------------------------------------------------------------
    pointer-events:auto | none (默认值auto这里讲解是常用的属性值,具体参考实践和css手册)
    与pointer-events属性未指定时的表现效果相同。
    none:元素永远不会成为鼠标事件的target。
    ----------------------------------------------------------------------------------
    user-select:none | text | all | element(默认值:text,适用于:除替换元素外的所有元素)
    none:文本不能被选择
    text:可以选择文本
    all:当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素,那么被选择的部分将是以该子元素向上回溯的最高祖先元素。
    element:可以选择文本,但选择范围受元素边界的约束
    IE6-9不支持该属性,但支持使用标签属性 onselectstart="return false;" 来达到 user-select:none 的效果;
    ----------------------------------------------------------------------------------
    resize:none | both | horizontal | vertical(默认值:none)
    none:不允许用户调整元素大小。
    both:用户可以调节元素的宽度和高度。
    horizontal:用户可以调节元素的宽度
    vertical:用户可以调节元素的高度。
    ----------------------------------------------------------------------------------
    text-decoration:none | underline | overline | line-through | blink
    none:无下划线;
    underline:下划线;
    overline:上划线;
    line-through:贯穿线;
    blink:定义闪烁的文本。
    ----------------------------------------------------------------------------------
    text-transform:none | capitalize | uppercase | lowercase | full-width(默认值:none)
    none:无转换
    capitalize:将每个单词的第一个字母转换成大写
    uppercase:将每个单词转换成大写
    lowercase:将每个单词转换成小写
    full-width:将所有字符转换成fullwidth形式。如果字符没有相应的fullwidth形式,
    将保留原样。这个值通常用于排版拉丁字符和数字等表意符号。(CSS3)
    ----------------------------------------------------------------------------------
    white-space:normal | pre | nowrap | pre-wrap | pre-line(默认值:normal)
    normal:默认处理方式。
    pre:用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字超出边界时不换行。可查阅pre对象
    nowrap:强制在同一行内显示所有文本,合并文本间的多余空白,直到文本结束或者遭遇br对象。
    pre-wrap:用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字碰到边界时发生换行。
    pre-line:保持文本的换行,不保留文字间的空白距离,当文字碰到边界时发生换行。
    ----------------------------------------------------------------------------------
    overflow-wrap/word-wrap:normal | break-word(默认值:normal)
    normal:允许内容顶开或溢出指定的容器边界。
    break-word:内容将在边界内换行。如果需要,单词内部允许断行。
    ----------------------------------------------------------------------------------
    letter-spacing:normal | <length> | <percentage>(字间距,默认值:normal)
    normal:默认间隔
    <length>:用长度值指定间隔。可以为负值。如:2px;
    <percentage>:用百分比指定间隔。可以为负值。(CSS3)
    text-indent(首行缩进)
    ----------------------------------------------------------------------------------
    text-size-adjust:auto | none | <percentage>(默认值:auto)
    auto:文本大小根据设备尺寸进行调整。
    none:文本大小不会根据设备尺寸进行调整。
    <percentage>:用百分比来指定文本大小在设备尺寸不同的情况下如何调整。
    该属性只在移动设备上生效;如果你的页面没有定义meta viewport,此属性定义将无效;
    ----------------------------------------------------------------------------------
    border-collapse:separate | collapse(默认值:separate)
    适用于:table系元素;
    separate:边框独立
    collapse:相邻边被合并
    ----------------------------------------------------------------------------------
    display:none | inline | block | inline-block | | flex | inline-flex(默认值:inline)
    none:隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间
    inline:指定对象为内联元素。
    block:指定对象为块元素。
    inline-block:指定对象为内联块元素。(CSS2)
    flex:将对象作为弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)
    inline-flex:将对象作为内联块级弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)
    (以上探讨的是常用的display属性)
    ----------------------------------------------------------------------------------
    clear:none | left | right | both(默认值:none)
    适用于:块级元素;
    none:允许两边都可以有浮动对象
    both:不允许有浮动对象
    left:不允许左边有浮动对象
    right:不允许右边有浮动对象
    ----------------------------------------------------------------------------------
    visibility:visible | hidden | collapse(默认值:visible)
    visible:设置对象可视
    hidden:设置对象隐藏(占位隐藏,display是不占位隐藏)
    collapse:主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象,其作用等同于hidden。
    ----------------------------------------------------------------------------------
    overflow:visible | hidden | scroll | auto(默认值:visible)
    visible:对溢出内容不做处理,内容可能会超出容器。
    hidden:隐藏溢出容器的内容且不出现滚动条。
    scroll:隐藏溢出容器的内容,溢出的内容将以卷动滚动条的方式呈现。
    auto:当内容没有溢出容器时不出现滚动条,当内容溢出容器时出现滚动条,按需出现滚动条。此为body对象和textarea的默认值。
    overflow的效果等同于overflow-x + overflow-y;
    overflow-x: auto;当内容超出设定的宽度时自动出现横向滚动条
    overflow-y:auto;当内容超出设定的宽度时自动出现纵向滚动条
    ----------------------------------------------------------------------------------

  • 相关阅读:
    1025. 除数博弈
    剑指 Offer 12. 矩阵中的路径
    64. 最小路径和
    剑指 Offer 07. 重建二叉树-7月22日
    为人工智能、机器学习和深度学习做好准备的数据中心实践
    在云应用程序中加强隐私保护的9种方法
    迎接物联网时代 区块链大有可为
    Science 好文:强化学习之后,机器人学习瓶颈如何突破?
    学会这5招,让Linux排障更简单
    云游戏:5G时代的王牌应用
  • 原文地址:https://www.cnblogs.com/lhl66/p/8598359.html
Copyright © 2020-2023  润新知