---
title: "css3笔记——盒模型解析模式，box-sizing属性"
description: "css3规范中新增了UI（User-Interface)模块,用来控制互用界面的呈现方式。符合标准的现代浏览器中盒子的width和height属性代表的是盒子的content区域，而在ie7以下的浏览器中对元素的呈现方式中border和padding都包含在width和height中，这样就造成了混乱，因此css3中新增了**box-sizing**属性来定义盒模型的尺寸解析方式，其值有："
url: "https://hicc.pro/p/blog/css3-box-sizing"
author: "tyler wang"
published: "2012-10-28T21:46:54.000Z"
updated: "2012-10-28T21:46:54.000Z"
category: "blog"
tags:
  - "box-sizing"
  - "css"
  - "css3"
lang: "zh-CN"
site: "Hipo日志"
---

# css3笔记——盒模型解析模式，box-sizing属性

css3规范中新增了UI（User-Interface)模块,用来控制互用界面的呈现方式。符合标准的现代浏览器中盒子的width和height属性代表的是盒子的content区域，而在ie7以下的浏览器中对元素的呈现方式中border和padding都包含在width和height中，这样就造成了混乱，因此css3中新增了**box-sizing**属性来定义盒模型的尺寸解析方式，其值有：

- content-box：该属性维持css3以前盒模型的组成模式，即元素width/height=border+padding+content。
- border-box：标准值，即元素width/height=content。

首先css的代码为：

</pre> .box { width:250px; height:250px; border:5px solid #690; padding:10px; background-image:url(http://image2.hicc.pro/placeholder250.jpg); background-repeat:no-repeat; float:left; margin:20px; } #box1 { box-sizing:content-box; -webkit-box-sizing:content-box; -moz-box-sizing:content-box; } #box2 { box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } <pre>

由上述代码可知，盒子的width和height为250px，[背景图](http://image2.hicc.pro/placeholder250.jpg)的长宽也是250opx设置了10px的padding，由下图配合[demo](/css/css3-box-sizing.html)可知，左一和左二位标准呈现方式，也是现代浏览器的默认呈现方式，而左三即为content-box方式，将width/height呈现为border+padding+content。

<div class="wp-caption alignnone" id="attachment_329" _style="width: 676px">[![css3-box-sizing](https://image.hicc.pro/wp-content/uploads/2012/10/css3-box-sizing3.png "css3-box-sizing3")](https://image.hicc.pro/wp-content/uploads/2012/10/css3-box-sizing3.png)css3-box-sizing

</div>

---

原文 / Source: <https://hicc.pro/p/blog/css3-box-sizing>