這篇文章主要介紹了css塊級元素和行內(nèi)元素的區(qū)別是什么，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
css行內(nèi)元素（inline element）
css行內(nèi)元素也叫內(nèi)聯(lián)元素，行內(nèi)元素一般都是基于語義級(semantic)的基本元素，只能容納文本或其他內(nèi)聯(lián)元素，常見內(nèi)聯(lián)元素 “a”。比如 SPAN 元素，IFRAME元素和元素樣式的display : inline的都是行內(nèi)元素。例如文字這類元素，各個字母 之間橫向排列，到最右端自動折行。
css行內(nèi)元素的特點：
1、可以和其他元素處于一行，不用必須另起一行。
2、元素的高度、寬度及頂部和底部邊距不可設(shè)置。
3、元素的寬度就是它包含的文字、圖片的寬度，不可改變。
在介紹完css行內(nèi)元素后，我們來看一看css行內(nèi)元素有哪些？
css行內(nèi)元素有哪些？
常見的css行內(nèi)元素：
| a：錨點 abbr：縮寫 acronym：首字 b：粗體(不推薦) bdo： bidi override big ：大字體 br ： 換行 cite ：引用 code：計算機代碼(在引用源碼的時候需要) dfn：定義字段 em ： 強調(diào) font ：字體設(shè)定(不推薦) i ： 斜體 img ：圖片 input ：輸入框 | kbd：定義鍵盤文本 label ： 表格標簽 q ： 短引用 s：中劃線(不推薦) samp ：定義范例計算機代碼 select ：項目選擇 small： 小字體文本 span：常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊 strike ： 中劃線 strong： 粗體強調(diào) sub：下標 sup ： 上標 textarea ：多行文本輸入框 tt：電傳文本 u： 下劃線 |
接著，我們來看一看css塊級元素和css行內(nèi)元素的區(qū)別有哪些？
css塊級元素和css行內(nèi)元素的區(qū)別
css塊級元素和行內(nèi)元素的區(qū)別之一：
塊級元素：塊級元素會獨占一行，默認情況下寬度自動填滿其父元素寬度。
行內(nèi)元素：行內(nèi)元素不會獨占一行，相鄰的行內(nèi)元素會排在同一行。其寬度隨內(nèi)容的變化而變化。
重慶分公司
重慶分公司
區(qū)別
塊級元素1
塊級元素2
行級元素1
行級元素2
效果如下：
css塊級元素和行內(nèi)元素的區(qū)別之二：
塊級元素：塊級元素可以設(shè)置寬高。
行內(nèi)元素：行內(nèi)元素不可以設(shè)置寬高。
實例：
區(qū)別
塊級元素一
塊級元素二
行內(nèi)元素一
行內(nèi)元素二
效果如下：
注意：塊級元素即使設(shè)置寬度也還是獨占一行。
css塊級元素和行內(nèi)元素的區(qū)別之三：
塊級元素：塊級元素可以設(shè)置margin，padding。
行內(nèi)元素：行內(nèi)元素水平方向的margin和padding如margin-left、padding-right可以產(chǎn)生邊距效果。
實例：
區(qū)別
塊級元素一
塊級元素二
行內(nèi)元素一
行內(nèi)元素二
效果如下：
注意：行內(nèi)元素豎直方向的如padding-top和margin-bottom不會產(chǎn)生邊距效果。
css塊級元素和行內(nèi)元素的區(qū)別之四：
塊級元素：塊級元素對應(yīng)display:block。
行內(nèi)元素：行內(nèi)元素對應(yīng)display:inline。
最后說一個屬性：display：inline-block；可以讓元素具有塊級元素和行內(nèi)元素的特性：既可以設(shè)置長寬，可以讓padding和margin生效，又可以和其他行內(nèi)元素并排。是一個很實用的屬性。
說明：可以通過修改元素的display屬性來切換行內(nèi)元素和塊級元素。
感謝你能夠認真閱讀完這篇文章，希望小編分享css塊級元素和行內(nèi)元素的區(qū)別是什么內(nèi)容對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)建站，關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)建站，詳細的解決方法等著你來學習!
