CSS盒模型

• 边框border九种样式（可用border-（right|left|top|bottom）-style：表示）
  • none
  • dotted 细虚线
  • dashed 宽虚线
  • solid 实心
  • double
  • groove
  • ridge
  • inset
  • outset
• 边框border颜色可以用border-（right|left|top|bottom）-color：定义
  • 可以将边框定义缩写顺序为：边框宽度、边框样式、边框颜色，用border。中间用空格隔开。
• 内边距padding
  • 内边距虽有间距，但背景色是其颜色，无单独颜色。
  • 例：一个div的width（宽）：100px。如果增加了padding-left左内边距10px，则总宽度width会显示110px，为了让宽度不变，在增加10px时，100px也应同时设为width：90px。则总宽度不变，不影响总体宽度，top，right，bottom同理。
• 外边距margin
  • 同边框和内边距有相同的属性（right|left|top|bottom）
  • margin属性设置的缩写的编写顺序：上右下左。
  • margin后可不足四个：如
    • • • • 1）margin：2em    所有边都为2 
          • 2）margin：1em  2em  上下为1  左右为2  
          • 3）margin：1em  2em  3em  上为1  左右为2  下为3
• 通用规则
  • 外边距总是透明的
  • 元素可以有负边距
  • 正常文档流中的相邻块级元素的垂直外边距将会重合，即相邻两个块级元素之间的空白将会是两个元素的外边距中较大的那一个，而不是两个外边距和
  • 浮动元素、据对定位元素和内嵌元素，垂直外边距不会重合。
  • css2中，水平（left和right）外边距不会重合
  • 对内嵌文本类型的内嵌元素，设置顶部和底部外边距不会影响行高，而设置左右外边距将会导致内嵌元素的第一个字符之前，和最后一个字符之后保留一定的数量空间。
  • 对于图形以及表单输入元素等类型的内嵌元素，设置顶部和底部边距将会影响行高。
• 高度和宽度
  • width和height可设置块级元素或内嵌可替换元素（如image）的大小。
  • 不适合于内嵌文本元素（不可替换元素），除非用display属性将其变成块级元素。
• 正常文档流
  • 在正常流中：块级元素从上到下依次排列，而内嵌元素从左到右一次排列。
  • 正常流中的元素影响其周围的内容（相邻元素）的位置。
  • 通过浮动或定位，可以将元素从正常文档流中脱离出来，从而实现更复杂的布局。