CSS3 Box-sizing了解盒子模型

时间 2019-11-07

标签 css3 css box sizing 了解盒子模型栏目 CSS 繁體版

原文原文链接

1、HTML页面!DOCTYPE htmlcss

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

使用方法css3

html头部添加<!DOCTYPE html>web

2、盒子模型W3C和传统IE盒子模型区别浏览器

语法：post

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

兼容：rest

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

/*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标准语法)*/
  }

3、表单控制orm

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

<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