css调节和控制元素大小

写在前面：

1.（resize）调节元素大小:
	none(无法调节).
	both(允许调节).
	horizontal(调节宽度).
	vertical(调节高度).
	注意:resize要和overflow:auto搭配使用.

2.（box-sizing）控制元素大小:
	content-box（默认值）:
		元素width=内容的宽度,
		元素height=内容的高度.
	border-box:
		元素width=border+padding+内容的宽度,
		元素height=border+padding+内容的高度.（注意:不包含margin）

1.（resize）调节元素大小

演示模板：

<div id="box"></div>

css代码：

#box{
  width:200px;
  height:200px;
  background:red;
  position:absolute;
  margin:auto;
  left:0;
  top:0;
  right:0;
  bottom:0;
  resize:both;
}

页面效果：

可以发现设置了resize:both并不能调节元素大小，原来resize属性必须和overflow属性搭配使用才有效果。

#box{
  width:200px;
  height:200px;
  background:red;
  position:absolute;
  margin:auto;
  left:0;
  top:0;
  right:0;
  bottom:0;
  resize:both;
  overflow:auto;
}

页面效果：

resize:horizontal可以只允许调节宽度：

页面效果：

resize:vertical可以只允许调节高度：

页面效果：

一定要记住resize属性必须和overflow属性搭配使用才会有效果。

2.（box-sizing）控制元素大小

演示模板：

<div id="box">box</div>

box-sizing的默认值是conten-box,元素的高宽就等于内容的高宽：

css代码：

#box{
  width:200px;
  height:200px;
  background:red;
  border:20px solid blue;
  padding:30px;
  box-sizing:content-box;
}

页面效果：

可以看出元素的总体高宽跟初始设置的高宽不一致，受内容及属性的影响。
所以得出：元素width=内容的宽度，元素height=内容的高度。

换成border-box试试：

#box{
  width:200px;
  height:200px;
  background:red;
  border:20px solid blue;
  padding:30px;
  box-sizing:border-box;
}

页面效果：

可以看出元素的总体高宽跟初始设置的高宽一致，不受内容及属性的影响。
所以得出：元素width=border+padding+内容的宽度，元素的height=border+padding+内容的高度。
注意：不包含margin。

box-sizing:border-box在很多场景中都会运用到。