我写了个Demo，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bdc{
border:1px solid #111111;
}
.h30{
height: 30px;
}
.w50{
width: 50px;
}
.dib{
display: inline-block;
}
.di{
display: inline;
}
.fll{
float: left;
}
.bgg{
background-color: #5ceebe
}
.fix{*zoom:1;}
.fix:after{display:table; content:''; clear:both;}
</style>
</head>
<body>
<!-- https://github.com/zhangxinxu/zxx.lib.css/blob/master/zxx.lib.css -->
<h3 >->_<- 主题:display:none,block,inline,inline-block 的小研究！->_<-</h3>
<h4 >inline-block:以后可以不用见到块级元素并列 就float了->_<-</h4>
<div class="bdc">
<div class="dib bgg h30 w50"></div>
<div class="dib bgg h30 w50"></div>
<div class="dib bgg h30 w50"></div>
<div class="dib bgg h30 w50"></div>
</div>
<h4>....</h4>
<h4>inline:行内元素和块级元素的区别设置inline元素的宽,高无效 ->_<-->_<-</h4>
<div class="bdc">
<div class="di bgg h30 w50"></div>
<div class="di bgg h30 w50"></div>
<div class="di bgg h30 w50"></div>
<div class="di bgg h30 w50"></div>
</div>
<h4>....</h4>
<br/>
<br/>
<h4>float:left 元素浮动时父元素的DIV无法撑开？？？->_<-->_<-</h4>
<div class="bdc">
<div class="fll bgg h30 w50"></div>
<div class="fll bgg h30 w50"></div>
<div class="fll bgg h30 w50"></div>
<div class="fll bgg h30 w50"></div>
</div>
<h4>....</h4>
<br/>
<br/>
<br/>
<h4>float:left 元素浮动时父元素的DIV无法撑开问题->_<-->_<-</h4>
<div class="bdc fix">
<div class="fll bgg h30 w50"></div>
<div class="fll bgg h30 w50"></div>
<div class="fll bgg h30 w50"></div>
<div class="fll bgg h30 w50"></div>
</div>
<h4>....</h4>
<h4>end</h4>
</body>
</html>
上面的类名来源 https://github.com/zhangxinxu/zxx.lib.css
将一些常用的css封装为一个小库的idea还是很赞的！
效果如下：
display.png
网友评论