CSS3 Box-sizing了解盒子模型

一、HTML页面!DOCTYPE html

document.compatMode：
BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面

使用方法

html头部添加<!DOCTYPE html>

二、盒子模型W3C和传统IE盒子模型区别

语法：

box-sizing ： content-box || border-box || inherit

兼容：

box-sizing现代浏览器都支持，但IE家族只有IE8版本以上才支持，虽然现代浏览器支持box-sizing，但有些浏览器还是需要加上自己的前缀，Mozilla需要加上-moz-，Webkit内核需要加上-webkit-，Presto内核-o-,IE8-ms-，所以box-sizing兼容浏览器时需要加上各自的前缀：

/*Content box*/
  Element {
     -moz-box-sizing: content-box;  /*Firefox3.5+*/
     -webkit-box-sizing: content-box; /*Safari3.2+*/
     -o-box-sizing: content-box; /*Opera9.6*/
     -ms-box-sizing: content-box; /*IE8*/
     box-sizing: content-box; /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
  }
        
  /*Border box*/
  Element {
     -moz-box-sizing: border-box;  /*Firefox3.5+*/
     -webkit-box-sizing: border-box; /*Safari3.2+*/
     -o-box-sizing: border-box; /*Opera9.6*/
     -ms-box-sizing: border-box; /*IE8*/
     box-sizing: border-box; /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
  }

三、表单控制

form有些input还是支持IE传统下的Box Model标准，比如说【type="submit"】、【type="reset"】、button、select等（模式是在<!DOCTYPE HTML>效果）

  <form action="#" method="post">
    <div class="form-field">
	<input type="submit" value="submit" class="submit" />
    </div>
    <div class="form-field">
        <input type="reset" value="reset" class="reset" />
    </div>
    <div class="form-field">
	<button class="button">button</button>
    </div>
    <div class="form-field">
	<input type="text" value="text" class="text" />
    </div>
    <div class="form-field">
	<select name="select" id="select" class="select">
           <option value="1">1980</option>
	</select>
    </div>
    <div class="form-field"><input type="checkbox" class="checkbox" />checkbox</div>
    <div class="form-field"><input type="radio" class="radio" />radio</div>
    <div class="form-field"><textarea name="textarea" id="" cols="30" rows="3" class="textarea"></textarea></div>
  </form>

CSS

 <style type="text/css">
     body {
	font-size: 12px;
     }
     form {
	width: 200px;
	margin: 20px auto;
	padding: 10px;
	border: 1px solid #ccc;
     }
		
     .form-field {
	margin-bottom: 5px;
	background: #cdcdcd;
	padding: 2px;
     }
		
    .submit,
    .reset,
    .button,
    .text,
    .select,
    .textarea {
	width: 80px;
	border-color: red;
    }
			
    .textarea {
	resize: none;
    }
  </style>

效果如下：

解决方法，修改CSS样式，统一为传统IE盒子模型解析：

但是IE6和IE7是不支持box-sizing的属性，所以为了兼容我们还需要为他们写一个hack:

  .submit,
  .reset,
  .button,
  .text,
  .select,
  .textarea,
  .checkbox,
  .radio {
     margin: 0;
     padding: 0;
     border-width: 1px;
     height: 17px;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     -o-box-sizing: border-box;
     -ms-box-sizing: border-box;
     box-sizing: border-box;
     /*这里需要减去border的值，如果padding的值不是0还需要减去padding的值，*/
     *height:15px; 
     *width: 15px;
   }

详情参考CSS3 Box-sizing这篇文章详解和form兼容性分析http://www.w3cplus.com/content/css3-box-sizing

来源：oschina

链接：https://my.oschina.net/u/2336185/blog/736328

标签

盒子模型 box-sizing