很多时候, 文字和 input和button它们的 顶端是在同一条先上, 但是并不是 垂直居中对齐, 这个 就不好看.
其时有很多理论, 讲的也很复杂, 说什么文本 的top, middle ,baseline , bottom 四根线, 等等 那些我们都不管, 可以这样简单的理解:
-
把文本/input输入框/button等 都看作是放在 各自一个盒子中的东西, 默认的时候: 当它们在同一行中时, 这些盒子的顶端是对齐的, 即顶端是在同一根线上, 顶端是对齐的, 是盒子不一定是文本顶端对齐; 而且各自盒子 里面的东西(文字) 是在各自盒子的垂直中间的
-
但是, 问题的根本就在于 这些盒子的 高度 是不同的! 你可以想象一下, 不同高度的盒子, 盒子顶端放在一样高度时, 里面的东西都处于盒子的一半高度时, 盒子里的东西肯定不在同一个高度, 肯定是高的高, 低的低
-
那要解决盒子里面的东西(即各自的文字) 在同一个高度, 方法就是 : 让这些盒子的 高度都一样! 各个盒子的高度设置方法是:
-
对于单纯的文字, 所在的容器(盒子), 高度的设置就是设置 文本 的 行高! 即 line-height: .....px
-
对于input和按钮, 它们的高度, 没有具体的设置方法, 那就是在 firefox的 调试器的 相应html元素的 css的 computed标签页里面可以 得到的: 基本就是 = 自身文本height + 上下padding的和. 你可以根据相应元素的 css值计算, 也可以根据computed上的值 直观的相加得到
-
比如 bs的按钮的高度就是: 按钮中的文字的高度是 20px; 按钮内文字还有上下padding是6px, 所以按钮的高度就是 32px;
所以, 设置 文本所在的 span的 行高为 32px, 就刚好能保证 文本和button(实际上button中的文字)在(基本上, 不保证绝对)同一高度,就是在高度上基本垂直居中对齐. -
所以说, bs中的行高1.428, 基本上就是 20px, bs的文档中说的,
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）它说1/2行高(即10px), 就说明默认 的 行高是 20px;
其他高度尺寸 直接从调试器computed上看.
=========================================
原生的js事件中, window.onload(...) 其实就相当于jquery中的 document.ready(....), 或 $(function(){....}); 都是在html中的所有dom节点加载完成后才执行的...
js事件的 一个 参数 event, 其实是非常重要的, 它有很多属性,一定要引起足够的重视, 比如: event.timestamp, event.pageX .pageY; event.target/relatedTarget/currentTarget, .... e.stopPropagation, e.preventDefault,..等等
而event.target还有很多属性,比如:
e.target.nodeName,
e.target.className
e.target.id
e.target.innerHTML等等
js可以终止事件的冒泡, 但是能不能终止事件的捕获, 即事件在捕获阶段 能不能终止(向下)传播?? 答案是可以的! 即事件在从最顶层的容器元素(最不确定元素开始),向下传播的过程中
也是可以被终止的, 终止的方法也是 在 addEventListener()方法中, 使用e.stopPropagation()....
在js中 是没有 mousein方法的.
在js中有各种mouse事件和mouse处理事件方法, 但是 是没有 onmousein事件的, 在jquery中也没有 mousein(function(){..})事件处理函数. 当用 mousein的时候, 会报 "没有那样的函数"的错误. 事实上, 有"mouse in" 鼠标移入的事件和处理函数的是: onmouseover事件 和 mouseover方法处理函数.
dom的节点类型有:
主要有 元素节点/ 属性节点 /文本节点, 注释节点/文档节点
- 各种节点的获得方法:
元素节点: getElementById, ByTagName, ByClassName等等
属性节点: var eleNode; eldNode.getAttributeNode('attr_name');
文本节点: eleNode.firstChild - 各种类型的节点 都有 nodeName, nodeType, nodeValue属性:
对于elementNode: 比如一个div: 它的nodeName="DIV" nodeType=1 nodeValue=null
对于 attrNOde: 比如一个id/name/class/type等等属性: 他的 nodeName="class", nodeType=2, nodeValue="class_name"
对于text节点,它的名字是: #text nodeType=3 nodeValue="这些文本.内容..."
比如下面的例子:
<div theAttr="info">div文本节点</div>
<script>
var dv= document.getElementsByTagName('div')[0];
var dvattr = dv.getAttributeNode('theAttr');
let dvtext = dv.firstChild;
console.log(dv.nodeName +" "+ dv.nodeType +" " + dv.nodeValue);
console.log(dvattr.nodeName +" "+ dvattr.nodeType +" " + dvattr.nodeValue); // 这三行开始的时候,没有加空格进行分隔, 后来用的是 宏进行修改!
console.log(dvtext.nodeName +" "+ dvtext.nodeType +" " + dvtext.nodeValue);
</script>
// 输出结果:
DIV 1 null test.html:20:1 注意 , 只有元素节点的 nodeName是 大写的, 其他都是小写的...
theattr 2 info test.html:21:1
#text 3 div文本节点
vim中的宏?
- 宏 实际上用的是 vim的寄存器 (vim双引号 是寄存器, 单引号是 标记 mark 位置), 宏就是 把指令集 存在一个寄存器中的!
宏在什么时候使用?? 任何功能都是因为 实际需求而 诞生的: - 在有多行 结构和内容 都相同或相似的多行中, 要进行相同的修改操作的时候, 如果这时一行一行地修改就非常麻烦了, 那么在这种场景下, 就要使用宏操作了
- 录制宏是使用 q+寄存器名 + 操作集 + q
使用宏 是 用 @寄存器名
使用宏的要点 : 名行的结构和内容一定要相同或相似; 要准确的指定 录制宏和 使用宏的 插入点位置! 否则就会错乱..
=======================================
ES6是什么?
ES6 是指 ECMA的ECMAScript 也是 javascript的 第六版,ecma是: Europe computer manufacture associate: 欧洲计算机制造商协会. 是一个计算机行业的标准制定组织. 是在日内瓦, 跟其他几个计算机行业标准组织位置在一起,包括iso等.
ES6 有很多新的特性..
- css3的 pointer-events属性有: none , 和 auto . none指定当前元素 不是鼠标事件的对象, 在该元素上不会接收 鼠标事件.
当然要想 鼠标"穿透" 上面这层, 下层(上面元素的子元素) 接收 鼠标事件, 也必须指定下层的 子元素的 pointer-events属性为auto, 是不是 这个属性的 继承性???
// 这个时候, 点击链接a是没有用的, 无效的,因为绝对定位层遮盖住它了... (绝对定位层的父元素的position: 不能是static!)
<div id="outer" style=" 400px; height:400px; background: #abc; position: relative;">
outer
<div id="inner" style=" 200px; height:200px; background: transparent; position: absolute; left: 0px; top:0px;">
</div>
<a href="http://www.abc.com">click jump</a> // 不加http:表示的是 站内链接, 会在本站点内寻找....
</div>
//// 这个是在父节点加了 pointer-events: none, 子节点加了 pointer-events: auto后的可以点击的效果, 注意 父节点和子节点 都要加这个属性才能生效!
<div id="outer" style=" 400px; height:400px; background: #abc; position: relative;pointer-events: none;">
outer
<div id="inner" style=" 200px; height:200px; background: transparent; position: absolute; left: 0px; top:0px;">
</div>
<a href="http://www.abc.com" style="pointer-events: auto;">click jump</a>
</div>
=============================================