为了增强用户体验，CSS3增加了很对的新属性，其中一个重要的属性就是resize，它允许用户通过拖动的方式改变元素的尺寸，到目前为止，主要用于可以使用overtflow属性的任何容器元素中

resize：none | bth |Horizontal | vertival | inherit

　　none：浏览器不提供尺寸凋整机制，用户不能操作机制调解的高度和宽度

　　both：浏览器提供双向尺寸凋整机制，允许用户调节元素的宽度和高度。

　　Horizontal：浏览器提供单向水平调节机制，允许用户调节元素的宽度。

　　vertical：浏览器提供单向垂直调节机制，允许用户调节元素的高度。

　目前吃了IE浏览器外，其他最新版主流浏览器都允许元素的缩放，但尚未完全支持。

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <style>

        .box{

        box-sizing: border-box;

        -webkit-box-sizing: border-box;

        border: 3px solid green;

        }

        .p{

            width: 10px;

            height: 20px;

            border: 1em solid black;

            resize: both;

            overflow: auto;

            /* 必须同时定义overflow和redize，否则redize属性声明无效，元素默认溢出显示visible */

            box-sizing: initial;

        }

    </style>

    <div class="p">

           你好世界

    </div>

    <div class="box">

        <p>你好世界</p>

    </div>

    <script>

    </script>

</body>

</html>

resize定义元素尺寸大小的更多相关文章

  1. AD14中如何定义PCB尺寸大小（不同于AD9和10）

    以前用的着软件基本都是停留在9和10,14用的少,虽然14增加了很多功能,但是也带来了不变,虽然可以打开各种其他格式的文件,但是有些地方的改动不容忽略,在一个完整的板子下来需要用到的每个地方的点也会有 ...

  2. JS获取元素尺寸大小、鼠标位置

    //e.clientX|Y:表示鼠标相对浏览器可视窗口的当前坐标 //e.offsetX|Y:表示鼠标相对于事件源对象的坐标 //e.pageX|Y:表示鼠标相对于网页的坐标 /* element.o ...

  3. JavaScript获取DOM元素位置和尺寸大小

      在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScri ...

  4. 获取DOM元素位置和尺寸大小

    JavaScript获取DOM元素位置和尺寸大小 在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽 ...

  5. JavaScript获取元素尺寸和大小操作总结

    一.获取元素的行内样式 复制代码 代码如下: var obj = document.getElementById("test"); alert(obj.height + " ...

  6. JavaScript获取元素尺寸和大小操作总结（转载）

    一.获取元素的行内样式 var obj = document.getElementById("test"); alert(obj.height + "\n" + ...

  7. Xamarin.Forms——尺寸大小（五 Dealing with sizes）

    如之前所见的大量可视化元素均有自己的尺寸大小: iOS的状态栏高度为20,所以我们需要调整iOS的页面的Padding值,留出这个高度. BoxView设置它的默认宽度和高度为40. Frame的默认 ...

  8. CSS3 resize属性 调整div大小

    resize 用户可调整div大小  IE不支持 none 不可调整元素尺寸 both 可调整宽度高度 horizontal 可调整宽度 vertical 可调整高度 注意:如果属性生效,必须设置元素 ...

  9. Js位置与大小（1）——正确理解和运用与尺寸大小相关的DOM属性

    在web开发中,不可避免遇到要计算元素大小以及位置的问题,解决这类问题的方法是利用DOM提供的一些API结合兼容性处理来,所有内容大概分3篇左右的文章的来说明.本文作为第一篇,介绍DOM提供的与尺寸大 ...

随机推荐

  1. javascript快速排序的思考

    还记得三个月前,学习过快速排序,示例所讲的python快速排序十分易于理解,然而网上学习的c#的快速排序当时就懵逼的,现在已经全忘了,大概记得个思路 在学习完了一些高级的js方法后,今天用js模拟了p ...

  2. 移植Max中的控制器到Unity - 前言

    一切源自于一个ppt http://pan.baidu.com/s/1kT8x2V9 看到这个ppt之前,其实自己也想过将Max当中的一些约束移植到游戏中,一方面是那时候能力不足,另一方面还是自己不那 ...

  3. PHP7 - 如何禁用Xdebug

    操作系统:Cent OS 7 什么是Xdebug?看它的官方网站介绍: https://xdebug.org/index.php 为什么要禁用呢?这是因为Composer,这两种工具有冲突,在使用Co ...

  4. 【文文殿下】【BZOJ4804】欧拉心算

    题解 显然有 \(ans=\sum _{i=1} ^{n} \lfloor \frac{n}{i} \rfloor \sum _{d|i} \mu(d) \phi (\frac{i}{d})\) 前半 ...

  5. SQL语句常见优化十大案例

    1.慢SQL消耗了70%~90%的数据库CPU资源: 2.SQL语句独立于程序设计逻辑,相对于对程序源代码的优化,对SQL语句的优化在时间成本和风险上的代价都很低:3.SQL语句可以有不同的写法: 1 ...

  6. jQuery基础笔记 each和data（7）

    day56 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-11-0 each jQuery.each(collection, ...

  7. 图片后门恶意捆绑工具FackImageexploer

    本文作者:夜莺 今天向大家提个醒,最近有一款工具名叫FackImageexploer,该工具能够将恶意的.bat和.exe程序与图片绑定在一起,假若受害者点击了图片,就会反弹个shell给不法分子,如 ...

  8. centos7修改默认运行级别的变化

    在学习centos7,视频教学中使用的的centos6,查看权限文件命令为 cat /etc/inittab/ 但是在centos7中输入以下命令会出现这种情况 这个已经不用了,现在修改权限的命令修改 ...

  9. centos7 防火墙与端口设置、linux端口范围

    防火墙 启动防火墙: systemctl start firewalld 查看防火墙状态: systemctl status firewalld 关闭防火墙: systemctl stop firew ...

  10. 微信小程序web-view(webview) 嵌套H5页面 唤起微信支付的实现方案

    场景:小程序页面有一个web-view组件,组件嵌套的H5页面,要唤起微信支付. 先讲一下我的项目,首先我是自己开发的一个H5触屏版的商城系统,里面含有购物车,订单支付等功能.然后刚开始,我们公众号里 ...