CSS3快速上手之17：用户介面-优快云博客

本文介绍了如何使用CSS实现三种不同的布局效果：用户可调整大小的元素、轮廓偏移及固定尺寸的容器布局。通过实例展示了resize属性的应用、outline-offset属性的作用以及box-sizing属性对于元素尺寸的影响。

1.代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>网页title</title>
<style> 

/*---范例1：由用户随机调整元素尺寸大小---*/
.c1
{
	border:2px solid;
	padding:10px 40px; 
	width:300px;
	resize:both;
	overflow:auto;
}

/*---范例2：轮廓进行偏移，并在超出边框边缘的位置绘制轮廓---*/
.c2
{
	margin:20px;
	width:150px; 
	padding:10px;
	height:70px;
	border:2px solid black;
	outline:2px solid red;
	outline-offset:15px;
} 

/*---范例3：固定元素尺寸大小---*/
.container1
{
	width:30em;
	border:1em solid;
}
.box1
{
	box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
	width:50%;
	border:1em solid red;
	float:left;
}

</style>
</head>
<body>

<p>范例1：用户按压此方框的右下脚可以调整方框大小。</p>
<div class="c1">按压此方框的右下脚可以调整方框大小。</div>
<br>
<p>范例2：轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。</p>
<div class=c2>轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。</div>
<br>
<p>范例3：固定元素尺寸大小。</p>
<div class="container1">container内容</div>
<div class="box1">这个 div 占据了左边的一半。.</div>
<div class="box1">这个 div 占据了右边的一半。</div>

</body>
</html>

2.结果：