很多時候, 文字和 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="width: 400px; height:400px; background: #abc; position: relative;">
outer
<div id="inner" style="width: 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="width: 400px; height:400px; background: #abc; position: relative;pointer-events: none;">
outer
<div id="inner" style="width: 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>
=============================================