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

基本元素框

宽度和高度

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

外边距和内边距

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


margin:<length>|<percentage>|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同样具有值复制

推荐阅读更多精彩内容