自动布局算法

1. DIV+CSS 如里在里面自动分行！

1.你定死表格的宽度，即给表格一个宽度值（是数值，不是百分比）
2.强制不换行
div{
//white-space：不换行;normal 默认;nowrap强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象
white-space:nowrap; }

自动换行
div{
word-wrap: break-word;
//word-break设置强行换行;normal 亚洲语言和非亚洲语言的文本规则，允许在字内换行
word-break: normal;
}

强制英文单词断行
div{
word-break:break-all;
}
3.总结了一下，只要在CSS中定义了如下句子，可保网页不会再被撑开了。
table{table-layout: fixed;}
td(word-break: break-all; word-wrap:break-word;)
注释一下：
1.第一条table{table-layout: fixed;}，此样式可以让表格中有!!!(感叹号)之类的字符时自动换行。
2.td{word-break: break-all}，一般用这句这OK了，但在有些特殊情况下还是会撑开，因此需要再加上后面一句(word-wrap:break-word;)就可以解决。此样式可以让表格中的一些连续的英文单词自动换行。

(1)语法：
word-break : normal | break-all | keep-all
参数：
normal : 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行
break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本
(2)语法：
word-wrap : normal | break-word
参数：
normal : 允许内容顶开指定的容器边界
break-word : 内容将在边界内换行。如果需要，词内换行（word-break）也行发生
说明：
设置或检索当当前行超过指定容器的边界时是否断开转行。
对应的脚本特性为word-wrap。请参阅我编写的其他书目。
(3)语法：
table-layout : auto | fixed
参数：
auto : 默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢
fixed : 固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关
说明：
如何让表格自动换行？
设置或检索表格的布局算法。
对应的脚本特性为tableLayout。

4.按照网上大多数文章的说法，只要在CSS中加入：
代码
..........
Code:
table {<br />
table-layout:fixed;word-break:break-all;word-wrap:break-word;}<br />
div{word-break:break-all;word-wrap:break-word;}
就可以解决表格和层被撑破，最初我也是这样做的。不过这样的代码会造成一个问题，你会发现英文词全部被截断了，这不符合英语的书写习惯也不利于阅读。
后来我发现上述代码改写一下就可以做到既防止表格/层撑破又防止单词断裂了。
如下：
代码
Code:
table {
table-layout: fixed;
word-wrap:break-word;
}
div {
word-wrap:break-word;
}
这也是现在我用的代码。

2. 有什么东西能导致sdautolayout无法自动布局

所谓自动布局，其实就是将手动布局的计算过程抽象出一套算法，然后利用约束模型收集view的宽高左右等各个维度对应的数据，最后在恰当的时机根据约束计算出view的frame。

了解了这个基本原理之后，我们就可以动手设计一个自动布局库了。在设计自动布局库的过程中，我们主要需要解决以下几个问题：

3. Altium Designer 6.9自动布线时布局的问题

1. 阵列粘贴。阵列形式为circular，步进角度分别为360°/5以及360°/9。

2. 相信自动布线，不如相信母猪会上树。

3. 自动布线一般不要设置成布弧形。AD的布线器算法拙劣算不过来。

4. 这么几根线，自己手动布多好，轻松&愉快。

4. word-break：break-all和word-wrap：break-word的区别

word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。

它们的区别就在于：

1，word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。

2，word-wrap:break-word 例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。

3，word-break;break-all 支持版本：IE5以上 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本。 WORD-WRAP:break-word 支持版本：IE5.5以上 内容将在边界内换行。如果需要，词内换行( word-break )也将发生。表格自动换行，避免撑开。 word-break : normal | break-all | keep-all 参数： normal : 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行 break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本 keep-all : 与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本 语法： word-wrap : normal | break-word 参数： normal : 允许内容顶开指定的容器边界 break-word : 内容将在边界内换行。如果需要，词内换行（word-break）也行发生说明：设置或检索当当前行超过指定容器的边界时是否断开转行。

对应的脚本特性为wordWrap。请参阅我编写的其他书目。 语法： table-layout : auto | fixed 参数： auto : 默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢 fixed : 固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关说明：设置或检索表格的布局算法。对应的脚本特性为tableLayout。

建议：word-break 用3C检测会显示问题的，导致网络快照也会出问题-这个属性OPERA FIREFOX 浏览器也不支持 word-break属性可以用white-space:normal;来代替，这样在FireFox和IE下就都能正确换行，而且要注意，单词间的空格不能用 来代替，不然不能正确换行。

5. 请高人指点一下css layout具体的含义，我知道height:1%可以触发，但是为何必须出发layout呢，麻烦指点。

css layout
按照我的理解 应该只在IE中有层布局属性这一说。。
有些时候元素没有宽高的时候就没有布局属性。所以设置为height:1%;
事实上 zoom:1; 也可以激活布局属性!

6. 有谁知道TexturePacker最新的破解版哪里有下吗，Mac软件使用

texturepacker for mac 破解版是一个不错的图片组合工具；小编提供的手机苹果电脑系统专版，全功能的图形用户界面，包括支持多点触摸，缩放和所有精灵使用树视图！极端快速的布局算法在实时显示所有的变化！本站提供texturepacker mac 破解版下载。

texturepacker mac 破解版功能特色：
1.在你构建工具链整合TexturePacker或直接加入到Xcode。当更新你的资产就放入Assets文件夹。重建您的项目也将重建所有的表的变化。
2.你可以优化你的形象不同的像素格式，包括rgba4444，rgb565，rgba8888。保存的颜色，你也可以适用于不同的抖动方法。
3.TexturePacker是第一个工具具有cocos2d的新pvr.ccz格式的直接支持！特别是当工作与16bit纹理这种新格式比优化PNG文件更快和更小的。
4.TexturePacker将帮助您使用GUI和命令行创建简单的表达2048x2048像素。挤压重复外周围的像素形状以避免闪烁时平铺纹理。自动微调，自动调整大小，极端的快速自动布局。

7. HTML代码，表格Table的列宽问题

在外面再设置个table，设定成两列，

左边一列固定宽度，里面放个table，装第1、2列

8. 在GEF中如何使用DirectedGraph来对图中的对象进行位置的排放

而在一开始希望显示一个初始模型文件的时候，再对应保存图信息的文件不存在的情况下，如何能够很好的显示这个图，是一个比较麻烦的问题，涉及到对布局算法的一些分析与实现。这片文章就是介绍，如何使用GEF内的DirectedGraph这个类以及其相应的布局算法类DirectedGraphLayout，来解决这个问题。 基本思想是：为GEF的EditPart模型生成一个DirectedGraph，然后使用DirectedGraphLayout来计算布局，最后将布局的结果通过GEF显示出来。 在参考了GEF的flow example之后，对其代码作了部分重构，写了这片文章，希望对遇到同样问题的同志能够有一定的帮助。 首先引入一个接口：public interface GraphBuilder { public void contributeNodesToGraph(DirectedGraph graph, Map map); public void contributeEdgesToGraph(DirectedGraph graph, Map map); public void applyGraphResults(DirectedGraph graph, Map map);}这个接口中定义了几个方法，其含义从其方法名中可以猜出：contributeNodesToGraph：将当前对象作为节点（Node）添加到DirectedGraph中。contributeEdgesToGraph：将当前对象所对应的连线作为边（Edge）添加到DirectedGraph中。applyGraphResults：将图中生成的布局信息取出，对本对象进行重新布局。接口中的graph参数就是保存的图的信息，map参数维持一个对象到节点/边的映射，使得每个对象能够方便的找到其对应的图中的节点或者边。这个接口的使用，在后面会有涉及。下面先看看显示图的容器是如何构建的。 图的容器定义为GraphDiagramEditPart，这个EditPart对应于要显示的有向图的容器。它实现了GraphBuider接口，这也是我们主要需要关注的接口：public class GraphDiagramEditPart extends AbstractGraphicalEditPart implements GraphBuilder. contributeNodesToGraph方法将自身作为节点添加到图中，但是因为GraphDiagramEditPart对应的是容器，因此它不需要向图中添加信息，只是调用其子EditPart，将其添加到图中。 public void contributeNodesToGraph(DirectedGraph graph, Map map) { for (int i = 0; i < getChildren().size(); i++) { NodeEditPart activity = (NodeEditPart)getChildren().get(i); activity.contributeNodesToGraph(graph, map); } } contributeEdgesToGraph方法将这个EditPart的所有子EditPart取出，调用其contributeEdgesToGraph方法，通过这个方法，就可以将所有的边添加到图中了： public void contributeEdgesToGraph(DirectedGraph graph, Map map) { for (int i = 0; i < getChildren().size(); i++) { NodeEditPart child = (NodeEditPart)children.get(i); child.contributeEdgesToGraph(graph, map); } } applyGraphResults方法将所有取出所有的子EditPart，并调用其applyGraphResults，使得图中所生成的布局信息能够被应用到显示上。 public void applyGraphResults(DirectedGraph graph, Map map) { applyChildrenResults(graph, map); } protected void applyChildrenResults(DirectedGraph graph, Map map) { for (int i = 0; i < getChildren().size(); i++) { GraphBuilder part = (GraphBuilder) getChildren().get(i); part.applyGraphResults(graph, map); } } 下面要介绍的是NodeEditPart，它作图中所有节点所对应的EditPart的抽象父类，也实现了GraphBuilder接口。每一个要做为节点添加到图中的EditPart，应该继承这个类。public abstract class NodeEditPart extends AbstractGraphicalEditPart implements GraphBuilder{ public void contributeNodesToGraph(DirectedGraph graph, Map map) { Node n = new Node(this); n.outgoingOffset = 7; n.incomingOffset = 7; n.width = getFigure().getPreferredSize().width; n.height = getFigure().getPreferredSize().height; n.setPadding(new Insets(10,8,10,12)); map.put(this, n); graph.nodes.add(n); } public void contributeEdgesToGraph(DirectedGraph graph, Map map) { List outgoing = getSourceConnections(); for (int i = 0; i < outgoing.size(); i++) { EdgeEditPart part = (EdgeEditPart)getSourceConnections().get(i); part.contributeEdgesToGraph(graph, map); } } public void applyGraphResults(DirectedGraph graph, Map map) { Node n = (Node)map.get(this); getFigure().setBounds(new Rectangle(n.x, n.y, n.width, n.height)); for (int i = 0; i < getSourceConnections().size(); i++) { EdgeEditPart trans = (EdgeEditPart) getSourceConnections().get(i); trans.applyGraphResults(graph, map); } }} 再就是边所对应EditPart的抽象类EdgeEditPart。每一个要作为边添加到图中的EditPart，需要继承这个类。在上面NodeEditPart中对其所对应的Figure其实并没有什么要求，但是对EdgeEditPart所对应的Figure，要求其Figure必须由一个BendpointConnectionRouter，作为其ConnectionRouter：setConnectionRouter(new BendpointConnectionRouter())。这样图的边的路径信息才能够被显示出来。public abstract class EdgeEditPart extends AbstractConnectionEditPart implements GraphBuilder { public void contributeEdgesToGraph(DirectedGraph graph, Map map) { Node source = (Node)map.get(getSource()); Node target = (Node)map.get(getTarget()); Edge e = new Edge(this, source, target); e.weight = 2; graph.edges.add(e); map.put(this, e); } public void applyGraphResults(DirectedGraph graph, Map map) { Edge e = (Edge)map.get(this); NodeList nodes = e.vNodes; PolylineConnection conn = (PolylineConnection)getConnectionFigure(); conn.setTargetDecoration(new PolygonDecoration()); if (nodes != null) { List bends = new ArrayList(); for (int i = 0; i < nodes.size(); i++) { Node vn = nodes.getNode(i); int x = vn.x; int y = vn.y; if (e.isFeedback) { bends.add(new AbsoluteBendpoint(x, y + vn.height)); bends.add(new AbsoluteBendpoint(x, y)); } else { bends.add(new AbsoluteBendpoint(x, y)); bends.add(new AbsoluteBendpoint(x, y + vn.height)); } } conn.setRoutingConstraint(bends); } else { conn.setRoutingConstraint(Collections.EMPTY_LIST); } }} 最后的就是一个LayoutManager来初始化图的创建，以及对图的信息进行解释了，生成最终布局了。这个GraphLayoutManager作为GraphDiagramEditPart所对应的GraphDiagram的LayoutManager，来显示图的内容。public class GraphLayoutManager extends AbstractLayout { private GraphBuilder diagram; GraphLayoutManager(GraphBuilder diagram) { this.diagram = diagram; } protected Dimension calculatePreferredSize(IFigure container, int wHint, int hHint) { container.validate(); List children = container.getChildren(); Rectangle result = new Rectangle().setLocation(container .getClientArea().getLocation()); for (int i = 0; i < children.size(); i++) result.union(((IFigure) children.get(i)).getBounds()); result.resize(container.getInsets().getWidth(), container.getInsets() .getHeight()); return result.getSize(); } public void layout(IFigure container) { DirectedGraph graph = new DirectedGraph(); Map partsToNodes = new HashMap(); diagram.contributeNodesToGraph(graph, partsToNodes); diagram.contributeEdgesToGraph(graph, partsToNodes); new DirectedGraphLayout().visit(graph); diagram.applyGraphResults(graph, partsToNodes); }}可以看到在layout方法中，首先生成了一个DirectedGraph，并调用了contributeNodesToGraph以及contributeEdgesToGraph方法，将节点和边的信息添加到这个生成的DirectedGraphGraph中，然后使用布局算法DirectedGraphLayout().visit(graph)来计算生成图的信息（这里使用了visitor模式）最后调用applyGraphResults将图的信息应用到图形的显示上。 至此，所有框架的工作做完了，如果要将模型作为一个有向图显示的话，只需要将模型的容器对象对应于GraphDiagramEditPart（在EditPartFactory中进行映射），为每一个需要表示为节点的对象，对应到一个继承于NodeEditPart的EditPart，为每一个需要表示为边的模型对象，对应到一个继承于EdgeEditPart的EditPart。这样，就能够将图的布局算法，应用到GEF框架中了。 这里写的比较简单，使用起来也会有一些具体的约束。例如在有向图中，是不能够有孤立的节点的。如果使用CompoundDirectedGraph，就不会有这样的问题，CompoundDirectedGraph可以包括子图，可以支持更为复杂的图形。在Flow Example中使用的就是CompoundDirectedGraph。在后面，我或许会将这个框架进行改写，以使其支持CompoundDirectedGraph来进行布局算法。下面的图是一个生成的例子，大家可以看一下效果: 这是从OWL文件中读取内容之后生成的一个图的表示。可以看到，OWL的节点通过自动图的自动布局之后，已经有了较好的视觉效果。