《高级web标准解决方案》——笔记1

第一章

• 拆分类 让代码更加“组件化” 简化代码 避免大量添加类

• div 实现区域分割，添加结构；对块级元素分组。
  （应该使用div根据条目的意义或功能，而不是边线方式或布局，对相关条目进行分组）

• span 对行内元素进行分组或者标识

• 微格式 ？？

• DOCTYPE声明 有效性验证；浏览器模式（标准模式、混乱模式）；切换；

第二章

• 伪类：链接伪类 动态伪类
  链接伪类： :link :visited(锚元素）
  动态伪类： :hover :active :focus (鼠标悬停效果）

• 通用选择器 *

• 高级选择器
  子选择器：父元素下的一层级的子元素 例子：div>span （和后代选择器有区别） ；
  属性选择器：可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

• 层叠规则
  *重要度次序：1.标有！important的用户样式
  2.标有！important的作者样式
  3.作者样式
  4.用户样式
  5.浏览器/用户代理应用的样式
  *特殊性
  截图1

• 在body上增加类和ID，之后在主体元素上增加类名，覆盖样式。

• 使用类标识页面类型，使用ID标识特定页面。

• 继承

• 代码的结构
  一 一般性样式

  1. body样式
     2.reset样式（重置默认样式？？）
     3.链接 a
     4.标题 title
     5.其他元素
     二 辅助样式
     1.表单
     2.通知和错误
     3.一致的条目
     三 页面结构
     1.标题、页脚和导航
     2.布局
     3.其他页面结构元素
     四 页面组件
     各个页面
     五 覆盖

第三章

• 盒模型 如何显示和如何交互

• 外边距叠加 只有普通文档流发生后，行内框、浮动框或绝对定位框之间的外边距不会叠加

• 可视化格式模型
  规定了用户端在媒介中如何处理文档树（document tree）

• 布局影响因素：box的尺寸和类型；定位体系（常规流，浮动，absolute）；document tree中，元素之间的关系；外部信息（窗口，图片的故有尺寸，会影响行内替换元素的尺寸）

• 视口
  即可视窗口。当可视窗口的尺寸大小改变时，浏览器应该改变文档的布局。比如，有些值是依赖于可视窗口的大小的，DIV width的auto值，等等。
  当可视窗口的尺寸小于文档渲染的画布（也就是页面）的大小时，浏览器应该提供滚动机制。每个画布最多有一个可视窗口。但是，浏览器可以同时渲染多个画布。也就是说，浏览器可以打开多个页面，但是每个页面最多只有一个可视窗口。

• 匿名块框

• 相对定位：相对于起点移动；仍然占据原来的空间！；可以看作普通流定位模型的一部分。

• 绝对定位：与普通流定位无关，空间消失；相对于距离它最近的已经定位的祖先元素决定，如果没有祖先元素，则相对于初始包含块。可以覆盖其他元素，与z-index有关，值越高，位置就越高；需要固定尺寸，避免重叠。

• 固定定位

• 浮动：脱离文档流，不影响不浮动的元素，但是文本行框会围绕浮动框
  浮动元素脱离了文档流，所以包围图片和文本的div不占据空间。可以在其中添加一个空元素并且清除浮动。