为了增强用户体验,CSS3增加了很多新的属性,其中resize就是一个重要的属性,它允许用户通过拖动的方式来修改元素的尺寸来改变元素的大小。到目前为止,可以使用overflow属性的任何容器元素。

在此之前,Web设计师为了要实现这样具有拖动效果的UI,使用大量的脚本代码才能实现,这样费时费力,效率极低。

resize属性主要是用来改变元素尺寸大小的,其主要目的是增强用户体验。但使用方法却是极其的简单,先从其语法入手。

resize: none | both | horizontal | vertical | inherit

取值说明:

属性值

取值说明

none

用户不能拖动元素修改尺寸大小。

both

用户可以拖动元素,同时修改元素的宽度和高度

horizontal

用户可以拖动元素,仅可以修改元素的宽度,但不能修改元素的高度。

vertical

用户可以拖动元素,仅可以修改元素的高度,但不能修改元素的宽度。

inherit

继承父元素的resize属性值。

例如:通过resize属性,让文本域可以沿水平方向拖大。代码为:

textarea {
-webkit-resize: horizontal;
-moz-resize: horizontal;
-o-resize: horizontal;
-ms-resize: horizontal;
resize: horizontal;
}

自由缩放属性resize的更多相关文章

  1. 自由缩放属性-resize(禁止textarea的自由缩放尺寸功能)

    resize:none|both|horizontal|vertical|inherit 可以用来改变元素的尺寸大小 用上这个属性后元素的有下脚会有一个小图标 拖它就可以了 但是我把resize:bo ...

  2. [jquery] 图片热区随图片大小自由缩放

    在图片上直接画出带超级链接热区元素map和area相信大家并不陌生,Dreamweaver等网页制作软件都有直接在图片上绘制带超级链接的热区工具,但是直接绘制的热区是不能随着图片自适应放大和缩小的,现 ...

  3. (一)自定义ImageView,初步实现多点触控、自由缩放

    真心佩服那些一直专注于技术共享的大神们,正是因为他们无私的分享精神,我才能每天都有进步.近日又算是仔细学了android的自定义控件技术,跟着大神的脚步实现了一个自定义的ImageView.里面涉及到 ...

  4. opencv学习笔记——图像缩放函数resize

    opencv提供了一种图像缩放函数 功能:实现对输入图像缩放到指定大小 函数原型: void cv::resize ( InputArray src, OutputArray dst, Size ds ...

  5. iOS导航栏自由缩放头像效果

    效果图: 上代码: 先给一个self.navigationItem.titleView ,然后再放个ImangeView添加到titleView上: UIView *titleView = [[UIV ...

  6. 让低版本IE支持css3背景图片缩放属性background-size

    IE7,8中不支持背景图片的缩放.下面的代码可以帮你实现兼容 background: url(/content/img/yuehuibtn.png);//css3代码 background-size: ...

  7. 原生js实现table表格列宽自由缩放

    <!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>ta ...

  8. css3学习文档

    什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能. 目前主流浏览器chrome.safari.firefox.opera.甚至360都已经支 ...

  9. CSS3知识点整理(五)----响应式设计及其他属性

    介绍Media Queries与Responsive设计以及外轮廓属性.resize属性.CSS3生成内容等 学会如何使用CSS3中的Media Queries模块来让一个页面适应不同的终端(或屏幕尺 ...

随机推荐

  1. 【BZOJ1688】[Usaco2005 Open]Disease Manangement 疾病管理 状压DP

    [BZOJ1688][Usaco2005 Open]Disease Manangement 疾病管理 Description Alas! A set of D (1 <= D <= 15) ...

  2. js快速排序

    function sort(arr){ if(arr.length<=1){ return arr; } var num = Math.floor(arr.length/2); var numV ...

  3. hud 5876 2016 ACM/ICPC Asia Regional Dalian Online

    题意:给一个图 给定一个点s 求补图中s点到达各个点的最短路 思路:从s点开始bfs 在图中与s点有连接的都是在补图中不能直接到达的点 反之在补图中都是可以直接到达的点 由此bfs ((( 诡异的写法 ...

  4. xampp 80端口被占用解决办法

    很多朋友安装xampp之后,启用服务器或者数据库失败,发现端口已经被占用.因为每台电脑占用端口的软件不一样,要如何解决这个问题. 第一种解决方法: 检查软件安装路径中是否有中文,如下图: 解决方法: ...

  5. BSBuDeJie_02

    一 左边的类别数据 1 模型 和 字典中的数据对应 /* id */ @property (nonatomic, assign) NSInteger *id; /* 总数 */ @property ( ...

  6. 榮耀6 Plus將是一部沒有對手的手機

    華為榮耀官方微博發佈消息正式確定了年度旗艦新品將命名為榮耀6 Plus,據稱,該機將是“2014年度最最旗艦手機”,並將集“科學與美學一身”.“探索幾何與視覺極限”,同時,官方微博還不低調地宣稱該機將 ...

  7. Android课程---关于数据存储的学习(2)

    手机外部存储的学习 activity_data2.xml <?xml version="1.0" encoding="utf-8"?> <Li ...

  8. mysql 主主互备

    双机热备的概念简单说一下,就是要保持两个数据库的状态自动同步.对任何一个数据库的操作都自动应用到另外一个数据库,始终保持两个数据库数据一致. 这样做的好处多. 1. 可以做灾备,其中一个坏了可以切换到 ...

  9. NorthWind 数据库整体关系

    http://blog.csdn.net/bergn/article/details/1502150 今天看到一张非常有用的图,说明有关Northwind数据库整体关系的图,以前一直在用,但是没有一个 ...

  10. jQuery( )方法的构建原理

    jQuery中最常用方法的就是jQuery( ),也即$( ). jQuery( )是一个函数调用,调用的结果是返回了一个jQuery实例对象. 编写组件通常的做法是将组件封装成一个对象,需要用的时候 ...