CSS3盒模型

CSS有一种基础设计模式叫盒模型，定义了Web页面中的元素怒是如何看做盒子来解析的，没一个盒子都有不同的界面，本文主要介绍CSS3盒模型。

1.CSS盒模型简介

在CSS中主要有以下几种盒模型：inline、inline-block、block、table、absolute position、float.浏览器把每个元素看作一个盒模型，每一个盒模型是由以下几个属性组合所决定的.

display

、position、float、width、margin、padding、height、border等。不同的盒模型会产生不同的布局。

1.1 什么是盒模型

CSS中每一个元素都是盒模型，包括HTML、和body标签元素。

1.2 重置盒模型解析

1）W3C的标准盒模型

height：内容高度

width：内容宽度

外盒尺寸计算（元素空间尺寸）
element空间高度 = 内容高度 + 内距 + 边框 + 外距
element空间宽度 = 内容宽度 + 内距 + 边框 + 外距

内盒尺寸计算（元素大小）
element 高度 = 内容高度 + 内距 + 边框
element 宽度 = 内容宽度  + 内距 + 边框

2）IE传统盒模型（IE6以下,不包含IE6版本）

外盒尺寸计算（元素大小）
element空间高度 = 内容高度 + 外距
element空间宽度 = 内容宽度 + 外距

内盒尺寸计算（元素大小）
element 高度 = 内容高度
element 宽度 = 内容宽度

2.CSS3盒模型属性

2.1 box-sizing

box-sizing: content-box | border-box | inherit

content-box:标准盒模型

border-box:IE传统盒模型（常用，可以防止padding，border破坏布局）

inherit： 元素继承父元素盒模型模式

3.内容溢出

在CSS中每一个元素都视为一个盒子，盒子就是容器，如果在样式中指定盒子的宽度与高度，可能某些内容在盒子中就会容纳不下。此时就可以用over-flow属性来指定如何显示盒中容纳不下的内容。

over-flow是CSS2.1规范中的内容，CSS3新增overflow-x,overflow-y

overflow-x: visible | hidden | scroll | auto |no-display | no-content

overflow-y: visible | hidden | scroll | auto |no-display | no-content

visible: 默认值。表示不剪切容器中的任何内容、不添加滚动条，clip属性失效，内容超出容器高度会溢出容器

auto:在内容溢出容器时剪切并添加滚动条。

hidden:内容溢出容器时，所有内容都将隐藏，不显示滚动条。隐藏的内容还在知识不显示，不对其他元素布局产生作用。

no-display 不常用，在谷歌火狐最新版浏览器不支持

no-content 不常用，在谷歌火狐最新版浏览器不支持

4.CSS3自由缩放属性

resize: none | both | horizontal | vertical | inherit

textarea元素默认具有resize功能，设置为none后，无法改变文本框大小。

5.CSS3外轮廓属性

outline:[outline-color]|[outline-style] |
[outline-width] | [outline-offset] | inherit