Overview

PhosphoPrediction这个项目是我们两个开发的第一个项目,整体进度比较快,但是因为是第一次,很多小细节花了不少的时间,当然,每一次细节的修改都有新知识的补充。
这里我主要记录下前端的一些知识点以备后面项目使用。

1. 长字符串自动换行的问题

在结果页面中,我们不只在页面上显示了预测结果,还将原始序列,Native Disorder等信息显示在了页面,由于这些序列特别长,所以在显示的时候就会出现一些问题,比如会显示为一个不换行的序列,导致页面出现了横向滚动条,非常不美观。
我们希望这个长序列可以在超出容器大小的时候自动换行,而不是把容器撑大。
解决方法:
给盛放长字符串内容的容器(可以是<div>或者<td>等)添加下面的样式:

word-wrap : break-word;
word-break: break-all;

这两个属性就是为了处理长字符串自动换行而存在的,break-word表示一个长句子换行时,在两个单词之间出现换行,而不会把一个单词断开换行,比如有一个句子I am a student from China!,换行的时候会变成

I am a
student from
China!

或者

I am a
student
from
China!

但是,不会出现下面的换行

I am
a stud
ent from
China!

也就是说,word-wrap : break-word;会保持单词的完整性,让每个单词都在同一行,然后产生换行。通常情形下,这样做是好的选择,美观又不影响阅读。但是,如果一个单词特别长呢,比如一个100个字母的单词出现了,而这个容器宽度只能容纳50个字母,那应该怎么断行?依然不会断行,这个长单词就会把容器撑大,让它的宽度变成100个字母的长度。
很不幸,我们处理的序列就是这样的情况,序列长度通常有几百个字母甚至更多,而且中间没有空格。
这时候我们需要word-break: break-all;,从字面意思就可以看出,强制一切换行,超出容器宽度,就自动换行。例子就不举了,看一下服务器的结果页面就可以看到效果。

2.关于margin和padding

这两个属性对于页面布局的细节调整非常的重要,比如说页面的页边距,容器内部内容跟容器的边距等等。
用一幅图就可以直观地表示:

margin-padding.jpg

margin就是一个容器的外边距,是这个容器离包含它的容器的距离;而padding就是容器的内边距,就是容器的内容距这个容器的距离。border就是这个容器的边,图上画的比较大就是为了突出一点显示而已。

3.<div>居中

通常,为了美观,我们不会将页面的内容以100%的宽度铺在浏览器中,而是在左右各留出一段空白,在中间显示内容。
我们可以在<body>标签中,使用一个<div>,为这个div添加下面的样式:

width: 80%;
height: 100%; 
margin-left:auto;
margin-right: auto;

可以看出,我们将这个<div>宽度设置成上层容器(这里就是<body>)的80%,这样<body><div>中间就有20%的空白。 我们将<div>的外边距设置成auto,浏览器会自动设置,让<div><body>中居中,也就是在左右两边各留10%的空白。
注意,这里的margin一定不要使用具体的数值,原因是在一个屏幕上可能留100px的左边空白就可以居中,而在更大的屏幕上100px可能不能让内容在屏幕的正中央。