为了增强用户体验,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. 初识SQL 执行顺序

    SQL不同于一般的程序代码,会按照一定的顺序进行执行,他的第一个执行始终从from开始执行,虽然Select出现在第一位置但是执行顺序 确不是在第一个.有时候可能大家写了很久的代码,不一定能够很好的理 ...

  2. STM32之SRAM调试

    在学习STM32的时候,由于烧FLASH的所造成的时间会比较慢,而在SRAM中调试的时间会比FLASH快很多,再加上FLASH的时候会经常擦除芯片,会对芯片的寿命造成一定的影响, 其实我本人觉得在学习 ...

  3. Win 10 文件浏览器无法打开

    今天遇到个很奇怪的问题,文件浏览器File Explorer无法正常显示,点击打开后任务栏上已经显示打开了,但是屏幕上却看不到任何窗口,开始以为机子中了恶意的木马,然后就疯狂的查毒,然而并没有解决问题 ...

  4. MySQL模糊查询

    第一种最土的方法:使用like语句第二种用全文索引 有两种方法,第一种最土的方法:使用like语句第二种听涛哥说用全文索引,就在网上搜一下: 如何在MySQL中获得更好的全文搜索结果 mysql针对这 ...

  5. mysql数据库封装

    <?php /** * name: sql操作封装,可扩展 . * User: 张云山 * Date: 2016/9/4 * Time: 22:02 */ //php文件编码设置header(' ...

  6. USACO翻译:USACO 2014 JAN三题(2)

    USACO 2014 JAN 一.题目概览 中文题目名称 队伍平衡 滑雪录像 滑雪场建设 英文题目名称 bteams recording skicourse 可执行文件名 bteams recordi ...

  7. Thinking in Java——笔记(12)

    Error Handling with Exceptions The ideal time to catch an error is at compile time, before you even ...

  8. URL转Drawable之 Android中获取网络图片的三种方法

    转载自: http://doinone.iteye.com/blog/1074283 Android中获取网络图片是一件耗时的操作,如果直接获取有可能会出现应用程序无响应(ANR:Applicatio ...

  9. svn 服务器搭建

    http://www.cnblogs.com/wrmfw/archive/2011/09/08/2170465.html 一,安装必须的软件包. $ apt-get install subversio ...

  10. 探测FTP状态,socket方式

    1.FTP返回码列表(哪里都能找到的): 120 Service ready in NNN minutes. 服务在NNN时间内可用 --------------------------------- ...