text-overflow(clip | elipsis)（显示省略号| 不显示省略号）
white-space:nowrap 强制文字不断行
word-break:break-all; 和 word-break:break-word;
word-break:break-all;不仅把超出的文字断行还会整齐的排列
word-wrap:break-word; 把超出的文字强制断行，其余的不管，
eg:<p>jflllllllllllllllllllfdjvorfijcdksjhvcidjvcij6789009376567899396767462769hauhfuidhjhfeirhfnjunvreahfvbhjvbujhu</p>
.p1{ width:200px; border:1px solid #000; font:14px/24px Arial; word-wrap:break-word;/*word-break:break-all;*/}
省略号：
<p class="p2">房间爱家的富婆俄日法搜顶顶顶顶顶顶顶顶顶顶的巨款HREI发的时刻就分开上档次， 发动机覅开发可可哦靠都快沉客服来得快。</p>
.p2{ width:200px; border:1px solid #000; font:14px/24px Arial;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
盒模型的怪异模式：
box-sizing盒模型解析
content-box 标准盒模型 border-box 怪异模式
width/height=border+padding+content
Border-box 怪异盒模型 width/height=content
可视宽： 元素的内容宽+padding+border
元素的内容宽：元素里可以方内容的宽
怪异模式：可视宽 设置宽度 内容宽 设置宽度-padding-border
在IE6,7,8下不设置文档声明的时候，页面的盒模型解析 就会进入怪异模式
隐藏方式：
1.display：none;
2.visibility:hidden;
eg：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">div{ width:100px; height:100px; background:red; border:5px solid #333;}.box1{ display:none;} //隐藏后不保留原来位置，后者补上.box2{ visibility:hidden;} //隐藏后保留原来位置，</style></head><body>
<div class="box1">box1</div><div class="box2">box2</div><div class="box3">box3</div></body></html>fixed不兼容问题：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title> 1.<style type="text/css">
html{ height:100%; overflow:hidden;}
body{ margin:0; height:100%; overflow:auto;}.box{ height:2000px;}.div{ width:100px; height:100px; background:red; position:absolute; left:100px; top:100px;}</style>2.
<style type="text/css">
.box{ height:2000px;}
.div{ width:100px; height:100px; background:red; position:fixed; left:100px; top:100px;_position:absolute;_top:expression(eval(document.documentElement.scrollTop+100));//不建议用，建议用js写
}
</style> </head><body>
<div class="box"> <div class="div"></div></div>
</body></html>