美文网首页
css补充属性

css补充属性

作者: LorenSLJ | 来源:发表于2018-10-31 03:27 被阅读0次

    vertical-align 属性

    vertical-align 属性设置元素的垂直对齐方式。
    该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。

    描述
    baseline 默认。元素放置在父元素的基线上。
    sub 垂直对齐文本的下标。
    super 垂直对齐文本的上标
    top 把元素的顶端与行中最高元素的顶端对齐
    text-top 把元素的顶端与父元素字体的顶端对齐
    middle 把此元素放置在父元素的中部。
    bottom 把元素的顶端与行中最低的元素的顶端对齐。
    text-bottom 把元素的底端与父元素字体的底端对齐。
    length
    % 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
    inherit 规定应该从父元素继承 vertical-align 属性的值。

    在实际布局中,对于行内元素各种想得通或者想不通的行为表现,基本都跟vertical-alignline-height属性有关,遇到问题,请看张鑫旭的CSS深入理解vertical-align和line-height的基友关系

    line-height属性

    line-height 属性设置行间的距离(行高)。不允许使用负值。

    该属性会影响行框的布局。在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离。
    line-heightfont-size 的计算值之差(在 CSS 中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

    描述
    normal 默认。设置合理的行间距。
    number 设置数字,此数字会与当前的字体尺寸相乘来设置行间距。
    length 设置固定的行间距。
    % 基于当前字体尺寸的百分比行间距。
    inherit 规定应该从父元素继承 line-height 属性的值。

    visibility 属性

    visibility 属性规定元素是否可见。

    描述
    visible 默认值。元素是可见的。
    hidden 元素是不可见的。
    collapse 当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。
    inherit 规定应该从父元素继承 visibility 属性的值。
    diaplay: none;和visibility: hidden的区别

    display隐藏对象不保留物理空间;
    visibility隐藏对象保留占据的物理空间;
    但是一般是不赞成使用 visibility:hidden,建议使用display:none,因为当浏览器渲染被占据的物理空间时,会消耗资源。

    overflow 属性

    overflow 属性规定当内容溢出元素框时发生的事情。
    这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。

    描述
    visible 默认值。内容不会被修剪,会呈现在元素框之外。
    hidden 内容会被修剪,并且其余内容是不可见的。
    scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
    auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
    inherit 规定应该从父元素继承 overflow 属性的值。

    cursor 属性

    cursor 属性规定要显示的光标的类型(形状)。
    该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。

    描述
    url 需使用的自定义光标的 URL。注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。
    default 默认光标(通常是一个箭头)
    auto 默认。浏览器设置的光标。
    crosshair 光标呈现为十字线。
    pointer 光标呈现为指示链接的指针(一只手)
    move 此光标指示某对象可被移动。
    e-resize 此光标指示矩形框的边缘可被向右(东)移动。
    ne-resize 此光标指示矩形框的边缘可被向上及向右移动(北/东)。
    nw-resize 此光标指示矩形框的边缘可被向上及向左移动(北/西)。
    n-resize 此光标指示矩形框的边缘可被向上(北)移动。
    se-resize 此光标指示矩形框的边缘可被向下及向右移动(南/东)。
    sw-resize 此光标指示矩形框的边缘可被向下及向左移动(南/西)。
    s-resize 此光标指示矩形框的边缘可被向下移动(南)。
    w-resize 此光标指示矩形框的边缘可被向左移动(西)。
    text 此光标指示文本。
    wait 此光标指示程序正忙(通常是一只表或沙漏)。
    help 此光标指示可用的帮助(通常是一个问号或一个气球)。

    相关文章

      网友评论

          本文标题:css补充属性

          本文链接:https://www.haomeiwen.com/subject/kblxtqtx.html