我寫了個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:行內元素和塊級元素的區(qū)別設置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
