溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“css行內元素有什么特點及怎么用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“css行內元素有什么特點及怎么用”文章能幫助大家解決問題。
css行內元素（inlineelement）
css行內元素也叫內聯元素，行內元素一般都是基于語義級(semantic)的基本元素，只能容納文本或其他內聯元素，常見內聯元素“a”。比如SPAN元素，IFRAME元素和元素樣式的display:inline的都是行內元素。例如文字這類元素，各個字母之間橫向排列，到最右端自動折行。
css行內元素的特點：
1、可以和其他元素處于一行，不用必須另起一行。
2、元素的高度、寬度及頂部和底部邊距不可設置。
3、元素的寬度就是它包含的文字、圖片的寬度，不可改變。
在介紹完css行內元素后，我們來看一看css行內元素有哪些？
css行內元素有哪些？
常見的css行內元素：
a：錨點
abbr：縮寫
acronym：首字
b：粗體(不推薦)
bdo：bidioverride
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>
<styletype="text/css">
.div1{background-color:#090;}
.span1{background-color:yellow;}
</style>
</head>
<body>
<divclass="div1">塊級元素1</div>
<divclass="div1">塊級元素2</div>
<spanclass="span1">行級元素1</span>
<spanclass="span1">行級元素2</span>
</body>
</html>
效果如下：
2345截圖20180904155622.png
css塊級元素和行內元素的區別之二：
塊級元素：塊級元素可以設置寬高。
行內元素：行內元素不可以設置寬高。
實例：
<html>
<head>
<metacharset="UTF-8">
<title>區別</title>
<styletype="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行內元素有什么特點及怎么用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
