2020-07-03 html的文章阅读进度条 + css的行内元素 + JS的undefined与referenceerror + 5G对于前端的影响

2020-07-03 题目来源：http://www.h-camel.com/index.html

[html] 请实现阅读文章的进度条

html 和 css 只能实现样式和效果
阅读进度条这种偏静态，可以根据元素的offset高度、元素高度、滑动距离来实现
var content_offtop = $('.article-content').offset().top;
var content_height = $('.article-content').innerHeight();
$(window).scroll(function () {
     if (($(this).scrollTop() > content_offtop)) { //滑动到内容部分
         if (($(this).scrollTop() - content_offtop) <= content_height) { //在内容部分内滑动
            this.reading_p = Math.round(($(this).scrollTop() - content_offtop) / content_height * 100);
         } else { //滑出内容部分
            this.reading_p = 100; //确保进度条铺满
         }
     } else { //未滑到内容部分
         this.reading_p = 0; //确保进度条不显示
     }
     $('.reading-bar').css('width', this.reading_p + '%');
});

[css] 行内元素可以设置padding 和 margin吗

块级元素： 结构性标记
<address>...</adderss>   
<center>...</center>  地址文字
<h1>...</h1>  标题一级
<h2>...</h2>  标题二级
<h3>...</h3>  标题三级
<h4>...</h4>  标题四级
<h5>...</h5>  标题五级
<h6>...</h6>  标题六级
<hr>  水平分割线
<p>...</p>  段落
<pre>...</pre>  预格式化
<blockquote>...</blockquote>  段落缩进   前后5个字符 40PX
<marquee>...</marquee>  滚动文本
<ul>...</ul>  无序列表
<ol>...</ol>  有序列表
<dl>...</dl>  定义列表
<table>...</table>  表格
<form>...</form>  表单
<div>...</div>

行内元素： 一般为描述性标记
<span></span>
<a>超链接</a>
<br>换行
<b>加粗</b>
<strong>加粗</strong>
<img alt = "图片" />
<input /> 文本框
<sup>上标</sup>
<sub>下标</sub>
<i>...</i>  斜体
<em>...</em>  斜体
<del>...</del>  删除线
<u>...</u>  下划线
<input>...</input>  文本框
<textarea>...</textarea>  多行文本
<select>...</select>  下拉列表

行内元素的padding 与 margin：
1. 行内元素是可以设置 padding 与 margin 属性的，但margin属性对于行内元素不会起到作用的；
2. 行内元素的padding-left 与 padding-right 会起到作用, 而padding-top 与 padding-bottom徒有其表

 

 

[js] undefined与Reference Error:xxx is not defined 有什么区别

Reference Error:xxx is not defined 表明 变量 没有被定义
undefined 表明 变量 已经被定义并初始化赋值为undefined，但是没有被赋值

 

 

[软技能] 5G对于前端的机遇和挑战

https://blog.csdn.net/qq_41224512/article/details/100097671