CSS3学习笔记---盒模型

CSS 盒模型

CSS盒模型解析模式

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

2. 外盒尺寸 = 元素空间尺寸

   内盒尺寸 = 元素大小

3. W3C标准盒模型

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

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

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

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

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

4. IE传统盒模型

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

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

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

   element 高度 = 内容高度

   element 宽度 = 内容宽度

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

6. CSS3中 box-sizing属性

   box-sizing属性值 效果

   ---

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

CSS外轮廓属性

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

2. outline属性语法

   属性 效果

   ---

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

3. outline与border对比

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