css塊級(jí)元素和行內(nèi)元素的區(qū)別是什么-創(chuàng)新互聯(lián)

這篇文章主要介紹了css塊級(jí)元素和行內(nèi)元素的區(qū)別是什么，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)建站自2013年創(chuàng)立以來，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站制作、成都網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元瑞昌做網(wǎng)站,已為上家服務(wù),為瑞昌各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220

css行內(nèi)元素（inline element）

css行內(nèi)元素也叫內(nèi)聯(lián)元素，行內(nèi)元素一般都是基于語義級(jí)(semantic)的基本元素，只能容納文本或其他內(nèi)聯(lián)元素，常見內(nèi)聯(lián)元素 “a”。比如 SPAN 元素，IFRAME元素和元素樣式的display : inline的都是行內(nèi)元素。例如文字這類元素，各個(gè)字母之間橫向排列，到最右端自動(dòng)折行。

css行內(nèi)元素的特點(diǎn)：

1、可以和其他元素處于一行，不用必須另起一行。

2、元素的高度、寬度及頂部和底部邊距不可設(shè)置。

3、元素的寬度就是它包含的文字、圖片的寬度，不可改變。

在介紹完css行內(nèi)元素后，我們來看一看css行內(nèi)元素有哪些？

css行內(nèi)元素有哪些？

常見的css行內(nèi)元素：

a：錨點(diǎn)
abbr：縮寫
acronym：首字
b：粗體(不推薦)
bdo： bidi override
big ：大字體
br ：換行
cite ：引用
code：計(jì)算機(jī)代碼(在引用源碼的時(shí)候需要)
dfn：定義字段
em ：強(qiáng)調(diào)
font ：字體設(shè)定(不推薦)
i ：斜體
img ：圖片
input ：輸入框

kbd：定義鍵盤文本
label ：表格標(biāo)簽
q ：短引用
s：中劃線(不推薦)
samp ：定義范例計(jì)算機(jī)代碼
select ：項(xiàng)目選擇
small：小字體文本
span：常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊
strike ：中劃線
strong：粗體強(qiáng)調(diào)
sub：下標(biāo)
sup ：上標(biāo)
textarea ：多行文本輸入框
tt：電傳文本
u：下劃線

接著，我們來看一看css塊級(jí)元素和css行內(nèi)元素的區(qū)別有哪些？

css塊級(jí)元素和css行內(nèi)元素的區(qū)別

css塊級(jí)元素和行內(nèi)元素的區(qū)別之一：

塊級(jí)元素：塊級(jí)元素會(huì)獨(dú)占一行，默認(rèn)情況下寬度自動(dòng)填滿其父元素寬度。

行內(nèi)元素：行內(nèi)元素不會(huì)獨(dú)占一行，相鄰的行內(nèi)元素會(huì)排在同一行。其寬度隨內(nèi)容的變化而變化。

<html>
<head>
    <title>區(qū)別</title>
    <style type="text/css">
     .div1{background-color: #090;}
     .span1{background-color: yellow;}
    </style>
</head>
<body>
<div class="div1">塊級(jí)元素1</div>
<div class="div1">塊級(jí)元素2</div>
<span class="span1">行級(jí)元素1</span>
<span class="span1">行級(jí)元素2</span>
</body> 
</html>

效果如下：

css塊級(jí)元素和行內(nèi)元素的區(qū)別是什么

css塊級(jí)元素和行內(nèi)元素的區(qū)別之二：

塊級(jí)元素：塊級(jí)元素可以設(shè)置寬高。

行內(nèi)元素：行內(nèi)元素不可以設(shè)置寬高。

實(shí)例：

<html>
<head>
    <meta charset="UTF-8">
    <title>區(qū)別</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>塊級(jí)元素一</p>
        <div>塊級(jí)元素二</div>
        <span>行內(nèi)元素一</span>
        <strong>行內(nèi)元素二</strong>
</body>
</html>

效果如下：

css塊級(jí)元素和行內(nèi)元素的區(qū)別是什么

注意：塊級(jí)元素即使設(shè)置寬度也還是獨(dú)占一行。

css塊級(jí)元素和行內(nèi)元素的區(qū)別之三：

塊級(jí)元素：塊級(jí)元素可以設(shè)置margin，padding。

行內(nèi)元素：行內(nèi)元素水平方向的margin和padding如margin-left、padding-right可以產(chǎn)生邊距效果。

實(shí)例：

<head>
    <meta charset="UTF-8">
    <title>區(qū)別</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>塊級(jí)元素一</p>
        <div>塊級(jí)元素二</div>
        <span>行內(nèi)元素一</span>
        <strong>行內(nèi)元素二</strong>    
</body>

效果如下：

css塊級(jí)元素和行內(nèi)元素的區(qū)別是什么

注意：行內(nèi)元素豎直方向的如padding-top和margin-bottom不會(huì)產(chǎn)生邊距效果。

css塊級(jí)元素和行內(nèi)元素的區(qū)別之四：

塊級(jí)元素：塊級(jí)元素對(duì)應(yīng)display:block。

行內(nèi)元素：行內(nèi)元素對(duì)應(yīng)display:inline。

最后說一個(gè)屬性：display：inline-block；可以讓元素具有塊級(jí)元素和行內(nèi)元素的特性：既可以設(shè)置長(zhǎng)寬，可以讓padding和margin生效，又可以和其他行內(nèi)元素并排。是一個(gè)很實(shí)用的屬性。

說明：可以通過修改元素的display屬性來切換行內(nèi)元素和塊級(jí)元素。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享css塊級(jí)元素和行內(nèi)元素的區(qū)別是什么內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)建站，關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)建站，詳細(xì)的解決方法等著你來學(xué)習(xí)!

新聞標(biāo)題：css塊級(jí)元素和行內(nèi)元素的區(qū)別是什么-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://muchs.cn/article2/hscic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、網(wǎng)站導(dǎo)航、網(wǎng)站改版、商城網(wǎng)站

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

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