CSS3div用户可自动调节大小

最新推荐文章于 2024-07-03 09:36:39 发布

boonyaxnn

最新推荐文章于 2024-07-03 09:36:39 发布

阅读量808

点赞数 1

分类专栏： CSS3 文章标签： css3 div可拖动大小

本文链接：https://blog.csdn.net/boonyaxnn/article/details/61623206

版权

CSS3 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">

		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>index</title>
		<meta name="description" content="">
		<meta name="author" content="boonya">

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

		<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
		<link rel="shortcut icon" href="/favicon.ico">
		<link rel="apple-touch-icon" href="/apple-touch-icon.png">
		<style>
			div {
				border: 3px solid #CED1CE;
				padding:40px 20px 40px 10px;/*上右下左*/
				resize: both;/*用户调整尺寸*/
				overflow: auto;
				width: 200px;
				margin: 50px 10px 20px 10px;/*上右下左*/
				background: #A5EA9B;
			}
		</style>
	</head>
	<body>
		<div>
                   resize 属性规定是否可由用户调整元素尺寸。
		</div>
		<div>
		<p>我是小妞妞。我是小妞妞。我是小妞妞。我是小妞妞。我是小妞妞。我是小妞妞。我是小妞妞。我是小妞妞。我是小妞妞。我是小妞妞。我是小妞妞。我是小妞妞。</p>
		</div>
		<div>
		<p>我是小妞妞。我是小妞妞。我是小妞妞。我是小妞妞。我是小妞妞。我是小妞妞。我是小妞妞。我是小妞妞。我是小妞妞。我是小妞妞。我是小妞妞。我是小妞妞。</p>
		</div>
	</body>
</html>

注意：padding和margin值设置的次序是上右下左顺时针。

效果图

boonyaxnn

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3div用户可自动调节大小

 index div { border: 3px solid #CED1CE;
复制链接

扫一扫

专栏目录