#kuaizhuang1{
　　width: 200px;
　　height: 100px;
　　background-color: red;
　　float: left;    
}
#kuaizhuang2{
　　width: 300px;
　　height: 100px;
　　background-color: gold;
　　float: left;
}
#kuaizhuang3{
　　width: 300px;
　　height: 100px;
　　background-color: green;
　　float: left;
}
#kuaizhuang4{
　　width: 300px;
　　height: 100px;
　　background-color: blue;
　　float: left;
}
#hangneiyuansu{
　　background-color: cyan;
　　width: 1000px;
　　height: 1000px;
　　color: orange;
}
<!--块状元素-->
<div id="kuaizhuang1"></div>
<div id="kuaizhuang2"></div>
<div id="kuaizhuang3"></div>
<div class="qcfd"></div>
<div id="kuaizhuang4">这是块状元素</div>
<div class="qcfd"></div>
<!--行内元素-->
<span id="hangneiyuansu">这是行内元素</span>

<!--相互转换-->
<div style="display: inline; width: 100px; height: 100px; background-color: red;">这是块状元素转行内元素测试</div><br />
<div style="display: inline-block;  height: 100px; background-color: green;">这是块状元素转行内块状元素测试</div>
<div style="width: 100px; height: 100px; background-color: red;">这是块状元素这是块状元素</div>
<span style="display: block; width: 200px; height: 200px; background-color: green;">这是行内元素转块状元素测试</span>
<span style="display: inline-block;  height: 200px; background-color: red;">这是行内元素转行内块状元素测试</span>

#daohang{
　　width: 510px;
　　height: 50px;
　　border: 1px solid blue;
}
.dh{
　　width: 100px;
　　height: 48px;
　　background-color: burlywood;
　　color: red;
　　float: left;
　　line-height: 48px;
　　text-align: center;
　　border: 1px solid red;
}
<div id="daohang">
　　<div class="dh">语文</div>
　　<div class="dh">数学</div>
　　<div class="dh">英语</div>
　　<div class="dh">物理</div>
　　<div class="dh">化学</div>
</div>