《高级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不占据空间。可以在其中添加一个空元素并且清除浮动。

你可能感兴趣的:(css)