新聞中心
這篇“CSS中display:inline和float:left有什么區(qū)別”文章的知識點大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細(xì),步驟清晰,具有一定的借鑒價值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“CSS中display:inline和float:left有什么區(qū)別”文章吧。
為名山等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù),及名山網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、名山網(wǎng)站設(shè)計,以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求,就會得到認(rèn)可,從而選擇與我們長期合作。這樣,我們也可以走得更遠(yuǎn)!
CSS display:inline和float:left兩者的區(qū)別
CSS display是指顯示狀態(tài),inline表示內(nèi)聯(lián),特點是緊貼著前一個內(nèi)聯(lián)元素,通常默認(rèn)的內(nèi)聯(lián)元素有span,a,em,strong等。而float表示的是浮動,float:left,是針對塊級元素的浮動形式,是不同形式的兩種狀態(tài)。
首先我們要明確,CSS display:inline;與float:left;正確含義。CSS display:inline;(內(nèi)聯(lián))《CSS權(quán)威指南》中文字顯示:任何不是塊級元素的可見元素都是內(nèi)聯(lián)元素。其表現(xiàn)的特性是“行布局”形式,這里的“行布局”的意思就是說其表現(xiàn)形式始終以行進(jìn)行顯示。比如,我們設(shè)定一個內(nèi)聯(lián)元素border-bottom:1pxsolid#000;時其表現(xiàn)是以每行進(jìn)行重復(fù),每一行下方都會有一條黑色的細(xì)線。如果是塊級元素那么所顯示的的黑線只會在塊的下方出現(xiàn)。
當(dāng)然這看起來不像是CSS display:inline;與float:left;的區(qū)別所在,但是當(dāng)理解了float:left;的特性那么我們就清楚到底是怎么回事了。float:left;(左浮動)他使得指定元素脫離普通的文檔流而產(chǎn)生的特別的布局特性。并且FLOAT必需應(yīng)用在塊級元素之上,也就是說浮動并不應(yīng)用于內(nèi)聯(lián)標(biāo)簽。或者換句話來說當(dāng)應(yīng)用了FLOAT那么這個元素將被指定為塊級元素。
那么我們很清楚了,內(nèi)聯(lián)(CSS display:inline;)元素不能設(shè)置寬高,因為內(nèi)聯(lián)屬于行布局,其特性是在一行里進(jìn)行布局,所以不能被設(shè)定寬高。
運行代碼:
float&inline span為內(nèi)聯(lián)/inline元素,給他寬度賦值是沒有效果的。 span為內(nèi)聯(lián)/inline元素, 給他寬度賦值100px+float:right;可以看到有了寬度。 這個li被定義為內(nèi)聯(lián)/inline,設(shè)置寬度沒有效果
test test 這個li被定義為內(nèi)聯(lián)/inline+float:left,設(shè)置寬度有效果
test test
以上就是關(guān)于“CSS中display:inline和float:left有什么區(qū)別”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對大家有幫助,若想了解更多相關(guān)的知識內(nèi)容,請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
標(biāo)題名稱:CSS中display:inline和float:left有什么區(qū)別
URL網(wǎng)址:http://ef60e0e.cn/article/piojgp.html