本实例代码可以使DIV可以手动改变大小

效果体验：http://hovertree.com/code/css/resize.htm

代码如下：

<!DOCTYPE html>

<html>

<head><title>何问起</title><base target="_blank" />

<style>

div

{

background-color:#f0f0f0;

border:solid red 1px;

padding:10px 40px;

width:300px;

resize:both;

overflow:auto;

}

</style>

</head>

<body>

<div>resize 属性规定是否可由用户调整元素尺寸 - 何问起</div>

<p><b>注释：</b> Firefox 4+、Safari 以及 Chrome 支持 resize 属性。</p>

<a href="http://hovertree.com/h/bjaf/css3_resize.htm">参考</a>

<a href="http://hovertree.com/code/css/resize.htm">本文地址</a>

</body>

</html>

参考：css3的resize属性

更多特效：http://www.cnblogs.com/jihua/p/webfront.html

CSS手动改变DIV高宽的更多相关文章

  1. css挖坑爬坑之div高宽相等

    目标效果 对于这么一个头像,外面是一个圆角的div里面是一个img,对于外面的div我要使他高度等于宽度. 发现问题 开始的时候设置宽度为100%然后高度为100%,这样子对于宽度来说的话可以撑满页面 ...

  2. css如何将div画成三角形

    首先了解一下盒模型: 盒模型 先看一段代码: #div1{ height: 100px; border-style: solid; border-width: 100px 100px 100px 10 ...

  3. 移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )

    序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; ...

  4. table 与 div 固定宽高问题

    div {width:100px;height:200px;word-wrap: break-word;overflow:hidden;} 这个可以固定div的宽高,溢出内容会被剪除. table{t ...

  5. div 固定宽高 水平垂直居中方法

    div固定宽高,水平垂直居中,根据所用单位不同,分成两种情况,分别是"px"和"%"情况. 例:将三层div做出三个边框,要求水平垂直居中.效果如图 情况一(单 ...

  6. css3之transform属性实现div不定宽高垂直水平居中

    transform的作用 transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜.(w3cschool) transform的兼容性 transfor ...

  7. css实现保持div的等宽高比

    这篇文章主要为回答这个问题:“做响应式网页,如何让一个div的高和宽保持比例放大或是缩小?”,这里不介绍媒体查询的实现. 那么css如何实现高度height随宽度width变化保持比例不变呢?即给定可 ...

  8. css基础之 图片瀑布流布局：用CSS+DIV等宽格子堆砌瀑布流效果 （一）

    <!doctype html> <html> <head> <meta charset="UTF-8"/> <title> ...

  9. 第4天：JS入门-给div设置宽高背景色

    今天学习了js入门课程,听的不多,做了个小练习,给div设置宽高.背景色.一点点都是进步.核心代码如下: <!DOCTYPE html><html lang="en&quo ...

随机推荐

  1. java发送内嵌图片邮件

    前言: 博客系统中需要邮件服务的功能,以前写过类似的功能,不过功能太简单了,仅仅是发送文本内容,现在尝试一下发送内嵌图片邮件! 准备工作: 请参考:http://www.cnblogs.com/huj ...

  2. lintcode二叉树的锯齿形层次遍历 （双端队列）

    题目链接: http://www.lintcode.com/zh-cn/problem/binary-tree-zigzag-level-order-traversal/ 二叉树的锯齿形层次遍历 给出 ...

  3. herbnate session.createSQLQuery(sql) 和 session.createQuery(sql)使用

    public class DistributeDao implements Serializable{ private SessionFactory sessionFactory; public Se ...

  4. 启动第一个 KVM 虚机 - 每天5分钟玩转 OpenStack（4）

    本节演示如何使用 virt-manager 启动 KVM 虚机. 首先通过命令 virt-manager 启动图形界面 # virt-manager 点上面的图标创建虚机 给虚机命名为 kvm1,这里 ...

  5. Hawk： 20分钟无编程抓取大众点评17万数据

    1. 主角出场:Hawk介绍 Hawk是沙漠之鹰开发的一款数据抓取和清洗工具,目前已经在Github开源.详细介绍可参考:http://www.cnblogs.com/buptzym/p/545419 ...

  6. T-Sql（四）表关联和视图（view）

    今天讲下T-sql中用于查询的表关联和视图,我们平时做项目的时候会遇到一些复杂的查询操作,比如有班级表,学生表,现在要查询一个学生列表,要求把学生所属班级名称也查询出来,这时候简单的select查询就 ...

  7. [ES] 安装

    1.ElasticSearch安装的准备工作 Linux:CentOS6.4 Elasticsearc:elasticsearch-2.2.0 JDK:jdk-7u79-linux-x64 IK:1. ...

  8. ZOJ Problem Set - 1394 Polar Explorer

    这道题目还是简单的,但是自己WA了好几次,总结下: 1.对输入的总结,加上上次ZOJ Problem Set - 1334 Basically Speaking ac代码及总结这道题目的总结 题目要求 ...

  9. 初识openstack

    <1>虚拟化技术的功能和特点 多个虚拟机运行在一台物理服务器上,虚拟机之间共享物理资源,虚拟机可以分别安装不同的操作系统,应用程序相互隔离. 虚拟化技术的优势:虚拟机的操作系统和应用程序不 ...

  10. js构建ui的统一异常处理方案（三）

    笔者之前分析了如何实现js的责任链异常处理的方法,通过promise这个异步模型,我们能够对同步方法和异步方法的两种情况,均可以实现责任链模式.有了这些武器,我们就可以开始设计ui的统一异常处理方案了 ...