容易使人蒙圈的几个经典问题

得一说），这些CSS问题平时很少遇到，即使遇到后也不一定知道解决方案，即使知道解决方案也不一定知道产生的原理，同时也准备了2个JS问题（之前有整理过一篇较长的JS问题文章，在此不做推新）。本文会更新下去，希望帮到各位朋友。期待您的点赞，谢谢。

一、CSS篇

1.1 元素默认蓝色边框

input标签元素（如button、text 、areatext）的一些事件（如click、focus等），在很多浏览器下默认会有蓝色边框出现，如把一个普通button的background和border都设置为none后，触发点击后样式如下：
 

景透明，文字不透明

我们通常是使用 opacity来做背景的透明化处理，该属性被所有浏览器支持，可以大胆使用，透明度从0.0（完全透明）到1.0（完全不透明），但该方法会使其所有子元素都透明，此时若只想让背景透明，其他不透明，则可以使用rgba处理背景：


 

种现象产生的原因是img是行内元素，浏览器为下行字符（如：g、y、j、p、q）留下的一些空间，这些字符是会比其他字符多占据底部一些空间（具体以当前字体大小有关），这种规则会影响行内元素img标签（其默认垂直对齐方式是依照基线来的，即vertical-align: baseline），同样行内元素都会和外部元素留这么一丢丢安全距离。上图右侧就是加了文字的效果，这样就更说明一切了。

现在我们知道这种现象主要是由于下行字符串保护机制和img是行内元素这两个因素导致的，那解决方案就从这两处入手，整理如下：

1.  div设置font-size: 0或line-height: 0，进而行高为0；
2.  img设置 vertical-align: top 或者 middle/，使其不再以默认基线为对齐方式；
3.   mg设置 display:block，使其变成块级元素。

综上，个人认为方法3是最好用的，方法1不推荐使用。

1.4 元素自动填充上背景色

该现场多在表单输入等场景上会出现，初次看到确实很怪异，效果如图：

（编辑：唐山站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!