前面有一篇文章講到在css世界中,html元素的表現(xiàn)都是一個(gè)個(gè)盒子,而css中盒子的顯示方式有三種方式,分別是塊元素、行內(nèi)元素和行內(nèi)塊元素。本文總結(jié)這三種顯示方式的特征和區(qū)別。

1 寫在前面

最近在整理cnblogs上頁(yè)面的樣式,默認(rèn)右側(cè)【隨筆分類】中的標(biāo)簽是每行顯示一個(gè),而我想把右側(cè)【隨筆分類】中的標(biāo)簽設(shè)置為一行顯示多個(gè)標(biāo)簽,至于顯示多少個(gè)則隨標(biāo)簽的大小而定,并且每個(gè)標(biāo)簽在鼠標(biāo)放上去的時(shí)候會(huì)有背景顏色的變化。效果如下圖。

萬(wàn)碼學(xué)堂,電腦培訓(xùn),計(jì)算機(jī)培訓(xùn),Java培訓(xùn),JavaEE開發(fā)培訓(xùn),青島軟件培訓(xùn),軟件工程師培訓(xùn)

下面我們就來分析一下如何讓左邊的標(biāo)簽顯示方式變?yōu)橛疫呥@樣的吧

2 塊元素

在分析塊元素之前我們首先建立html網(wǎng)頁(yè),以便后面的分析。html代碼如下。

        		

延伸閱讀

學(xué)習(xí)是年輕人改變自己的最好方式-Java培訓(xùn),做最負(fù)責(zé)任的教育,學(xué)習(xí)改變命運(yùn),軟件學(xué)習(xí),再就業(yè),大學(xué)生如何就業(yè),幫大學(xué)生找到好工作,lphotoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動(dòng)軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計(jì)培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)學(xué)習(xí)是年輕人改變自己的最好方式