塊元素和內(nèi)聯(lián)元素有什么區(qū)別？

塊元素和內(nèi)聯(lián)元素有什么區(qū)別？

一 · 塊級(jí)元素特點(diǎn)：
1、每個(gè)塊級(jí)元素都從新的一行開始，并且其后的元素也另起一行。
2、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。

二 、內(nèi)聯(lián)元素特點(diǎn)：
1、和其他元素都在一行上;
2、元素的高度、寬度及頂部和底部邊距不可設(shè)置;
3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。

三、內(nèi)聯(lián)塊級(jí)元素特點(diǎn)：
1、和其他元素都在一行上;
2、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。

內(nèi)聯(lián)元素的顯示
為了幫助理解，可以形象的稱為“文本模式”，即一個(gè)挨著一個(gè)，都在同一行按從左至右的順序顯示，不單獨(dú)占一行。而當(dāng)加入了css控制以后，塊元素和內(nèi)聯(lián)元素的這種屬性差異就不成為差異了。比如，完全可以把內(nèi)聯(lián)元素加上display:block這樣的屬性，讓它也有每次都從新行開始的屬性，即成為塊元素同樣我們可以把塊元素加上display:inline這樣的屬性，讓它也在一行上排列。

塊元素和內(nèi)聯(lián)元素的區(qū)別

塊元素：主要特征是會(huì)產(chǎn)生換行效果，自動(dòng)與其他元素分離成兩行;通?？梢宰鳛槿萜髟趦?nèi)部添加其他元素。 內(nèi)聯(lián)元素：不會(huì)產(chǎn)生換行效果，會(huì)和其他元素內(nèi)聯(lián)排列。

設(shè)置狂*高度無效，除非轉(zhuǎn)化為塊級(jí)元素。

html中內(nèi)聯(lián)元素和塊級(jí)元素的區(qū)別

1.下表列出了內(nèi)聯(lián)元素和塊級(jí)元素的主要區(qū)別 塊元素：不管內(nèi)容多少，塊元素都會(huì)在瀏覽器中獨(dú)占一行。可設(shè)置寬高，如果不設(shè)置寬高那么它的寬度是****（占滿父級(jí)元素一整行） 缺點(diǎn)：1.相鄰元素垂直。

相鄰?fù)膺吘鄷?huì)重疊。

margin-bottom和margin-top重疊（重疊之后的值是兩個(gè)值中的**值） **種解決方案：原理bfc相關(guān) 2.父子的相鄰，父元素的margin-top和子元素的margin-top發(fā)生重疊 （重疊之后的值是兩個(gè)值中的**值） 關(guān)于父子相鄰的解決方案： **種解決方案.取消相鄰，給父元素設(shè)置border或者padding-top 讓相鄰之間有間隔。 第二種解決方案，父元素加overflow:hidden屬性 — 原理bfc相關(guān) 塊元素包括：div， h1-h6 ， p ，ul，li，ol， dl，dt, hr，form,table ，tr，td 行內(nèi)元素：內(nèi)容決定所占空間的多少，內(nèi)容多少就占多少空間。不能設(shè)置寬高（默認(rèn)寬高是0）。margin垂直方向無效（margin-top,margin-bottom）,如果設(shè)置垂直方向用line-height屬性。

多個(gè)行內(nèi)元素排列在一起，他們之間會(huì)出席空格。 行內(nèi)元素包括：font , span, b , i , u, sub, sup, a , 標(biāo)紅為常見的塊元素和行內(nèi)元素。 行內(nèi)塊：共享一行，可設(shè)置寬高,多個(gè)行內(nèi)元素排列在一起，他們之間會(huì)出席空格。

可設(shè)置margin,padding屬性。**了塊和行內(nèi)的所有優(yōu)點(diǎn)。 行內(nèi)塊元素包括：img,input 注意：設(shè)置兩個(gè)并排的div.一個(gè)width:20%,一個(gè)width:80%.用display:inline-block 讓兩個(gè)div并排，會(huì)使右側(cè)的div向下排列 效果圖： 產(chǎn)生該問題的原因是：div1+div2的寬度：****.但是display:inline-block 的設(shè)置會(huì)使兩個(gè)div之間有空格。

width就為****再加上空格 大于 父級(jí)的寬度，所以會(huì)折行。 處理方式：將div1和div2之間的空格去掉 text-align這個(gè)屬性在水平方向上對(duì)行內(nèi)（inline），行內(nèi)塊(inline-block)以及文字都起作用（行內(nèi)元素或行內(nèi)塊元素設(shè)置水平居中用text-align屬性） 行內(nèi)元素：垂直居中用line-height屬性 行內(nèi)塊：設(shè)置垂直居中，不能line-height會(huì)出問題，應(yīng)該用vertical-align.多個(gè)行內(nèi)塊元素并排，同時(shí)設(shè)置居中 同級(jí)中找設(shè)置一個(gè)**的行內(nèi)塊元素(這個(gè)行內(nèi)塊元素內(nèi)容為空，僅僅用來做對(duì)齊的標(biāo)尺)，讓其他元素向它對(duì)齊。 塊元素： 塊元素水平居中：用margin-left和margin-right設(shè)置為auto的方式 類似：margin:0 auto 塊元素水平垂直居中： 情況1子級(jí)元素定寬定高(寬高各為100px)： 情況2：子級(jí)元素寬高不定： **種： 第二種： 塊元素：display:block 行內(nèi)：display:inline 行內(nèi)塊：display:inline-block 讓塊消失：display:none（元素結(jié)構(gòu)還在，但是在頁面不顯示，也不占位置） vertical-align屬性：垂直方向的對(duì)齊方式，對(duì)齊依據(jù)找到同級(jí)別**的元素，以該元素為參照進(jìn)行vertical-align的設(shè)置。

CSS中內(nèi)聯(lián)元素和塊級(jí)元素的區(qū)別是什么啊

塊級(jí)元素的分類塊級(jí)元素按照其應(yīng)用于結(jié)構(gòu)還是內(nèi)容分為三種：結(jié)構(gòu)化塊狀元素，終端塊狀元素，多目標(biāo)塊狀元素。一.結(jié)構(gòu)化塊狀元素這類元素用于構(gòu)造文檔的結(jié)構(gòu)，一個(gè)好的文檔結(jié)構(gòu)對(duì)于搜索引擎和應(yīng)用其他技術(shù)（如JavaScript）都是十分有利的。

它們沒有語義上的含義，僅僅劃分出了文檔的組織方式，并沒有體現(xiàn)文檔的內(nèi)容。

主要的結(jié)構(gòu)化塊狀元素 <ol><ul><dl><table>支持結(jié)構(gòu)化的元素 <li><dt><dd><caption><thead><tbody><tfoot><colgroup><col>二.終端塊狀元素這類元素用于從結(jié)構(gòu)轉(zhuǎn)向內(nèi)容，它們擁有語義上的含義，能夠表明內(nèi)容的性質(zhì)。終端塊狀元素屬于結(jié)構(gòu)的終點(diǎn)，它們不能再包含其他塊級(jí)元素，只能包含文本或行級(jí)元素。終端塊狀元素 <h1>…<h6><p><blockquote><dt><address><caption>三.多目標(biāo)塊狀元素所謂多目標(biāo)指的是可以自由的擴(kuò)展或嵌套文檔的結(jié)構(gòu)，以可以終端的形式出現(xiàn)。當(dāng)多目標(biāo)塊狀元素以結(jié)構(gòu)化的方式使用時(shí)就含有結(jié)構(gòu)化的內(nèi)涵，以終端的形式使用就含有語義的內(nèi)涵。

多目標(biāo)塊狀元素既可以包含塊狀元素，也可以包含內(nèi)容（文本與行級(jí)元素的組合為內(nèi)容），但不能同時(shí)包含兩者。應(yīng)該把內(nèi)容放在塊狀元素中。塊狀元素不應(yīng)作為行級(jí)元素與文本的兄弟元素，受HTML校驗(yàn)器的限制，目前還沒辦法檢驗(yàn)出此種情況，但是應(yīng)該避免。

多目標(biāo)塊狀元素 <div><li><dd><td><form><noscript>在談?wù)揅SS布局時(shí)，我們需要提前知道一些東西。對(duì)于html各種標(biāo)簽/元素，可以從塊的層面做一個(gè)分類：要么是block(塊元素)，要么是inline(內(nèi)聯(lián)元素)： block元素的特點(diǎn)： 總是另起一行開始;高度，行高以及頂、底邊距都可控制;寬度缺省是它所在容器的****，除非設(shè)定一個(gè)寬度。 inline元素的特點(diǎn)： 和其它元素都在一行上;高度，行高以及頂、底邊距不可改變;寬度就是它所容納的文字或圖片的寬度，不可改變。

下面對(duì)它們的性質(zhì)及應(yīng)用做進(jìn)一步說明：◎塊元素(block element) 通常作為其它元素的容器，它可以容納內(nèi)聯(lián)元素和其它塊元素。我們知道默認(rèn)情況下，塊元素會(huì)順序以每次另起一行的方式往下排，而通過CSS控制其樣式，我們可以改變這種默認(rèn)布局模式，把塊元素?cái)[放到你想要的位置上 去。需要指出的是，table標(biāo)簽也是塊元素的一種，基于table表格和基于CSS+DIV的布局，在使用者看來除了頁面載入速度的差別（table在 所有內(nèi)容元素加載完成后才顯示），沒有其它的差別。

但是從頁面的源代碼來看，這種差異就非常大了?；诹己媒Y(jié)構(gòu)理念設(shè)計(jì)的CSS布局源碼，至少能讓沒有 web開發(fā)經(jīng)驗(yàn)的用戶很容易找到連續(xù)的頁面內(nèi)容。從這個(gè)角度來說，CSS layout code應(yīng)該有更好的美學(xué)體驗(yàn)。我們可以把模塊化的DIV想象成一個(gè)個(gè)box，然后把它們按自己的意愿排列組成完整的內(nèi)百科容，網(wǎng)頁布局設(shè)計(jì)就是遵循了同樣的模式。

CSS塊級(jí)元素與行內(nèi)元素（內(nèi)聯(lián)元素）的區(qū)別和聯(lián)系

塊狀元素特點(diǎn)：
1、獨(dú)占一行，在默認(rèn)情況下，寬度自動(dòng)填滿父元素寬度
2、寬度和高度可以控制
3、margin和padding橫向縱向設(shè)置都有效
4、可以通過display: inline; 轉(zhuǎn)換為行內(nèi)元素
5、除個(gè)別特殊元素外，可包含塊狀元素和行內(nèi)元素
行內(nèi)元素特點(diǎn)：
1、不能獨(dú)占一行
2、寬高由內(nèi)容撐開
3、margin和padding橫向設(shè)置有效，縱向設(shè)置不產(chǎn)生邊距效果
4、可以通過display: block; 轉(zhuǎn)換為塊狀元素
5、除ins和del外，不能包含塊狀元素
《HTML標(biāo)簽嵌套規(guī)則》