zoukankan      html  css  js  c++  java
  • resize定义元素尺寸大小

    为了增强用户体验,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{
                 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>
  • 相关阅读:
    开不了的窗_____window.open
    IIS项目发布完整流程
    理解MVC模式
    ASP.NET MVC 基础(01)
    C#之线程和并发
    vue时间格式化
    windows 2013 datacenter 安装sql server2008 r2兼容性
    SQL Server DBA十大必备工具使生活轻松
    ORACLE主要的系统表和系统视图
    Oracle中spool命令实现的两种方法比较
  • 原文地址:https://www.cnblogs.com/xiaowie/p/10620602.html
Copyright © 2011-2022 走看看