1.css 对于文字的长度超出设置后是会自动折行的,但对于数字或英文却不是
所以要应用到 word-wrap:break-word 或者 word-break;都可以对(数字、英文)强制换行
2.white-space:nowrap 强制不换行 配合 over-flow; text-overflow:ellipsis 可用于 省略超出长度部分为... 的效果。
3.两栏自适应布局
第一种方法如下
.parent{
display: table-cell; // IE6-7 display: inline-block;
width: 9999px;
}
.firstChild{
float: left;
width: 200px;
}
<div class="parent">
<div class="firstChild"> first child</div>
<div class="secondChild"> second child</div>
</div>
第二种方法如下
.parent{
position:relative
}
.firstChild{
position:absolute;
width:200px;
top:0;
left:0;
}
.secondChild{
margin-left:200px;
}
4.子元素等高
.parent{
display: table-row;
}
.firstChild{
width: 50%;
display: table-cell;
}
.secondChild{
width: 50%;
display: table-cell;
}
<div class="parent">
<div class="firstChild"> 许多个元素</div>
<div class="secondChild"> second child</div>
</div>
5.多行文字垂直居中 /对于图片也适用
.parentElement{
display: table-cell;vertical-align:middle;
width: 300px;height: 600px;border: 1px solid #dcdcdc;
}