《CSS 权威指南》笔记(四)

第七章 基本视觉格式化

  1. 基本框

    1. 内边距不能是负值
    2. 外边距可以是负值
    3. 边框的宽度绝对不能为负
  2. 包含块

    包含块是一个元素的『布局上下文』,包含块由最近的块级祖先框、表单元格或行内块祖先框的内容边界(content edge)构成。非行内元素的布局依赖于包含块,行内元素的摆放方式并不直接依赖于包含块。

  3. 一些概念

    1. 正常流

      传统HTML文档的文本布局,要让一个元素不在正常流中,唯一的方法就是使之成为浮动或定位元素。

  4. 块级元素

    1. 水平格式化『7大属性』:margin-left、 border-left、 padding-left、 width、 padding-right、 border-right、 margin-right
    2. 只有3个属性可以设置auto:分别为width、 margin-left、 margin-right。若3个属性都设置为非auto的某个值——格式化属性过分受限,此时总会把margin-right强制为auto(对于从左向右读得语言)。若3个属性都设置为auto,两个外边距都会设置为0,width会尽可能宽。若某个外边距及width设置为auto,设置为auto的外边距会减为0。
    3. 负外边距。7个水平属性的总和要等于父元素的width
  5. 百分数

    混合使用百分数和长度单位,可能会很麻烦

  6. 替换元素

    对于替换元素,如果widthauto,元素的宽度则是内容的固有宽度,除非制定特定值覆盖这个规则。在未显示同时指定width、height情况下,宽高比保持不变。

  7. 垂直格式化(类比水平格式化)

    值得注意的是margin-top、margin-bottom设置为auto,会自动计算为0,使元素没有外边距,而不会垂直居中。将元素垂直居中的唯一办法就是把上下外边距都设置为25%

  8. 合并垂直外边距(*)

  9. 行内元素

  10. 垂直对齐(vertical-align)

  11. 缩放行高

    设置line-height最好方式是使用一个原始数字值,因为这个数会成为缩放因子,该因子是一个继承值而非计算值,会在元素间逐层传递。

第八章 内边距、边框和外边距

  1. 百分数值定义相对于父元素的width。这不仅应用于左右外边距,也应用于上下外边距。
  2. 值复制

    CSS定义了一些规则,允许为外边距指定少于4个值。规则如下:

    • 如果缺少做坐边距的值,则使用有外边距的值。
    • 如果缺少做下边距的值,则使用有上边距的值。
    • 如果缺少做右边距的值,则使用有上边距的值。
  3. 正常流中垂直相邻边距会合并
  4. 外边距和行内元素

    外边距只影响行内非替换元素的左右边距。因为外边距不会改变一个元素的行高。

  5. 边框和行内元素

    不论为行内元素指定怎样的宽度,元素的行高都不会改变,但由于边框是可见的,所以将会绘制出来。左右边则是另外一回事,如果应用一个左边框或右边框,不仅该边框可见,切文本不会被覆盖。

第九章 颜色和背景

  1. 选择的类名最好描述其中包含的信息类型,而不是你想要达到的视觉效果。
  2. 前景:元素的文本,还包括元素周围的边框。设置元素的前景色,最容易的方法是利用属性color
  3. color可以继承
  4. background-color background-image不能继承
  5. background-position背景定位(背景和元素中心点对齐)
  6. background-attachment关联,fixedscroll

(完)

(最后修改于2015-10-14)

Table of Contents