前端问题汇总
如何让input文本框和图片对齐
在默认情况下，input文本框和图片无法自然对齐，总会有所偏差，文本框往往会比图片要往下边一点，只要给元素添加vertical-align:bottom即可令两者底部水平对齐，代码如下：
1 2 | <input type="text" style="vertical-align:bottom"> <img src = "images/露琪亚.jpg" width = "50%" height = "50%" alt = "露琪亚" title = "死神里的露琪亚" style="vertical-align:bottom"> |
|---|
另外还可通过vertical-align的其他属性进行垂直布局。
如何设置透明度属性
1 2 3 4 5 6 7 8 | <!-- IE8 以及更早的版本 --> filter:alpha(opacity=50); <!-- 火狐浏览器 --> -moz-opacity:0.5; <!-- Konqueror浏览器 --> -khtml-opacity: 0.5; <!-- 所有浏览器都支持的一个css属性 --> opacity: 0.5; |
|---|
如何通过选中文字来勾选/取消复选框
想要在选中文字的时候就自动勾选或取消复选框，有两种实现的方式：
方式一：在复选框的外边包上label标签
1 | <label><input type="checkbox">233333333</label> |
|---|
方式二：通过label标签的for属性来联动某一个复选框
1 2 | <input type="checkbox" id="check1"> <label for="check1">55555555555</label> |
|---|
另外，当复选框和文字无法对齐的时候，可以在复选框里添加style="vertical-align: sub;"来实现对齐。
如何屏蔽双击选中文本
IE浏览器可以通过在某个标签里添加onselectstart="return false"来屏蔽双击选中文本，该属性在火狐中无效，火狐需要用style="-moz-user-select:none;"。此外还可以在body里添加该属性来实现整个网页都无法选中文字。
类似的属性属性还有：
- 禁止鼠标右键：
oncontextmenu="return false" - 禁止拖放：
ondragstart="return false" - 禁止拷贝：
oncopy=document.selection.empty() - 禁止复制：
oncopy = "return false" - 禁止保存：
<noscript><iframe src="*.htm"></iframe></noscript>，放在head里面。 - 禁止粘贴：
<input type=text onpaste="return false"> - 禁止剪贴：
oncut = "return false" - 关闭输入法：
<input style="ime-mode:disabled">
文本自动换行问题
当行内出现很长的英文单词或者url的时候，会出现自动换行的问题，为了美化页面，往往会希望这些很长的英文单词或者url能够断开来，超出的部分换行到下一行。
可以通过使用两个属性来实现该需求：
1 2 | word-wrap:break-word; word-break:break-all; |
|---|
word-wrap
word-wrap用来控制换行，有两种取值：
- normal
- break-word（此值用来强制换行，内容将在边界内换行，中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。）
word-break
word-break用来控制断词，有三种取值：
- normal
- break-all（是断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题。）
- keep-all（是指Chinese, Japanese, and Korean不断词，一句话一行，可以用来排列古诗哟~）
文本溢出控制
单行溢出
text-overflow是CSS3中的属性，规定了文本溢出后的显示样式，但它不会强制文本溢出，所以有时候会不生效。该属性支持的值如下：
clip：默认值，将溢出的文本裁减掉ellipsis：将溢出的文本用省略号(…)来表示<string>：设置一个字符串用来表示溢出的文本
兼容性上，除了<string>外，其余两个属性兼容到了IE6+，所以大可放心使用。
为了让该属性生效，解决方法如下：
1 2 3 4 | width: 100%; /*也可以是固定值、min-width这些*/ white-space: nowrap; /*强制文本不能换行*/ overflow: hidden; /*隐藏溢出内容*/ text-overflow: ellipsis; |
|---|
多行溢出
通过display: -webkit-box;可以实现多行溢出：
1 2 3 4 5 6 7 | width: 100%; overflow: hidden; word-break: break-all; /*允许在单词内换行，更美观*/ text-overflow: ellipsis; display: -webkit-box; /*元素作为box伸缩盒子*/ -webkit-line-clamp: 3; /*设置文本行数限制*/ -webkit-box-orient: vertical; /*设置文本排列方式*/ |
|---|
JS文件中的中文在网页上显示为乱码
如果页面已经设置了<meta charset="utf-8">，JS文件里的中文在网页上仍然显示为乱码，可能是由于JS文件的编码问题导致的。
JS文件本身的编码默认为ANSI编码，而引入该JS文件的页面则使用了utf-8编码，所以导致了中文乱码。解决方法是将该JS文件自身的编码改为utf-8编码，可以借助常用的编辑器比如Nodepad++或者Editplus等来修改JS文件自身的编码。
参考链接
警告
本文最后更新于 January 26, 2021，文中内容可能已过时，请谨慎使用。
腾讯云开发者
