resize 属性，规定用户可以通过拉伸元素尺寸来显示溢出隐藏的内容。效果类似 <textarea></textarea> 文本域标签。

可以说 <textarea> 标签自带 resize: both；所以可以通过设置 resize: none; 来禁止 <textarea> 的尺寸被拉伸。

但是，值得注意的是溢出形式的设置：

1. 当 overflow: hidden; 时，无论是否拉伸尺寸，超出尺寸的内容都会被隐藏裁剪；

2. 当 overflow: scroll; 时，无论是否拉伸尺寸，元素始终显示滚动条；

3. 当 overflow: auto; 时，仅尺寸小于内容显示时，才会出现滚动条，可以说，这是最美观的设置（<textarea> 也是自带此属性）；

----------------------------------------------------------------------------------------------------

outline-offset 属性用来设置轮廓（外边框）与边框（内边框）之间的间隔，或 “填充”，默认情况下，轮廓是紧贴着边框的，所以需要通过该属性来使它们分开。

outline 不会破坏元素宽高，同样的 outline-offset 设置的间隔，也不会影响元素的宽高。

----------------------------------------------------------------------------------------------------

box-sizing 用来告诉浏览器该使用哪种盒模型来渲染文档。

content-box 是默认的盒子模型，即 W3C 标准盒子模型，现如今所有主流浏览器都支持并使用该模型渲染布局，包括 IE。但麻烦却是一堆堆的，因为，在这模型下，border与padding的设置会破坏元素的尺寸，导致最终展现出来的布局效果并不符合理想效果，而如果想要达到理想效果，又需要去计算宽高，非常麻烦。

（别的属性是越标准越好用，但这个属性却是反向向IE标准的）

而 border-box 则指 IE盒子模型，也称为“怪异盒子模型”。此模型下，边框和填充并不会影响元素的宽高，相当于是将元素的空间霸占成自己的空间，元素总体大小不变，内容空间变小，边框、填充则霸占着原本属于内容空间的地方。这在平时设计布局时，就非常的舒服，因为在指定元素尺寸并设置该属性值后，元素尺寸就不会因被破坏而又得重新计算了。

例子：

<div class="clearfix">
  <h3>想要实现的效果</h3>
  <div class="container">
    <div class="box left"></div>
    <div class="box right"></div>
  </div>
</div>
<hr />
<div class="clearfix">
  <h3>默认标准盒模型，添加边框、填充后的效果</h3>
  <div class="container">
    <div class="box left content-box"></div>
    <div class="box right content-box"></div>
  </div>
  <!-- 实现效果则需改 width = 400px - 5px*2 - 10px*2 = 370px -->
</div>
<hr />
<div class="clearfix">
  <h3>设置border-box后，添加边框、填充后的效果</h3>
  <div class="container">
    <div class="box left border-box"></div>
    <div class="box right border-box"></div>
  </div>
</div>

尝试一下 »