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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。