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/