css:the definitive guide

规范

• HTML规范指定，块级元素不可以嵌套在行内元素中，而CSS没有这种限制，可以通过display来改变两个元素的显示角色，这完全是合法的。

整理

css 和 hmtl 结合的方法

• link 标签
• @import指令（没有link好，不要用）
• 在head里面加上style元素
• 内联样式（HTML的style属性）

伪类顺序

link - visited - focus - hover -active
link visited称为静态伪类，hover,focus,active为动态伪类，可以应用到任何元素

伪类和伪元素

所有伪元素必须放在出现该伪元素的选择器的最后面

特殊性 继承 层叠

• 特殊性 内联样式1000、 id100、 类，属性选择器，伪类10 、元素，伪元素1、结合符（，[分组]， 空格 [后代选择器]，+[相邻兄弟选择器]，>[子代选择器]），通配符特殊性为0
• 不是所有的样式都可以继承，继承的样式没有特殊性
• 层叠规则 ！important 《 特殊性 《 顺序（import 》 link 》 style）

web 安全颜色

指在256色计算机系统上总能避免抖动的颜色 0 3 6 9 C F

长度单位

三个相对长度单位 em ex px

• em 指 em-height 等于font-size的大小
• ex 指 x-height 时字体中小写x的高度（大多数字体没有内置ex高度值）

字体

font-face指特定的字体风格，font-family是一个字体体系，通过字体系列，font属性（字体的简写属性）
字体的样式（系列【family】，加粗【weight】，变形【varient】）都是通过匹配字体完成的

文本属性

• line-height 应用于任何元素（理解什么是行内框，什么是内容框【em框】，行框，行间距，基线，缩放因子【1.5】）
• vertical-height top，bottom相对于行内框，text-top，text-bottom相对于em框
• word-spacing【字间距】， letter-spacing【字母间距】，white-space【处理字之间和文本行的空白方式，如nowrap，单行显示】

基本视觉格式化

• 水平格式化
  当margin-left，width，margin-right都被设置为固定的值的时候，这些格式化属性过分受限（overcontrained），会把margin-right强制为auto，然后根据auto的规则来计算对应的值
• 垂直格式化
  • 在正常流中一个块元素的margin-top或margin-bottom设置为auto，它会自动计算为0
  • 垂直相邻外边距合并，这种合并行为只应用于外边距，如果元素有内边距和边框，它们绝不会合并（在包含块上设置边框和内边距时，会使其子元素的外边距包含在包含块内）
• 行布局
  • 概念（匿名文本，em框字符框，内容区，行间距，行内框 line-height，行框）
  • 行内框的高度由内联元素的line-height决定，当行中出现替换元素，替换元素可以增加行内框的高度，当不改变line-height的值，替换元素的vertical-align会影响该行的行内框高度
  • 内联元素的垂直padding，margin改变不了内容区的具体形状，而是影响了行内框的高度，而不影响行高，替换元素的内边距，边框，外边距会增加其行内框

浮动

• 包裹性
• 脱离文档流
• 浮动元素周围的外边距不会合并
• 生产一个块级框
• 浮动元素会延伸，从而包含其所有后代浮动元素
• clear 用法

绝对定位元素

• 概念 静态位置
• 元素的绝对定位为其后代元素建立了一个包含块
• 放置和大小 由TRBL，margin，width决定
  • 当绝对定位元素的大小在水平方向上过度受限，会忽略right值
  • 当绝对定位元素的大小在垂直方向上过度受限，会忽略bottom值

（文中提到，只有top可取静态位置，bottom不可以。不懂）

相对定位

如果相对定位过度受限，一个值会重置为另一个值的相反数。如top：10px，bottom：30px;bottom会被重置为-10px;

表

• 匿名的表对象会采取对象插入
• 边框合并规则 border-style:hidden < border-width < border-style:double solid dashed dotted ridge outset groover inset < color :cell row row-group column column-group table < border-style:none;
• 表大小 fixed 可以更快计算出表的大小

生成内容

• 如果：before或：after选择器的主体是块级元素，则display属性只接受值none，inline，block，marker。其他值都处理为block
• 如果：befor或：after选择器的主体是一个行内元素，则display属性只接受值none和inline。所有其他都处理为inline

用户界面样式

• outline 轮廓不像边框那样参与到文档流中，因此轮廓出现或消失时，不会影响文档流，即不会导致文档的重新显示

注意

• text-align应用于块级元素，影响一个元素中的文本行相互之间的对齐方式，无法实现将行内元素中的锚居中对齐，而不影响行内的其他元素
• 一般的，一个元素的子元素绘继承该元素的计算值，像line-height可以继承缩放因子
• 水平外边距不会合并
• 元素的7项水平属性的总格不能比其包含块更宽。
• em长度单位与font-size有关系，浏览器默认的font-size为16px，当设定height为6em时，计算值为96px;
• 图像也是行内元素，但图像也是替换元素
• magin padding 的百分数都是相对于包含块的width去计算的
• 边框的颜色默认是字体的颜色
• 设定背景图像的同时最好设置一个背景颜色
• visibility：hidden (元素还是会影响文档的布局，就好像它还可见一样)
  display：none（元素不仅仅不显示，还会从文档中删除）

quesition

• 支持hove属性的用户待敌在锚处于悬停状态时必须重绘文档，这就是要求重新显示该链接之后的所有内容。不过，CSS规范指出，文档第一次显示之后，用户代理不必重绘文档，所以你不能完全依赖预想的效果。