前端工程师手册

当前文档 《前端工程师手册》 由 进击的皇虫 使用 书栈(BookStack.CN) 进行构建,生成于 2018-07-17。 书栈(BookStack.CN) 仅提供文档编写、整理、归类等功能,以及对文档内容的生成和导出工具。 文档内容由网友们编写和整理,书栈(BookStack.CN) 难以确认文档内容知识点是否错漏。如果您在阅读文档 获取知识的时候,发现文档内容有不恰当的地方,请向我们反馈,让我们共同携手,将知识准确、高效且有效地传递 给每一个人。
展开查看详情

1.

2. 目 录 致谢 介紹 HTML/CSS基础 HTML常用标签 HTML语义化 DOCTYPE和浏览器渲染模式 理解DOM结构 HTML5新增内容 常用CSS属性 盒模型 CSS普通流(文档流) CSS定位方式 CSS浮动相关 CSS选择器 CSS常见布局 CSS书写与命名 CSS3新增特性 常用meta整理 什么是Viewport HTML/CSS进阶 自定义字体 CSS基线 CSS动画 前端UI框架 Bootstrap学习指南 JavaScript基础 作用域问题 运算符的优先级 变量对象 undefined与null的区别 内置对象与原生对象 关于函数 立即执行函数 闭包 事件机制 3原型继承 本文档使用 书栈(BookStack.CN) 构建 - 2 -

3. 3详解this 3在JavaScript中一切都是对象吗? 3DOM操作 3JSON对象 JavaScript进阶 理解作用域链 Callback问题 Promise 模板引擎 Underscore ES6 Base64编码与解码 JavaScript面向对象 封装 继承 JavaScript设计模式 单例模式: Singleton 编写JavaScript框架 框架结构 JavaScript模块管理 模块化简介 模块依赖管理工具对比 AMD UMD requireJS 入门使用 压缩优化 JavaScript数据结构 数据类型 JavaScript异步编程 常见的异步模式 什么是Promise Promise规范 Promise实战 Async控制异步流程 EventProxy控制异步流程 JSDeferred控制异步流程 JavaScript正则表达式 本文档使用 书栈(BookStack.CN) 构建 - 3 -

4. 基本语法 实用案例 jQuery相关 jQuery事件注册和取消 获取元素在DOM中的顺序 Deferred对象 jQuery代码技巧 jQuery源码分析 源码构建 理解架构 GSAP相关 常见问题 网络相关 常见HTTP状态码 web缓存机制 404页面 跨域问题 同源策略 iframe自适应 WebService解决方案 JSONP 调试与测试 Blackbox Mocha测试框架 前端自动化 项目目录组织 自动化流程 yeoman yo bower gulp gulp插件选择 yeoman参考案例 SPA 什么是SPA 单页面SEO解决方案 开发无框架单页面应用 可伸缩的同构Javascript代码 本文档使用 书栈(BookStack.CN) 构建 - 4 -

5. PJAX 理解架构 前后端分离 一个简单粗暴的前后端分离方案 UI 关于Retina 响应式图片 响应式字体 中文字体 移动端字体 响应式设计原则 中文排版的规范 移动端尺寸 UX 页面滚动条出现时不跳动 使用渐进式JPEG来提升用户体验 动画相关 动画类型 跟动画有关的数学和物理公式 缓动原理与实现 常用动画效果与缓动 SVG动画 原理性质 JavaScript的加载与执行 单线程的Javascript 浏览器解析介绍 v8引擎 浏览器渲染 JS动画性能 Repaint和Reflow URL编码与解码 字体的渲染 2图片格式的优缺点 性能优化 编码规范 JavaScript代码最佳实践 移动H5前端性能优化指南 浏览器渲染性能优化 本文档使用 书栈(BookStack.CN) 构建 - 5 -

6. 开发和部署前端代码 优化网络请求 页面提速方法 Chrome开发者工具的使用 JavaScript内存优化 javascript事件优化 页面滚动性能 canvas渲染性能 web开发中的坑or技巧 排版兼容性问题 浏览器报错 iPad的bug合集 addEventListener与handleEvent关系 localStorage的使用 移动端fixed布局 touch事件 处理输入事件 触摸和鼠标在一起 如何延时触发事件 数组的操作 对象的操作 mobile设备的横竖屏切换检测 生成随机数字 setTimeout的误区 好用的原生API操作 前端面试 前端技能图谱 前端知识点 原则与技巧 html/css面试题 JavaScript面试题 jQuery面试题 网络相关面试题 面试题集合 参考资料 图书资料 视频教程 设计方向 本文档使用 书栈(BookStack.CN) 构建 - 6 -

7. 2S库 CSS相关库 Bootstrap资料 移动开发框架 Loading动画 辅助工具 本文档使用 书栈(BookStack.CN) 构建 - 7 -

8.致谢 致谢 当前文档 《前端工程师手册》 由 进击的皇虫 使用 书栈(BookStack.CN) 进行构建,生成于 2018-07- 17。 书栈(BookStack.CN) 仅提供文档编写、整理、归类等功能,以及对文档内容的生成和导出工具。 文档内容由网友们编写和整理,书栈(BookStack.CN) 难以确认文档内容知识点是否错漏。如果您在阅读文档 获取知识的时候,发现文档内容有不恰当的地方,请向我们反馈,让我们共同携手,将知识准确、高效且有效地传递 给每一个人。 同时,如果您在日常工作、生活和学习中遇到有价值有营养的知识文档,欢迎分享到 书栈(BookStack.CN) , 为知识的传承献上您的一份力量! 如果当前文档生成时间太久,请到 书栈(BookStack.CN) 获取最新的文档,以跟上知识更新换代的步伐。 文档地址:http://www.bookstack.cn/books/front-end-database 书栈官网:http://www.bookstack.cn 书栈开源:https://github.com/TruthHun 分享,让知识传承更久远! 感谢知识的创造者,感谢知识的分享者,也感谢每一位阅读到此处的读者,因为我们 都将成为知识的传承者。 本文档使用 书栈(BookStack.CN) 构建 - 8 -

9.介紹 介紹 front-end-database 原文: https://leohxj.gitbooks.io/front-end-database/content/index.html 本文档使用 书栈(BookStack.CN) 构建 - 9 -

10.HTML/CSS基础 HTML/CSS基础 HTML/CSS 基础知识 罗列一些基础内容。 资料 学习资料可以参考HTML Dog以及Learn HTML & CSS。 详细的文档内容,推荐参考WebPlatform和MDN。 关于属性的兼容性,可以通过Can I Use查询。 原文: https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/index.html 本文档使用 书栈(BookStack.CN) 构建 - 10 -

11.HTML常用标签 HTML常用标签 HTML常用标签 div div标签用于组合其他HTML元素,本身无实在意义。常用于页面的布局,比如一个展开式的广告页面框架大致如下: 1. <body> 2. <div id="wrap-container"> 3. <div id="collapsed-container"></div> 4. <div id="expanded-container"></div> 5. </div> 6. </body> h1~h6, p, span, strong, em… 此类标签用于设置文本,常见的使用方式是填充段落,比如弹出的legal框文字HTML结构如下: 1. <div id="legal-window"> 2. <h4>LEGAL</h4> 3. <img id="legal-close" src="img/embed/legal-close.png" alt="close window"> 4. <p>*Requires a system with Intel<sup>&reg;</sup> Turbo Boost Technology. Intel<sup>&reg;</sup> Turbo Boost Technology and Intel<sup>&reg;</sup> Turbo Boost Technology 2.0 are only available on select Intel<sup>&reg; </sup> processors. Consult your PC manufacturer. Performance varies depending on hardware, software, and system configuration. For more information, visit http://www.intel.com/go/turbo. Copyright &copy; 2014 Intel Corporation. All rights reserved. Intel, the Intel logo, Intel Core, Look Inside, Intel Inside, and Pentium are trademarks of Intel Corporation in the U.S. and/or other countries. Other names and brands may be claimed as the property of others.</p> 5. </div> ul, li, ol, dl, dt, dd 此类标签用于设置带有列表内容的,比如导航栏的下拉菜单,多视频的缩略图等: 1. <ul class="nav-tools-list"> 2. <li> 3. <div> 4. <img src="shoppingtools-icon-1.png" alt=""> 5. <span>Build & Price</span> 6. </div> 7. </li> 8. <li> 9. <div> 10. <img src="shoppingtools-icon-2.png" alt=""> 本文档使用 书栈(BookStack.CN) 构建 - 11 -

12.HTML常用标签 11. <span>Incentives & Offers</span> 12. </div> 13. </li> 14. <li> 15. <div> 16. <img src="shoppingtools-icon-3.png" alt=""> 17. <span>Request a Local Quote</span> 18. </div> 19. </li> 20. <li> 21. <div> 22. <img src="shoppingtools-icon-4.png" alt=""> 23. <span>Search Dealer Inventory</span> 24. </div> 25. </li> 26. </ul> form表单相关 页面中涉及到表单时候,需要使用到form相关标签: 1. <form name="frm-sample" class="frm-sample" action="try" method="post"> 2. <input type="text" class="form-control" placeholder="Name"> 3. <div id="status-message"></div> 4. <div id="sample-captcha"></div> 5. <a id="check-is-filled" class="info-btn">Check if visualCaptcha is filled</a> 6. <button type="submit" name="submit-bt" class="submit">Submit form</button> 7. </form> table表格相关 页面中涉及到table结构,需要使用到table相关标签: 1. <talbe></talbe> img, canvas 用于图像显示。一般不直接操作img,canvas元素,而是在它的外层包裹一层父级元素(可以为span,div等),对父 级元素进行操作: 1. <div class="preload" data-src="CheddarBacon.png"> 2. <img src="CheddarBacon.png" alt=""> 3. </div> 4. <!-- or --> 5. <div id="sprite-car" class="cw-sprite sprite-car" cw-interval="30" cw-loops="1" cw-auto-play="false" cw- texture="images/sprites/expanded/car-texture.png" cw-mapper="car"> 6. <canvas class="cw-renderer" width="460" height="130"></canvas> 本文档使用 书栈(BookStack.CN) 构建 - 12 -

13.HTML常用标签 7. </div> a a标签用于打开链接,发送邮件,段落跳转等功能。使用时需要注意阻止掉标签的默认事件。 链接跳转,常见的关于分享按钮的HTML结构如下: 1. <div id="shareBox"> 2. <ul> 3. <li id="facebook"> 4. <a target="_blank" rel="nofollow" data-shareWay="facebook"> 5. <img alt="Post on Facebook" src="img/embed/f4Icon3.png" alt="Facebook" /> 6. </a> 7. </li> 8. <li id="twitter"> 9. <a target="_blank" rel="nofollow" data-shareWay="twitter"> 10. <img alt="Tweet this" src="img/embed/f4Icon4.png" /> 11. </a> 12. </li> 13. <li id="pinterest"> 14. <a data-pin-do="buttonPin" data-pin-config="none" target="_blank" rel="nofollow" data- shareWay="pinterest"> 15. <img alt="Pin it" src="img/embed/f4Icon5.png" /> 16. </a> 17. </li> 18. <li id="email"> 19. <a target="_blank" rel="nofollow" data-shareWay="email"> 20. <img src="img/embed/f4Icon6.png" /> 21. </a> 22. </li> 23. </ul> 24. <p></p> 25. </div> 发送邮件的代码片段如下: 1. <div class="button"> 2. <a class="mail" data-img="mail.png" href="mailto:example@gmail.com?subject=xxx&body=xxx"></a> 3. </div> 段落跳转代码片段如下: 1. <div id="html5"></div> 2. <a name="user-content-html5" href="#html5" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a> HTML5标签查询 本文档使用 书栈(BookStack.CN) 构建 - 13 -

14.HTML常用标签 W3School: 点击查询 原文: https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/common-tag.html 本文档使用 书栈(BookStack.CN) 构建 - 14 -

15.HTML语义化 HTML语义化 HTML语义化 语义化的含义就是用正确的标签做正确的事情,html语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解 析;在没有样式CCS情况下也以一种文档格式显示,并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各 个关键字的权重,利于 SEO。使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。 参考资料 semantic-html 关于语义化 HTML 以及前端架构的一点思考 如何理解 web 语义化 原文: https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/semantic-html.html 本文档使用 书栈(BookStack.CN) 构建 - 15 -

16.DOCTYPE和浏览器渲染模式 DOCTYPE和浏览器渲染模式 DOCTYPE和浏览器渲染模式 文档类型,一个文档类型标记是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析 器,它应该使用什么样的文档类型定义(DTD)来解析文档。Doctype还会对浏览器的渲染模式产生影响,不同的渲 染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析,所以Doctype是非常关键的,尤其是在 IE 系列浏览器中,由DOCTYPE 所决定的 HTML 页面的渲染模式至关重要。 浏览器解析HTML方式 有三种解析方式: 非怪异(标准)模式 怪异模式 部分怪异(近乎标准)模式 在“标准模式”(standards mode) 页面按照 HTML 与 CSS 的定义渲染,而在“怪异模式(quirks mode) 模式”中则尝试模拟更旧的浏览器的行为。 一些浏览器(例如,那些基于 Mozilla 的 Gecko 渲染引擎的, 或者 Internet Explorer 8 在 strict mode 下)也使用一种尝试于这两者之间妥协的“近乎标 准”(almost standards) 模式,实施了一种表单元格尺寸的怪异行为,除此之外符合标准定义。 一个不含任何 DOCTYPE 的网页将会以 怪异(quirks) 模式渲染。 HTML5提供的 <DOCTYPE html> 是标准模式,向后兼容的, 等同于开启了标准模式,那么浏览器就得老老实实的按照 W3C的标准解析渲染页面,这样一来,你的页面在所有的浏览器里显示的就都是一个样子了。 参考资料 DOCTYPE和浏览器渲染模式 CS002: DOCTYPE 与浏览器模式分析 怪异模式(Quirks Mode)对 HTML 页面的影响 原文: https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/doctype-and-brower-render.html 本文档使用 书栈(BookStack.CN) 构建 - 16 -

17.理解DOM结构 理解DOM结构 理解DOM结构 DOM: Document Object Module, 文档对象模型。我们通过JavaScript操作页面的元素,进行添加、移动、改 变或移除的方法和属性, 都是DOM提供的。 W3C DOM 标准 被分为 3 个不同的部分: 核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标准模型 HTML DOM - 针对 HTML 文档的标准模型 DOM节点 根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是注释节点 HTML DOM 节点树 HTML文本会被解析为DOM树, 树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素(节点)均可被 修改,也可以创建或删除节点。 本文档使用 书栈(BookStack.CN) 构建 - 17 -

18.理解DOM结构 节点的关系 父(parent)、子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称 为同胞(兄弟或姐妹): 在节点树中,顶端节点被称为根(root) 每个节点都有父节点、除了根(它没有父节点) 一个节点可拥有任意数量的子 同胞是拥有相同父节点的节点 参考资料 W3C: Document Object Model (DOM) Technical Reports MDN: DOM API 浏览器的工作原理:新式网络浏览器幕后揭秘 开发者需要了解的WebKit 理解WebKit和Chromium: HTML解析和DOM HTML解析原理 原文: https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/learn-dom-tree.html 本文档使用 书栈(BookStack.CN) 构建 - 18 -

19.HTML5新增内容 HTML5新增内容 HTML5新增内容 HTML5 是对 HTML 标准的第五次修订。其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提 供更好地支持各种媒体的嵌入。HTML5 的语法是向后兼容的。现在国内普遍说的 H5 是包括了 CSS3, JavaScript 的说法(严格意义上说,这么叫并不合适,但是已经这么叫开了,就将错就错了)。 与HTML 4的不同之处 文件类型声明()仅有一型:。 新的解析顺序:不再基于SGML。 新的元素:section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr。 input元素的新类型:date, email, url等等。 新的属性:ping(用于a与area), charset(用于meta), async(用于script)。 全域属性:id, tabindex, repeat。 新的全域属性:contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck。 移除元素:acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt。 新增标签 HTML 5提供了一些新的元素和属性,反映典型的现代用法网站。其中有些是技术上类似 <div> 和 <span> 标签,但 有一定含义,例如 <nav> (网站导航块)和 <footer>``<audio> 和 <video> 标记。 移除的标签 一些过时的HTML 4标记将取消,其中包括纯粹用作显示效果的标记,如 <font> 和 <center> ,因为它们已经被 CSS取代。还有一些通过DOM的网络行为。 修改的标签 尽管和SGML在标记上的相似性,HTML5的句法并不再基于它了,而是被设计成向后兼容对老版本的HTML的解析。它有 一个新的开始列看起来就像SGML的文档类型声明, <!DOCTYPE HTML> ,这会触发和标准兼容的渲染模式。在2009年1 月5号,HTML5添加了Web Form 2.0的内容,html5开始发展起来。 无障碍(Accessibility) 本文档使用 书栈(BookStack.CN) 构建 - 19 -

20.HTML5新增内容 为了使HTML5的新元素或新属性获取最大化的兼容性,开发人员需要附加一点额外补助,或者有些特性根本没有被任 何浏览器实现,或者浏览器根本不支持补助技术。因此有些特殊的HTML5特性根本不能使用。更多细节可参见HTML5 Accessibility(无障碍) 新应用程序接口(API) 除了原先的DOM接口,HTML5增加了更多样化的API: HTML Geolocation HTML Drag and Drop HTML Local Storage HTML Application Cache HTML Web Workers HTML SSE HTML Canvas/WebGL HTML Audio/Video 总结 最后奉上一张图片: 本文档使用 书栈(BookStack.CN) 构建 - 20 -

21.HTML5新增内容 参考资料 维基百科: html5 MDN: HTML5 W3Schools: Learn HTML5 知乎: HTML5 到底是什么? 原文: https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/what-is-html5.html 本文档使用 书栈(BookStack.CN) 构建 - 21 -

22.常用CSS属性 常用CSS属性 常用CSS属性 本文档使用 书栈(BookStack.CN) 构建 - 22 -

23.常用CSS属性 本文档使用 书栈(BookStack.CN) 构建 - 23 -

24.常用CSS属性 原文: https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/common-use-css-property.html 本文档使用 书栈(BookStack.CN) 构建 - 24 -

25.盒模型 盒模型 盒模型 盒模型(box model)是CSS中的一个重要概念,它是元素大小的呈现方式。需要记住的是:"every element in web design is a rectangular box"。如图: CSS3中新增了一种盒模型计算方式: box-sizing 熟悉。盒模型默认的值是 content-box , 新增的值是 padding- box 和 border-box ,几种盒模型计算元素宽高的区别如下: content-box(默认) 布局所占宽度Width: Width = width + padding-left + padding-right + border-left + border-right 布局所占高度Height: Height = height + padding-top + padding-bottom + border-top + border-bottom padding-box 布局所占宽度Width: Width = width(包含padding-left + padding-right) + border-top + border-bottom 布局所占高度Height: 本文档使用 书栈(BookStack.CN) 构建 - 25 -

26.盒模型 Height = height(包含padding-top + padding-bottom) + border-top + border-bottom border-box 布局所占宽度Width: Width = width(包含padding-left + padding-right + border-left + border-right) 布局所占高度Height: Height = height(包含padding-top + padding-bottom + border-top + border-bottom) margin叠加 外边距叠加是一个相当简单的概念。 但是,在实践中对网页进行布局时, 它会造成许多混淆。 简单的说, 当两个 或更多个垂直边距相遇时, 它们将形成一个外边距。这个外边距的高度等于两个发生叠加的外边距的高度中的较大 者。但是注意只有普通文档流中块框的垂直外边距才会发生外边距叠加。 行内框、 浮动框或绝对定位框之间的外边 距不会叠加。 一般来说, 垂直外边距叠加有三种情况: 元素自身叠加 当元素没有内容(即空元素)、内边距、边框时, 它的上下边距就相遇了, 即会产生叠加(垂 直方向)。 当为元素添加内容、 内边距、 边框任何一项, 就会取消叠加。 相邻元素叠加 相邻的两个元素, 如果它们的上下边距相遇,即会产生叠加。 包含(父子)元素叠加 包含元素的外边距隔着 父元素的内边距和边框, 当这两项都不存在的时候, 父子元 素垂直外边距相邻, 产生叠加。 添加任何一项即会取消叠加。 参考资料 CSS-TRICKS:The CSS Box Model CSS Magic: The Box 原文: https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/box-module.html 本文档使用 书栈(BookStack.CN) 构建 - 26 -

27.CSS普通流(文档流) CSS普通流(文档流) CSS普通流(文档流) 首先明确一点的是,W3C规范中没有 document flow 这个概念,只有normal-flow, 文档流的叫法主要还是多数中 文译者的翻译方式问题。 定义 什么是普通流?简单说就是元素按照其在 HTML 中的位置顺序决定排布的过程。并且这种过程遵循标准的描述。 调节普通流元素位置 一般使用margin是用来隔开元素与元素的间距;padding是用来隔开元素与内容的间隔。margin用于布局分开元素 使元素与元素互不相干;padding用于元素与内容之间的间隔,让内容(文字)与(包裹)元素之间有一段“距离”。 只要不是float和绝对定位方式布局的,都在普通流里面。 参考资料 normal-flow CSS定位机制之一:普通流 原文: https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/css-normal-flow.html 本文档使用 书栈(BookStack.CN) 构建 - 27 -

28.CSS定位方式 CSS定位方式 CSS定位方式 display属性 每一个元素都有默认的display属性,使用最多的是 block , inline 和 inline-block ,不常用的是 table- cell 。 根据display属性,我们可以将元素分为块级元素(block)和内联级元素(inline)。它们最大区别是: block 元素 可以设置宽度,独占一行。 inline 元素宽度由内容决定,与其他元素并列在一行。 常见的block属性元素有: div, h1-h6, ul, li, ol, dl, dd, dt 。 常见的inline属性元素有: span, a, em 。 block 宽高可以自行设置,默认宽度由父容器决定,默认高度有内容决定。自己独占一行。 inline 宽度和高度都有内容决定,与其他元素共占一行。 inline-block 宽度可以自行设置,类似block,但是与其他元素共占一行,类似inline。长用于设置垂直居中。 table-cell 此属性指让标签元素以表格单元格的形式呈现,单元格有一些比较特殊的属性,可以设置元素的垂直居中等。 position属性 元素在页面中的布局遵守一套文档流的方式,默认的定位属性值为 static 。它其实是未被设置定位的。 元素如果被定位了,那么它的 top,left,bottom,right 值就会生效,能设置定位的属性 是 relative , absolute 和 fixed 。 需要注意的另一点是被定位的元素层次( z-index )会得到提高。 relative(相对定位) 本文档使用 书栈(BookStack.CN) 构建 - 28 -

29.CSS定位方式 设置了相对定位之后,通过修改 top,left,bottom,right 值,元素会在自身文档流所在位置上被移动,其他的元素则不 会调整位置来弥补它偏离后剩下的空隙。 absolute(绝对定位) 设置了绝对定位之后,元素脱离文档流,其他的元素会调整位置来弥补它偏离后剩下的空隙。元素偏移是相对于是它 最近的设置了定位属性( position 值不为static)的元素。 且如果元素为块级元素( display 属性值为 block ),那么它的宽度也会由内容撑开。因为: 默认文档流中块级元素如果没有设置宽度属性,会自动填满整行。 fixed(固定定位) 设置了固定定位之后,元素相对的偏移的参考是可视窗口,即使页面滚动,元素仍然会在固定位置。 参考资料 CSS 相对|绝对(relative/absolute)定位系列(一) CSS 相对/绝对(relative/absolute)定位系列(二) CSS 相对/绝对(relative/absolute)定位系列(三) CSS 相对/绝对(relative/absolute)定位系列(四) CSS相对定位|绝对定位(五)之z-index篇 displaytable-cell的应用 margin系列详析 原文: https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/css-position.html 本文档使用 书栈(BookStack.CN) 构建 - 29 -