2021 年 04 月第 5 周

学习笔记

这周的进度：

JavaScript 不想赶了，稍微休息一下吧……难得放假（叹气

HTML

书-H5 权威指南

主要就是讲了一些用于段落组织内容的标签，包含：

• p
• div
• pre
• blockquote
• hr
• ol
• ul
• li
• dl
• figure

稍微细节一点的描述在这里：HTML5 权威指南第 9 章 组织内容 学习笔记，不过说实话，最近「H5 权威指南」的章节都是在讲元素，应该就是参考部分了

CSS

书-精通 CSS

本周的内容是第 7 章 页面布局，我将主要内容分隔成了两个部分：

• 精通 CSS 第 7 章学习笔记（上）

  上的内容以「精通 CSS 高级 Web 标准解决方案（第三版）」中 7.1 和 7.2，布局规划 与 创造灵活的页面布局的内容总结和案例学习

  以浮动模式为基础，进行渐进增强（向上兼容），添加 flexbox 进行页面优化

  并且使用了上面描述的特性，实现了一个页面的布局的案例

• 精通 CSS 第 7 章学习笔记（下）

  下的内容以「精通 CSS 高级 Web 标准解决方案（第三版）」中 7.3 Grid Layout（网格布局）为基础，讲了网格布局的一些基础知识，以及将上面的案例用网格布局重新实现了。

  感觉代码只用了一半就完成了网格布局……

CSS 视频

隐藏的三种方式：

• display，不再占位
• visibility，有占位
• overflow，溢出的内容，有定位的盒子慎用

CSS 的高级使用技巧：

1. 精灵图

   目的：为了有效减少服务器接收和发送请求的次数，提高页面加载的速度。

   核心：主要针对 长期不会变更的 背景图片的使用，将多个小图片整合到一张大图片中

   方法：通过 x 轴和 y 轴控制图片的背景位置，选择可显示页面

2. 字体图标

   优点：

   轻量级：属于文字，减少服务器请求；

   灵活性：本质上属于文字，可以更改颜色、阴影

   兼容性：高，基本所有浏览器都支持

   iconfont 有两个大的网站，商用标准还是要自己查看一下的：

   • icomoon

     这是国外的一个 iconfont 网站，视频中的用法是下载下来本地挂载

   • iconfont

     阿里家的，可以建一个项目库，然后让 iconfont 去 host

3. 鼠标样式的改变，例：cursor: pointer；

4. 表格的修改

   • 边框的改变，例：outline: none;
   • 文本与大小的修改： 例：resize: none;

5. vertical-align 的应用，只针对行内块元素有效，可以使元素垂直对齐

6. 图片底部空白缝隙

   原因是因为图片作为行内块格式，默认使用基线对其。这里可以使用修改 vertical-align 去除多雨的白色区域。

   或者将图片改为块级元素——图片不作为行内块元素就不会出现这个问题。

7. 溢出的文字用省略号代替

   • 单行：

     .text-overflow {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }
     

   • 多行

     有兼容性问题

     .text-overflow {
       overflow: hidden;
       text-overflow: ellipsis;
       /* 兼容性问题 */
       /* flexbox 模型显示 */
       display: -webkit-box;
       /* 限制在一个块元素显示的文本的行数 */
       -webkit-line-clamp: 2;
       /* 设置或检索 flexbox 的子元素的排列方式 */
       -webkit-box-orient: vertical;
     }
     

8. 布局技巧

   • margin 负值的使用，解决边框问题
   • 可以用 display:relative; 提高定位，或使用 z-index
   • 擅用行内块元素完成布局——例如说 pagination

9. 三角形小技巧

   • 等腰三角形
   • 直角三角形

10. CSS 初始化

    • 重设浏览器样式

    • 中文字体用相应的 Unicode 编码代替

      CSS 的初始化部分可以看这里：CSS 初始化的两种常见方法。分别是 Eric Meyer 写的 CSS rest 的源码，以及 Nicolas Gallagher 写的 Normalize.css 的源码，和其他的使用方法

完整的对应案例在这里：CSS 的十个高级使用技巧

JS

书-红宝书

完成了第 6 章集合引用类型的一半内容：对象和数组，剩下的一半只能搬到下周继续了

其中数组的笔记如下：

• JavaScript 数组详解

• JavaScript 中 reduce 及 6 个使用案例

  reduce 部分是真的挺有意思的，特别是 pipeline 这个案例，觉得以后开发中应该能够满经常的用到的

• JavaScript 实现堆和栈

JS 视频

我还在想为什么视频看了这么久，然后才发现看多了……

到这周结束的话，DOM 节点的增删改查也学完了，笔记在：JavaScript 中 DOM 元素的基础操作 学习笔记。