CSS3学习笔记---盒模型

在传统的CSS2.1盒模型中，通过声明width、height值来控制内容区域的宽度和高度，然后附加上内边距和边框等，称为内容盒摸模型。

外盒尺寸 = 元素空间尺寸

内盒尺寸 = 元素大小

W3C标准盒模型

height、width值为内容高度和宽度

element 空间高度 = 内容高度 + 内距 + 边框 + 外距

element 空间宽度 = 内容宽度 + 内距+ 边框 + 外距

element 高度 = 内容高度 + 内距 + 边框

element 宽度 = 内容宽度 + 内距+ 边框

IE传统盒模型

height、width值包含了元素的内容宽度、边框、内距

element 空间高度 = 内容高度 + 外距

element 空间宽度 = 内容宽度 + 外距

element 高度 = 内容高度

element 宽度 = 内容宽度

大部分元素遵循W3C标准的盒模型，但form中部分元素还是基于传统的盒模型，例如input中的submit、reset、button、select等

CSS3中 box-sizing属性

box-sizing属性值 效果

content-box W3C标准盒模型
border-box IE传统盒模型
inherit 继承父元素

外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似，但外轮廓线不占用网页布局空间，不一定是矩形，外轮廓是属于一种动态演示，只有元素取到交点或被激活时呈现。

outline属性语法

属性 效果

outline-color 定义轮廓线颜色
outline-style 定义轮廓线样式
outline-width 定义轮廓线宽度
outlint-offset 定义轮廓线的偏移位置，可以为正负值
inherit 继承父元素效果

outline与border对比

1. outline创建的轮廓线在元素各边上都相同，不能单独设置
2. 外轮廓线不占用网页布局空间，不一定是矩形
3. border可以单独设置，而outline始终是闭合的