溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了css塊級元素和行內元素的區別是什么，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
css行內元素（inline element）
css行內元素也叫內聯元素，行內元素一般都是基于語義級(semantic)的基本元素，只能容納文本或其他內聯元素，常見內聯元素 “a”。比如 SPAN 元素，IFRAME元素和元素樣式的display : inline的都是行內元素。例如文字這類元素，各個字母 之間橫向排列，到最右端自動折行。
css行內元素的特點：
1、可以和其他元素處于一行，不用必須另起一行。
2、元素的高度、寬度及頂部和底部邊距不可設置。
3、元素的寬度就是它包含的文字、圖片的寬度，不可改變。
在介紹完css行內元素后，我們來看一看css行內元素有哪些？
css行內元素有哪些？
常見的css行內元素：
| a：錨點 abbr：縮寫 acronym：首字 b：粗體(不推薦) bdo： bidi override big ：大字體 br ： 換行 cite ：引用 code：計算機代碼(在引用源碼的時候需要) dfn：定義字段 em ： 強調 font ：字體設定(不推薦) i ： 斜體 img ：圖片 input ：輸入框 | kbd：定義鍵盤文本 label ： 表格標簽 q ： 短引用 s：中劃線(不推薦) samp ：定義范例計算機代碼 select ：項目選擇 small： 小字體文本 span：常用內聯容器，定義文本內區塊 strike ： 中劃線 strong： 粗體強調 sub：下標 sup ： 上標 textarea ：多行文本輸入框 tt：電傳文本 u： 下劃線 |
接著，我們來看一看css塊級元素和css行內元素的區別有哪些？
css塊級元素和css行內元素的區別
css塊級元素和行內元素的區別之一：
塊級元素：塊級元素會獨占一行，默認情況下寬度自動填滿其父元素寬度。
行內元素：行內元素不會獨占一行，相鄰的行內元素會排在同一行。其寬度隨內容的變化而變化。
<html>
<head>
<title>區別</title>
<style type="text/css">
.div1{background-color: #090;}
.span1{background-color: yellow;}
</style>
</head>
<body>
<div class="div1">塊級元素1</div>
<div class="div1">塊級元素2</div>
<span class="span1">行級元素1</span>
<span class="span1">行級元素2</span>
</body>
</html>效果如下：
css塊級元素和行內元素的區別之二：
塊級元素：塊級元素可以設置寬高。
行內元素：行內元素不可以設置寬高。
實例：
<html>
<head>
<meta charset="UTF-8">
<title>區別</title>
<style type="text/css">
p{background-color: #098;height: 50px;width: 50%;}
div{background-color: green;height: 50px;width: 40%;}
span{background-color: yellow;height: 70px;}
strong{background-color: pink;height: 70px;}
</style>
</head>
<body>
<p>塊級元素一</p>
<div>塊級元素二</div>
<span>行內元素一</span>
<strong>行內元素二</strong>
</body>
</html>效果如下：
注意：塊級元素即使設置寬度也還是獨占一行。
css塊級元素和行內元素的區別之三：
塊級元素：塊級元素可以設置margin，padding。
行內元素：行內元素水平方向的margin和padding如margin-left、padding-right可以產生邊距效果。
實例：
<head>
<meta charset="UTF-8">
<title>區別</title>
<style type="text/css">
p{background-color: #098;height: 50px;width: 50%;padding: 20px;margin: 20px;}
div{background-color: green;height: 50px;width: 40%;;padding: 20px;margin: 20px;}
span{background-color: yellow;height: 70px;padding: 40px;margin: 20px;}
strong{background-color: pink;height: 70px;padding: 40px;margin: 20px;}
</style>
</head>
<body>
<p>塊級元素一</p>
<div>塊級元素二</div>
<span>行內元素一</span>
<strong>行內元素二</strong>
</body>效果如下：
注意：行內元素豎直方向的如padding-top和margin-bottom不會產生邊距效果。
css塊級元素和行內元素的區別之四：
塊級元素：塊級元素對應display:block。
行內元素：行內元素對應display:inline。
最后說一個屬性：display：inline-block；可以讓元素具有塊級元素和行內元素的特性：既可以設置長寬，可以讓padding和margin生效，又可以和其他行內元素并排。是一個很實用的屬性。
說明：可以通過修改元素的display屬性來切換行內元素和塊級元素。
感謝你能夠認真閱讀完這篇文章，希望小編分享css塊級元素和行內元素的區別是什么內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
