CSS3 完善盒模型

　　CSS3 改善了传统盒模型结构，增强了盒子构成要素的功能，扩展了盒模型显示的方式。

　　改善结构：为盒子新增轮廓区；

　　增强功能：内容区增强 CSS 自动添加内容功能，增强内容移除、换行处理；允许多重定义背景图，控制背景图显示方式等；增加背景图边框，多重边框，圆角边框等功能；完善 margin:auto;布局特性；

　　扩展显示：完善传统的块显示特性，增加弹性，伸缩盒显示功能，丰富网页布局手段。

一、定义显示方式

　　CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

　　语法格式：

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

　　可以分成两种情况：

　　1、box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值，其让元素维持 W3C 的标准Box Model

　　2、box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的

　　注：上面的标注的width指的是CSS属性里设置的width: length，content的值是会自动调整的。

二、定义元素尺寸大小（放置拖拽元素）

　　resize 属性允许用户通过拖动的方式改变元素的尺寸。目前主要用于可以使用 overflow 属性的任何容器元素中。

　　语法格式：

resize: none | both | horizontal | vertical | inerrit;

• • none：浏览器不提供尺寸调整机制，用户不能操纵调节元素的尺寸；
  • both：浏览器提供双向尺寸调整机制，允许用户调节元素的宽度和高度；
  • horizontal：浏览器提供单向水平尺寸调整机制，允许用户调节元素的宽度；
  • vertical：浏览器提供单向垂直尺寸的调整机制，允许用户调节元素的高度；
  • inherit：默认继承。

　　Tips：resize 属性初始值为 none，适用于所有 overflow 属性不为 visibile 的元素。

三、溢出处理

　　overflow 是 CSS2 中规范的特性，CSS3 在盒模型新加入 overflow-x 和 overflow-y 的特性。

　　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：在需要时剪切内容并添加滚动条，该属性为 body 和 textarea 元素的默认值。
  • hidden：不显示超出元素尺寸的内容。
  • scroll：当内存超出元素尺寸， overflow-x 显示为横向滚动条，而 overflow-y 显示为纵向滚动条。
  • no-display：当内容超出元素尺寸，则不显示元素。此时类似添加了 display:none 声明。
  • no-content: 当内容超出元素尺寸，则不显示内容，此时类似添加了 visibility :hidden 声明。

四、定义轮廓

　　outline 属性定义块元素的轮廓线，在 CSS2 中被定义，但是没有获取广泛支持，CSS3 增强了该特性。

　　outline 是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

　　语法格式：

outline: [outline-color] | [outline-style] | [outline-width] | [outlineoffset] | inherit;

• <outline-color>：定义轮廓边框颜色；
• <outline-style>：定义轮廓边框轮廓样式；
• <outline-width>：定义轮廓边框宽度；
• <outline-offset>：定义轮廓边框偏移位置的数值；
• inherit：默认继承。

　　Tips：outline 属性创建的轮廓线是画在一个框“上面”，轮廓线总是在顶上，不会影响该框或任何其他框的尺寸。所有，显示或不显示不会影响文档流，也不会影响布局。

　　1、设置颜色

　　　　outline-color属性可以单独设置轮廓线的颜色。

　　　　语法格式：

outline-color: <color> | invert | inherit;

• • 　  <color>：可以是颜色名或者十六进制；
  • invert：执行颜色反正（逆向的颜色）。可以确保轮廓线在不同的背景颜色中都是可见的；
  • inherit：默认继承。

　　2、设置样式

　　　　outline-style 属性可以设置轮廓线的样式。

　　　　语法格式：

outline-style: auto | <border-style> | inherit;

• • 　   auto：根据浏览器自动设置；
  • <border-style>：采用边框的样式；
  • inherit：默认继承。
  • none：初始值。

　　3、设置宽度

　　　　outline-width 属性可以单独设置轮廓线的宽度。

　　　　语法格式：

outline-width:thin | medium | thick | <length> | inherit;

• • thin：定义细轮廓；
  • medium：定义中等的轮廓；（默认值）
  • thick：定义粗的轮廓；
  • <length>：定义轮廓粗细的值；
  • inherit：默认继承。

　　　　Tips：只有当轮廓样式不是 none 时，该属性才会起作用。

　　4、设置偏移

　　　　outline-offset 属性可以单独设置轮廓线的偏移位置。

　　　　语法格式：

outline-offset:<length> | inherit;

• • 　　<length>：定义轮廓距离容器的值；
  • inherit：默认继承。

五、定义多色边框

　　border-color 属性可以设置边框的颜色。CSS3 中使用该属性可以设置更多的颜色。

　　语法格式：

border-color:<color>;

　　CSS3 在这个属性上派生了4个边框颜色属性：

birder-top-color: 定义指定元素顶部边框的色彩。
birder-right-color: 定义指定元素右侧边框的色彩。
birder-bottom-color: 定义指定元素底部边框的色彩。
birder-left-color: 定义指定元素左侧边框的色彩。

　　Tips: 目前仅有 MOzilla Gecko 引擎支持 -moz-border-color 私有属性。

六、定义边框背景

　　border-image 属性来模拟 background-image 属性功能。

　　语法格式：

border-image:none | <image> [<number> | <percentage>] {1,4} [ / <border-width>]{1,4}

• • none：默认值，表示边框无背景图；
  • <image>：使用绝对或相对URl 地址指定边框的背景图像；
  • <number>：设置边框宽度或边框背景图图像大小，使用固定像素值表示；
  • <percentage>：设置边框背景图像大小，使用百分比表示。

　　Tips：该属性适用于所有元素，除了 border-collapse 属性值为 collapse 的 table 元素。

　　派生子属性1：

border-top-image:            定义顶部边框背景图像。
border-right-image:          定义右侧边框背景图像。
border-bottom-image:         定义底部边框背景图像。
border-left-image:           定义左侧边框背景图像。
border-top-left-image:       定义左上角边框背景图像。
border-top-right-image:      定义右上角边框背景图像。
border-bottom-right-image:   定义右下角边框背景图像。
border-bottom-left-image:    定义左下角边框背景图像。

　　派生子属性2：

border-image-source:          定义边框的背景图像源，即图像 URL;
border-image-slice:           定义如何裁剪背景图像，与背景图像的定位功能不同；
border-image-repeat:          定义边框被图像的重复性；
border-image-width:           定义边框背景图像的显示大小（即边框显示大小）；
border-image-outset:          定义边框背景图像的偏移位置；

　　Tips：webkit 引擎支持 -webkit-border-image 私有属性，Mozilla Gocko 引擎支持 -moz-border-image 私有属性； Presto 引擎支持 -o-border-image 私有属性。IE 浏览器暂时不支持 border-image 属性，也没有定义私有属性。