您的位置: 首页  >  IT文章  >  怎样让一行中的 文字 input输入框 按钮button它们在同一个高度上? 它们中的文字 是 垂直居中对齐

怎样让一行中的 文字 input输入框 按钮button它们在同一个高度上? 它们中的文字 是 垂直居中对齐

分类: IT文章 • 2022-07-20 19:11:32

很多时候, 文字和 input和button它们的 顶端是在同一条先上, 但是并不是 垂直居中对齐, 这个 就不好看.

其时有很多理论, 讲的也很复杂, 说什么文本 的top, middle ,baseline , bottom 四根线, 等等 那些我们都不管, 可以这样简单的理解:

  1. 把文本/input输入框/button等 都看作是放在 各自一个盒子中的东西, 默认的时候: 当它们在同一行中时, 这些盒子的顶端是对齐的, 即顶端是在同一根线上, 顶端是对齐的, 是盒子不一定是文本顶端对齐; 而且各自盒子 里面的东西(文字) 是在各自盒子的垂直中间的

  2. 但是, 问题的根本就在于 这些盒子的 高度 是不同的! 你可以想象一下, 不同高度的盒子, 盒子顶端放在一样高度时, 里面的东西都处于盒子的一半高度时, 盒子里的东西肯定不在同一个高度, 肯定是高的高, 低的低

  3. 那要解决盒子里面的东西(即各自的文字) 在同一个高度, 方法就是 : 让这些盒子的 高度都一样! 各个盒子的高度设置方法是:

  • 对于单纯的文字, 所在的容器(盒子), 高度的设置就是设置 文本 的 行高! 即 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 >
    outer
    <div >
    </div>
  <a href="http://www.abc.com">click jump</a>     // 不加http:表示的是 站内链接, 会在本站点内寻找....
  </div>

//// 这个是在父节点加了 pointer-events: none, 子节点加了 pointer-events: auto后的可以点击的效果, 注意 父节点和子节点 都要加这个属性才能生效!

  <div >
    outer
    <div >
    </div>
  <a href="http://www.abc.com" style="pointer-events: auto;">click jump</a>
  </div>

=============================================

相关推荐