noHup - html
type: channel
link: http://www.nohup.cc/tag/html/
items: PhosphoPrediction项目总结-前端

PhosphoPrediction项目总结-前端
type: item
date: 2015-11-19T03:33:00+00:00
description: Overview1. 长字符串自动换行的问题2.关于margin和padding3. 居中 Overview PhosphoPrediction这个项目是我们两个开发的第一个项目，整体进度比较快，但是因为是第一次，很多小细节花了不少的时间，当然，每一次细节的修改都有新知识的补充。 这里我主要记录下前端的一些知识点以备后面项目使用。 1. 长字符串自动换行的问题 在结果页面中，我们不只在页面上显示了预测结果，还将原始序列，Native Disorder等信息显示在了页面，由于这些序列特别长，所以在显示的时候就会出现一些问题，比如会显示为一个不换行的序列，导致页面出现了横向滚动条，非常不美观。 我们希望这个长序列可以在超出容器大小的时候自动换行，而不是把容器撑大。 解决方法： 给盛放长字符串内容的容器(可以是 或者 等)添加下面的样式： 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就是容器的内边距，就是容器的内容距这个容器的距离。border就是这个容器的边，图上画的比较大就是为了突出一点显示而已。 3. 居中 通常，为了美观，我们不会将页面的内容以100%的宽度铺在浏览器中，而是在左右各留出一段空白，在中间显示内容。 我们可以在 标签中，使用一个 ，为这个div添加下面的样式： width: 80%; height: 100%; margin-left:auto; margin-right: auto; 可以看出，我们将这个 宽度设置成上层容器（这里就是 ）的80%，这样 和 中间就有20%的空白。 我们将 的外边距设置成auto,浏览器会自动设置，让 在 中居中，也就是在左右两边各留10%的空白。 注意，这里的margin一定不要使用具体的数值，原因是在一个屏幕上可能留100px的左边空白就可以居中，而在更大的屏幕上100px可能不能让内容在屏幕的正中央。