2018.8.27-2018.9.9的学习日记

（当时写这些的时候没想着往博客上写，这次重返博客，就把这些转移过来吧）

2018.8.27
onclick和addEventListener的区别

用法：
var clickdiv=document.getElementById('clickdiv');
clickdiv.οnclick=function(){
    alert("wugui");
}
clickdiv.addEventListener('click',function(e){
    alert("wugui");
},false); //true代表捕获时执行事件句柄，false代表冒泡执行事件句柄，默认false

区别:
推荐addEventListener
onclick会被后一个onclick覆盖，而addEventListener不会
addEventListener可以使用e参数对事件目标进行操作

——————————————————————————————————————————————————————————————————————————————————————————————————————————————-

2018.8.28
meta头的使用(charset,name="keywords/author/description")
适应移动端的写法：<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
js文件在代码末尾引用（</body>标签之前）（规范标准）
尽可能避免div嵌套，用p、span等标签代替（规范标准）
input 标签需要name 和id（id是唯一的，name可重复，但name有的作用id不可替代）
⭐⭐⭐⭐⭐⭐html5 imput date的使用（日期选择器！太强了！！！为什么没早点发现！！！）⭐⭐⭐⭐⭐⭐
input 不一定必须写在在form域中（数据提交到后台才需要）
css弹性布局（待了解）

——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

2018.8.29
出去玩了www

——————————————————————————————————————————————————————————————————————————————————————————————————————————————

2018.8.30
复习事件委托（maye这字怎么一大一小的）
详见2.html（实现单机按钮使按钮变色，并使其他按钮复原 ）
还不是很熟练www

————————————————————————————————————————————————————————————————————————————————————————————————————————

2018.8.31-9.1

wwwww忙着回学校什么事都没干wwwww
（第一天宅在宾馆，第二天宅在动车上，腰已经废了==）

————————————————————————————————————————————————————————————————————————————————————————————————————————————

2018.9.2
html路径
绝对路径：完整url组成
相对路径：如何引用上层文件夹下的文件：../../pic/1.png（每个..代表上一级，这里意思是引用上上一级的pic文件夹下的1.png图片）
？总结：一般来说，用相对路径指向本地站点的文件;用绝对路径指向其他站点的文件。（站点？留个疑问）

块级元素（div、p、form、ul等）可以设置width和height，而行内元素（span、b、li等）width、height、padding-top、padding-bottom、margin-top、margin-bottom无效
（https://blog.csdn.net/SyKent/article/details/7738408  该文表述了块级元素和行内元素的详细列表）
行内元素转换为块级元素： display：block；
块级元素转换为行内元素：display：inline；

（仅限了解，不推荐使用）在css样式里使用!important：使该样式属性占更高权重 例：background-color:blue !important;

伪类选择器（待了解）

rgb(0,0,0)：黑；rgb(255,255,255)白————越接近0颜色越深，越接近255颜色越浅！！！！！！（计算机图形学期末考弄错过一次orz）

overflow:默认visible；
(w3c官方解释，待理解）overflow-x和overflow-y的计算值跟给定的值相同，除了某些跟'visible'值的不合理组合：如果一个其中一个属性的值被赋为'visible'，而另一个被赋值为'scroll'或'auto'，那么'visible'会被重置为'auto'。overflow的计算值与overflow-x相等（如果overflow-y相同的话）；否则就是一对overflow-x和overflow-y的计算值

————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

2018.9.3

复习了下flex弹性布局

:hover样式失效问题：若干按钮同一类，点击其中一个按钮后再悬停到其他按钮:hover会失效
目前的解决办法：在hover后加更高优先级!important，实测解决，但联想先前不推荐使用!important，所以可以还要找其他方法

//摘抄www
css3为了区分伪类和伪元素，伪元素采用双冒号写法。
常见伪类——:hover,:link,:active,:target,:not(),:focus。
常见伪元素——::first-letter,::first-line,::before,::after,::selection。
::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。
这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。
所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标

——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

2018.9.4

毛玻璃效果（5.html）
css揭秘果然是本好书！！！！

（白天在课上分心做的摘抄）：
·css重置样式：normalize.css（待了解）
·响应式设计：指的是使用像媒体查询和弹性单位这样的技术来创建弹性Web页面或应用程序的布局。并且这些布局能适应不同尺寸的浏览设备。
·自适应设计：指的是任何设计允许网站自适应并且为不同能力的浏览器提供可接受的体验。
·响应式设计是自适应设计的子集。
·媒介查询 @media（待了解）
·css预处理器（待了解）
·calc（100% - 20px）可以进行不同单位之间的运算，注意+、-号前后要有空格，否则无效（感觉很常用）
·ch单位：表示“0”字形的宽度的单位（感觉也很有用）

去投了网易的前端，emmmm，说不定简历就要被刷下来了……

————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

2018.9.5

(摘抄，一直搞不清楚的absolute定位问题)
若想把一个定位属性为absolute 的元素定位于其父级元素内，只有满足两个条件， 
第一：设定TRBL （top、right、button、left属性）
第二：父级设定Position属性 

设置打字动画时的疑问：如何使中文字符(2ch)和英文字符(1ch)等宽？

花了半个晚上功夫想把html放到服务器上……怎么做呢

———————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

2018.9.6

花了一早上功夫研究在阿里云清轻量应用服务器上建立ftp，失败……

width:min-content  将解释为这个容器内部最大的不可断行元素的宽度（自适应，超好用！）

text-align的新理解：这个属性是用来控制块元素下的行内元素的，对块元素是无效的。所以想要使块元素居中则应该使用margin:0 auto;(记得要设置块元素的width，不然无效)

学习通过flex让页脚一直处于页面最下方(5.html)

设置虚线边框时，会发现内容会溢出到虚线区域，若要避免这个现象，就需要设置background-clip:padding-box;

——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

2018.9.7

摸了
（就白天看了下:target的选择器，貌似挺有意思，记一下）

——————————————————————————————————————————————————————————————————————————————————————————————————————————————————-

2018.9.8

（临时抱佛脚面对网易面试，不得不学一些数据结构、算法、js方面的知识）

js的bool判定：对象为true、非零数字为true、非空字符串为true、其他为false
表达式a  && 表达式b :  计算表达式a（也可以是函数）的运算结果，如果为 True, 执行表达式b（或函数），并返回b的结果；如果为 False，返回a的结果；
表达式a  || 表达式b :   计算表达式a（也可以是函数）的运算结果，如果为 False, 执行表达式b（或函数），并返回b的结果；如果为 True，返回a的结果；
如console.log(0||"doge");输出doge

对小数的处理办法：Math.floor()向下取整；Math.ceil()向上取整；Math.round()四舍五入；Math.parseInt()舍弃小数部分；

arr.map(function(){})：对数组内每个元素进行映射,如arr.map(Number);使数组内每个元素转换成数字
[a,b,c,d]=arr;可对单个变量对应数组直接赋值

JavaScript中 call和apply的描述（待了解）

（15：00-17：00）网易笔试达成

————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

2018.9.9

觉得想要速成前端知识，只能刷题了……（牛客网）
在牛客网做了一份前端卷（20道选择题），结果错了7道，里面有一些知识点都没见到过。

alt和title属性的区别：alt是当图片加载不出来后的替代文字，而title是鼠标移到图片上的解释文字；

DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
标准模式：根据规范呈现页面；
混杂模式：页面以一种比较宽松的向后兼容的方式显示。

css Sprites(css精灵，待详细了解)

js里apply和call的区别：调入参数方式不同，call逐个调入，apply调入数组或类数组
两者作用都是调用一个对象的方法，让另一个对象替代当前对象
可以起到继承的作用。