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

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

属性值有

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

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

horizontal:可调整元素的宽度

vertical:设置元素的高度

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

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

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

初始css代码如下

	<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代码

overflow: auto;
resize: both

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

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

overflow: auto;resize: horizontal;

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

overflow: auto;
resize: vertical;

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