CSS手动改变DIV高宽

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

时间: 2024-10-15 06:09:51

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

css挖坑爬坑之div高宽相等

目标效果 对于这么一个头像,外面是一个圆角的div里面是一个img,对于外面的div我要使他高度等于宽度. 发现问题 开始的时候设置宽度为100%然后高度为100%,这样子对于宽度来说的话可以撑满页面宽度,但是高度的话对于设置了父节点高度就会撑满父节点高度,没有设置父节点高度就不会有高度. 解决问题 网上找到了解决方法就是设置div的宽度然后不设置高度,然后设置他的after的margin-top为100%:因为类似于margin这种属性他的百分比相对于父元素宽度 然后上代码 .head{ po

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

序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; width: 80%; height: 0; padding-top: 80%; border-radius: 100%; border: 1px solid #000; box-sizing: border-box; // for .layout { height: 100%; } positi

div css文字字体行高行距 深入理解css行间距设置

div css文字字体行高行距 深入理解css行间距设置 div css文字字体行高行距 DIVCSS5带您深入理解css行间距设置,字体行距如何最简单地设置. 在文章中,要实现调节设置每行文字字体间距(行距)是使用line-height属性.(体感音乐) 要使得每行的文字一定的间距距离所以可以通过line-height样式实现.接下来DIVCSS5通过DIV CSS实例实现字体文字上下间距. 相关扩展CSS教程: css line-height div css字间距 为了观察到行距设置效果,新

css 高宽判断

/×width: expression(this.width > 100 && this.width > this.height ? 100: true); height: expression(this.height > 100 ? 100: true);width: expression(this.width > 100 ? 100: true);×/ ====================IE6最小高度.min_height{  min-height:200

transform的妙用---实现div不定宽高垂直水平居中

transform的兼容性 transform的兼容性还是比较乐观的.IE9以下不兼容,IE9支持代替的-ms-transform属性不过只支持2D转换. 谷歌和Safari支持代替的-webkit-transform属性.IE9以上.火狐和欧朋是兼容的. transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜. 在此,可妙用其移动的属性. 遇见div不定宽和高垂直水平居中的问题.记得以前都是用js去实现.现在可以用 transform进行实现.

页面DIV自适应宽高

代码如下: <html xmlns=" http://www.w3.org/1999/xhtml "> <head runat="server">     <title>窗口大小</title> </head> <body onload="findDimensions();"> <h2 align="center">请调整浏览器窗口大小<

(VB.net)自定义TableLayoutPanel使它能够在运行时用鼠标改变行高和列宽。

喜欢看C#的童鞋,这里有个工具,你们可以自己转换:http://converter.telerik.com/ 想达到这个效果,首先新建一个新的项目.在项目名字上面右击,新增一个类,类名为:TableLayoutPanelEx.vb. 然后只要复制下面的代码到类中即可. Public Class TableLayoutPanelEx Inherits TableLayoutPanel Private Const WM_NCHITTEST As Integer = &H84 Private Cons

高宽不定的div相对父div上下、左右居中

<div class="parent"> <div class="child">123</div> </div> css样式使div以表格的特性表现: .parent { width: 400px; height: 360px; display: table; text-align: center; } .child { display: table-cell; vertical-align: middle;} 居中效

关于Google圆角高光高宽自适应按钮及其拓展

关于Google圆角高光高宽自适应按钮及其拓展————源自张鑫旭css讲解 这篇文章发布于 2009年10月24日,星期六,18:08,归类于 css相关. 阅读 48770 次, 今日 1 次 by zhangxinxu from http://www.zhangxinxu.com本文地址: http://www.zhangxinxu.com/wordpress/?p=292 一.前言对于一门技术而言,要想达到真正的高度,需要形成自己关于这门技术的世界观.我在研究css上花费的功夫相对多些,但