1.清除浮动
较好的方法::after伪类+content内容生成
兼容性:大部分浏览器支持(Firefox 1.5+, Safari 3.5+, IE 8+, Opera 9.2+, Chrome 0.2+)
// 兼容IE6/7,因其不支持:after伪类。设置该属性可以触发IE的haslayout属性,从而清除浮动
.fix{*zoom:1;}
.fix:after{display:block; content:""; clear:both; overflow:hidden; visibility:hidden;}
2.大小不固定图片/多行文字 垂直居中
方案
.pic_box{width:300px; height:300px; background-color:#beceeb; font-size:0; *font-size:200px; text-align:center;}
.pic_box img{vertical-align:middle;}
.pic_box:after{display:inline-block; width:0; height:100%; content:"center"; vertical-align:middle; overflow:hidden;}
3.文字展开收起效果可以利用input[type=“checkbox”]相关属性实现
css
.table {
display: table;
width: 100%;
width: calc(100% - 30px);
max-width: 400px;
margin: auto;
/*table-layout: fixed;
text-align: left;*/
}
.td {
display: table-cell;
padding: 5px;
}
input[type="checkbox"] {
position: absolute;
clip: rect(0 0 0 0);
}
.check-in,
.check-out {
color: #34538b;
cursor: pointer;
}
.check-out {
display: none;
}
:checked ~ .check-out {
display: inline-block;
}
:checked ~ .check-in {
display: none;
}
.element {
max-height: 0;
overflow: hidden;
transition: max-height .25s;
}
:checked ~ .element {
max-height: 666px;
}
html:
<div class="table">
<div class="td">
<input id="check1" type="checkbox">
<p>个人觉得,display:table-cell最强的应用是可以任意个数列表的等宽效果。</p>
<div class="element">
<p>display:table-cell其他一些应用,例如,两栏自适应布局,垂直居中效果等等都是可以通过其他技术手段模拟出来的,但是,根据列表个数自动等宽的效果,其他CSS是很难模拟的,尤其当需要兼容IE8浏览器的时候。</p>
</div>
<label for="check1" class="check-in">更多↓</label>
<label for="check1" class="check-out">收起↑</label>
</div>
<div class="td">
<input id="check2" type="checkbox">
<p>个人觉得,display:table-cell最强的应用是可以任意个数列表的等宽效果。</p>
<div class="element">
<p>display:table-cell其他一些应用,例如,两栏自适应布局,垂直居中效果等等都是可以通过其他技术手段模拟出来的,但是,根据列表个数自动等宽的效果,其他CSS是很难模拟的,尤其当需要兼容IE8浏览器的时候。</p>
<p>然而,此方法也有局限性,就是只能实现单行列表的等分,所以,如果我们希望列表数目超过一定值的时候变成多行,就需要根据数目不同,输出不同的DOM结构,仅仅靠CSS有难度。</p>
</div>
<label for="check2" class="check-in">更多↓</label>
<label for="check2" class="check-out">收起↑</label>
</div>
</div>