CSS中display:inline和float:left有什么區(qū)別

這篇“CSS中display:inline和float:left有什么區(qū)別”文章的知識點(diǎn)大部分人都不太理解，所以小編給大家總結(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)，特點(diǎ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è)置寬高，因?yàn)閮?nèi)聯(lián)屬于行布局，其特性是在一行里進(jìn)行布局，所以不能被設(shè)定寬高。

運(yùn)行代碼：

<html>  <head>  <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>  <title>float&inline</title>  <style>  *{text-align:center;padding:4px;}   div,p{text-align:left;}   span{background:#f5f5f5;border-left:1px#eeesolid;   border-top:1px#eeesolid;border-right:1px#cccsolid;   border-bottom:1px#cccsolid;}   ul#inlineli{display:inline;list-style:none;border-left:1px#cccsolid;width:300px;background:#f5f5f5;;}   ul#floatli{float:left;display:inline;list-style:none;   border-left:1px#666solid;width:300px;background:#f5f5f5;}   </style>  </head>  <body>  <spanstylespanstyle="width:300px;">  span為內(nèi)聯(lián)/inline元素，給他寬度賦值是沒有效果的。</span>  <spanstylespanstyle="width:100px;float:right;">span為內(nèi)聯(lián)/inline元素，   給他寬度賦值100px+float:right;可以看到有了寬度。</span>  <div>  <p>這個li被定義為內(nèi)聯(lián)/inline,設(shè)置寬度沒有效果</p>  <ulidulid="inline">  <li>test</li>  <li>test</li>  </ul>  </div>  <div>  <p>這個li被定義為內(nèi)聯(lián)/inline+float:left,設(shè)置寬度有效果</p>  <ulidulid="float">  <li>test</li>  <li>test</li>  </ul>  </div>  </body>  </html>

以上就是關(guān)于“CSS中display:inline和float:left有什么區(qū)別”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享名稱：CSS中display:inline和float:left有什么區(qū)別
標(biāo)題來源：http://muchs.cn/article18/piojgp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、營銷型網(wǎng)站建設(shè)、企業(yè)建站、網(wǎng)站策劃、ChatGPT、App開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容