zoukankan      html  css  js  c++  java
  • 样式

    原文地址 developer.mozilla.org

    概述

    resize CSS 属性允许你控制一个元素的可调整大小性。

    初始值none
    适用元素elements with overflow other than visible, and optionally replaced elements representing images or videos, and iframes
    是否是继承属性
    适用媒体visual
    计算值as specified
    Animation typediscrete
    正规顺序the unique non-ambiguous order defined by the formal grammar

    语法

    resize: none;
    resize: both;
    resize: horizontal;
    resize: vertical;
    resize: block;
    resize: inline;
    
    
    resize: inherit;
    resize: initial;
    resize: unset;
    
    
    

    取值

    none

    元素不能被用户缩放。

    both

    允许用户在水平和垂直方向上调整元素的大小。

    horizontal

    允许用户在水平方向上调整元素的大小。

    vertical

    允许用户在垂直方向上调整元素的大小。

    block

    Depending on the writing-mode and direction value, the element displays a mechanism for allowing the user to resize the element either horizontally or vertically in block direction.

    inline

    Depending on the writing-mode and direction value, the element displays a mechanism for allowing the user to resize the element either horizontally or vertically in inline direction.

    Note: 如果一个 block 元素的 overflow 属性被设置成了visible,那么resize属性对该元素无效。

    标准语法

    none | both | horizontal | vertical | block | inline
    
    

    例子

    Disabling resizability of textareas

    CSS

    <textarea> 元素在 Gecko 2.0 (Firefox 4) 中默认是可以进行缩放的. 你可以通过下面的 CSS 代码来重写这种行为:

    textarea.example {
      resize: none; 
    }
    
    
    

    HTML

    <textarea>Type some text here.</textarea>
    
    

    Result

    Using resize with arbitrary elements

    You can use the resize property to make any element resizable. In the example below, a resizable <div> box contains a resizable paragraph (<p> element):

    CSS

    .resizable {
      resize: both;
      overflow: scroll;
      border: 1px solid black;
    }
    
    div {
      height: 300px;
       300px;
    }
    
    p {
      height: 200px;
       200px;
    }
    
    
    

    HTML

    <div>
      <p>
        This paragraph is resizable, because the CSS resize property is set to 'both' on this
        element.
      </p>
    </div>
    
    
    

    Result

    Specifications

    Browser compatibility

    FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
    Basic support (on <textarea>)1.04.0 (2.0)-moz未实现12.13.0 (522)
    On any block-level and replaced element, table cell, and inline block element (unless overflow is visible)4.05.0 (5.0)[1]未实现154.0
    FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
    Basic support (on <textarea>)?????
    On any block-level and replaced element, table cell, and inline block element (unless overflow is visible)?????

    [1] resize doesn't have any effect on <iframe> (cf. bug 680823)

    See also

  • 相关阅读:
    MapReduce&Yarn
    Linux网络配置问题
    Linux命令总结
    Hadoop优化&新特性
    Zookeeper
    idea中修改注释颜色
    Linuxbash未找到命令问题
    Hadoop3.0入门
    HDFS
    SpringBoot
  • 原文地址:https://www.cnblogs.com/qq3279338858/p/14271110.html
Copyright © 2011-2022 走看看