前端问题汇总

2018-09-02 约 1889 字预计阅读 4 分钟次阅读条评论

如何让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文件自身的编码。

参考链接

赞赏支持

微信打赏

支付宝打赏

目录