CSS权威指南读书笔记-内边距、边框和外边距

基本元素框

宽度和高度

• 一个元素的width被定义为从左内边界到右内边界的距离，同样height也是。该属性不能用于行内非替换元素
  width：||auto|inherit
  百分数是相对于包含块的width
  height：|auto|inherit
  百分数是相对于包含块的height计算

外边距和内边距

外边距会在元素周围创建额外的空白，“空白”通常指不能放其他元素的区域，而且这个区域可以看到父元素的背景

---

margin：||auto{1,4}|inherit

百分数相对于包含块的width

长度值和外边距

margin设置长度时按照上右下左的顺序（即顺时针方向）

百分数和外边距

百分数是相对于父元素的width计算的，所以如果父元素的width以某种方式改变，百分数也会发生改变
*** 注意： 百分数值的定义相对于父元素的width，不仅用于左右外边距还用于上下外边距***
这样设计是因为正常情况下大多数元素会足够高以包含其后代元素（包括其外边距）如果一个元素的上下外边距是其父元素height的一个百分数，就可能导致一个无限循环（父元素的height增加，以适应后代元素的外边距增加，而相应的上下外边距又必须增加，因为父元素的height增加了）

• 可以混合的使用百分数和长度值，比如margin:10px 5% 10px 5%

值复制

• 如果缺少左外边距的值，则使用右外边距的值
• 如果却上下外边距的值，则使用上外边距的值
• 如果缺少右外边距的值，则使用上外边距的值
  简单来说就是如果指定了三个值，那么第四个值即左外边距的值会从第二个值，也就是右外边距的值复制；如果指定了两个值，那么第四个值会从第二个复制，第三个值会从第一个复制；如果指定了一个值，那么其他三个值会复制这个值
  比如：
  h1{margin：0.25em 0 0.5em}等于0.25 0 0.5em 0
  h1{margin:5px 10px } 等于 5px 10px 5px 10px
  h1{margin：15px} 等于15px 15px 15px 15px

单外边距属性

margin-top|margin-bottom|margin-left|margin-right

负外边距和合并外边距

正常流中垂直相邻外边距会合并

外边距和行内元素

向一个行内非替换元素应用外边距，它对行高没有影响。但对于左右外边距是生效的。

• 左外边距应用到元素的开始位置，右外边距应用到元素的结束位置，而不是行的两侧，特别是在元素跨行的情况下。外边距只是通过改变元素内容在行中起点的位置来影响换行。
• 对于负外边距会导致元素与左右两边元素重叠
• 对于替换元素，设置外边距会影响行高，左右外边距的情况与非替换元素的情况一致

---

边框border

• 边框宽度的默认值是medium，通常是2px
• 边框默认的样式是none 所以默认看不到边框
• 边框颜色是元素本身的前景色，如果没有声明边框颜色，它与文字颜色相同如果一个元素没有任何文本，那边框与父元素文本颜色相同，因为color可以继承
• 元素的背景会延伸到边框边界之外，边框绘制在元素背景之上，因此对于虚线等样式的边框，可以看到透明部分的背景颜色。

有样式的边框

border-style：none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|{1,4}inherit

• 样式hidden等价于none，不过应用于表格除外，对于表，hidden用于解决边框冲突
• 对于double 其定义为两条线加直接的空隙宽度等于定义的border-width宽度
  将边框设置为outside使元素看起开像一个凸起按钮
• 边框样式依然按照顺时针顺序设置，可以设置为border-style:solid dashed dotted solid
• 简写方法同外边距
• 可以单独设置某一边的样式，比如border-top-style

边框宽度

• border-width：thin|medium|thick|length
• 同样具有单边属性，border-top-width
• border-width同样具有值复制