css新增盒子属性——尺寸调节

冰暮流星2025-10-28 8:33

css3针对盒子尺寸调节，新增了一个属性是resize

属性值有

none:这个是默认值，无法调整尺寸

both:可以同时调整宽度和高度

horizontal:可调整元素的宽度

vertical:设置元素的高度

这个属性必须与overflow使用，属性值设为auto

html 复制代码

<div class="container">
		<div>div1</div>
		<div>div2</div>
		<div>div3</div>
</div>

首先上面的html代码是设置一个大盒子包含三个小盒子

初始css代码如下

html 复制代码

	<style>
		.container {
			width:300px;
			height: 200px;
			border:1px solid red;
			
		}

		.container div {
			width:100px;
			height:200px;
			border:1px solid blue;
			background-color: pink;
			box-sizing: border-box;
			float:left;
		}
	</style>

视觉效果如下图

添加下面的css代码

html 复制代码

overflow: auto;
resize: both

可以实现外面的大盒子可以调整宽度和高度

鼠标放在右下角会变成斜着的箭头

html 复制代码

overflow: auto;

resize: horizontal;

添加这个css属性是只能调整宽度

html 复制代码

overflow: auto;
resize: vertical;

添加这个属性，只能调整高度