1、几个缩写属性（未完待续）：
（1）font:至少包含font-size和font-family
（2）background:
2、margin collapse
问题：一般有两种margin collapse——相邻元素之间、父子元素之间
（1）当两个垂直外边距相遇时
折叠的结果：
两个相邻的外边距都是正数时，折叠结果是中间间隔是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是折叠部分是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。
产生折叠的必备条件：margin必须是邻接的!
（1）创建了新的BFC的元素（例如浮动元素或者’overflow’值为’visible’以外的元素）与它的子元素的外边距不会折叠
（2）浮动元素、绝对定位元素、inline-block元素不与任何元素的外边距产生折叠（包括其父元素和子元素）
（3）一个常规文档流元素的margin-bottom与它下一个常规文档流的兄弟元素的margin-top会产生折叠，除非它们之间存在间隙（clearance）。
（4）一个常规文档流元素的margin-top 与其第一个常规文档流的子元素的margin-top产生折叠，条件为父元素不包含 padding 和 border ，子元素不包含 clearance。（类似情况下的margin-bottom）
（6）一个不包含border-top、border-bottom、padding-top、padding-bottom的常规文档流元素，并且其 ‘height’ 为 0 或 ‘auto’， ‘min-height’ 为 ‘0’，其里面也不包含行盒(line box)，其自身的 margin-top 和 margin-bottom 会折叠。（没测试成功）
解决：CSS及浏览器的设计者们希望我们在布局时，如果遇到上下两个并排内容块的安排，最好只设置其中每个块上或下margin的一处即可。
（2）对于有块级子元素的元素计算高度的方式,如果元素没有垂直边框和填充,那其高度就是其子元素顶部和底部边框边缘之间的距离。
a、需要给父div设置
边框，当然可以设置边框为透明
b、为父DIV添加padding，或者至少添加padding-top
c、为父DIV添加overflow:hidden/auto/overlay/scroll
d、为父div添加float:left
e、为父div添加position:absolute
f、为父div添加display:inline-block
3、BFC（Block formatting contexts）
BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。
什么时候会触发BFC呢？
- float的值不为none。
- overflow的值为auto,scroll或hidden。
- display的值为table-cell, table-caption, inline-block中的任何一个。
- position的值不为relative和static。
*一个元素不能同时存在于两个BFC中。
效果
- 内部的盒会在垂直方向一个接一个排列（可以看作BFC中有一个的常规流）；
- 处于同一个BFC中的元素相互影响，可能会发生margin collapse；
- 每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此；
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；
- 计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算；
- 浮动盒区域不叠加到BFC上；
4、多余文字…代替
一个常会想到的方法及其缺点：
用：after和content
缺点：当文字很短时后面也有…；IE7及以下不兼容（其实也没看出到底有什么不好）
单行文本溢出
（1）常规CSS方法：
.zxx_text_overflow{
width:27em;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow:hidden;
}（2）margin负值，定位
html
<div class="zxx_text_overflow" >
<div class="zxx_con" >这是一段比较长的文字，用来测试是否文字溢出时会用省略号显示。</div>
<div class="zxx_dotted" >…</div>
</div>css
.zxx_text_overflow{width:24em; height:1.3em; overflow:hidden; zoom:1;}
.zxx_text_overflow .text_con{float:left(好像是可以有也可以没有，会对前面的产生影响); height:1.3em; margin-right:3em; overflow:hidden;}
.zxx_text_overflow .text_dotted{width:3em; height:1.31em; float:right; margin-top:-1.3em;}（3）jquery限制字符的个数
$(document).ready(function(){
//限制字符个数
$(“.zxx_text_overflow”).each(function(){
var maxwidth=23;
if($(this).text().length>maxwidth){
$(this).text($(this).text().substring(0,maxwidth));
$(this).html($(this).html()+’…’);
}
});
});（4）jquery自动判断宽度是否超出
HTML部分：
<div class="zxx_text_overflow_6">你个杀千刀的，怎么写了这么多的文字，我要被拦腰截断了啊，kitty救我！</div>
css部分：
.zxx_text_overflow_6{width:400px;}
js部分：
var wordLimit=function(){
$(".zxx_text_overflow_6").each(function(){
var copyThis = $(this.cloneNode(true)).hide().css({
'position': 'absolute',
'width': 'auto',
'overflow': 'visible'
});
$(this).after(copyThis);
if(copyThis.width()>$(this).width()){
$(this).text($(this).text().substring(0,$(this).html().length-4));
$(this).html($(this).html()+'...');
copyThis.remove();
wordLimit();
}else{
copyThis.remove(); //清除复制
return;
}
});
}
wordLimit();多行文本溢出
（1）WebKit浏览器或移动端的页面
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;（2）不太好看的效果
p {
position: relative;
line-height: 20px;
max-height: 40px;
overflow: hidden;
}
p::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}5、*zoom
http://www.cnblogs.com/top5/archive/2011/07/11/2103343.html
6、去除inline-block元素间间距的N种方法
7、您可能不知道的CSS元素隐藏“失效”及其妙用
http://www.zhangxinxu.com/wordpress/2012/02/css-overflow-hidden-visibility-hidden-disabled-use/