本实例代码可以使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里的线程

    今天,我们来谈一谈Java里的线程. 一.进程与线程的基本概念 大家可能没听过线程这个概念,但是相信,用计算机的朋友都听过进程这个概念.打开电脑的任务管理器,我们就可以看到许多进程.它们主要分为三类, ...

  2. iOS中多线程知识总结(一)

    这一段开发中一直在处理iOS多线程的问题,但是感觉知识太散了,所以就把iOS中多线程的知识点总结了一下. 1.基本概念 1)什么是进程?进程的特性是什么? 进程是指在系统中正在运行的一个应用程序.   ...

  3. Minor【 PHP框架】2.第一个应用与请求的生命周期

    框架Github地址:github.com/Orlion/Minor (如果觉得还不错给个star哦(^-^)V) 框架作者: Orlion 知乎:https://www.zhihu.com/peop ...

  4. Android探索之HttpURLConnection网络请求

    前言: 最近一直想着学习一下比较好的开源网络框架okhttp,想着学习之前还是先总结一下Android原生提供的网络请求.之前一直在使用HttpClient,但是android 6.0(api 23) ...

  5. 利用Shell脚本将MySQL表中的数据转化为json格式

    脚本如下: #!/bin/bash mysql -s -phello test >.log <<EOF desc t1; EOF lines="concat_ws(',', ...

  6. 如何用Excel直接查询Oracle中的数据

    将Oracle中查询的数据保存为Excel文件,通常使用的是PL/SQL Developer. 其实,Excel可直接写SQL语句查询Oracle中数据,在这里,用到ODBC驱动.详细步骤如下: 一. ...

  7. ios如何在#import方面提升编译性能

    模块的使用非常简单,对于存在的工程,第一件事情就是让这个功能生效.可以在项目的Build Settings 中搜索Modules 找到这个选项,做以下的设置 默认的情况下都是开启的 对于系统自带的只需 ...

  8. 自己使用的一个.NET轻量开发结构

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIgAAABFCAIAAAAerjlvAAAE2UlEQVR4nO2a3U/bVhiH+bdyPaqpmx

  9. 倾情大奉送--Spark入门实战系列

    这一两年Spark技术很火,自己也凑热闹,反复的试验.研究,有痛苦万分也有欣喜若狂,抽空把这些整理成文章共享给大家.这个系列基本上围绕了Spark生态圈进行介绍,从Spark的简介.编译.部署,再到编 ...

  10. 1Z0-053 争议题目解析304

    1Z0-053 争议题目解析304 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 304.What privileges must be granted to allow an a ...