塊元素和內(nèi)聯(lián)元素有什么區(qū)別？
塊元素和內(nèi)聯(lián)元素有什么區(qū)別？
一 · 塊級元素特點：
1、每個塊級元素都從新的一行開始，并且其后的元素也另起一行。
2、元素的高度、寬度、行高以及頂和底邊距都可設置。
二 、內(nèi)聯(lián)元素特點：
1、和其他元素都在一行上;
2、元素的高度、寬度及頂部和底部邊距不可設置;
3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。
三、內(nèi)聯(lián)塊級元素特點：
1、和其他元素都在一行上;
2、元素的高度、寬度、行高以及頂和底邊距都可設置。
內(nèi)聯(lián)元素的顯示
為了幫助理解，可以形象的稱為“文本模式”，即一個挨著一個，都在同一行按從左至右的順序顯示，不單獨占一行。而當加入了css控制以后，塊元素和內(nèi)聯(lián)元素的這種屬性差異就不成為差異了。比如，完全可以把內(nèi)聯(lián)元素加上display:block這樣的屬性，讓它也有每次都從新行開始的屬性，即成為塊元素同樣我們可以把塊元素加上display:inline這樣的屬性，讓它也在一行上排列。
塊元素和內(nèi)聯(lián)元素的區(qū)別
塊元素：主要特征是會產(chǎn)生換行效果，自動與其他元素分離成兩行;通常可以作為容器在內(nèi)部添加其他元素。 內(nèi)聯(lián)元素：不會產(chǎn)生換行效果，會和其他元素內(nèi)聯(lián)排列。
設置狂*高度無效，除非轉(zhuǎn)化為塊級元素。
html中內(nèi)聯(lián)元素和塊級元素的區(qū)別
1.下表列出了內(nèi)聯(lián)元素和塊級元素的主要區(qū)別 塊元素：不管內(nèi)容多少，塊元素都會在瀏覽器中獨占一行?？稍O置寬高，如果不設置寬高那么它的寬度是****（占滿父級元素一整行） 缺點：1.相鄰元素垂直。
相鄰外邊距會重疊。
margin-bottom和margin-top重疊（重疊之后的值是兩個值中的**值） **種解決方案：原理bfc相關 2.父子的相鄰，父元素的margin-top和子元素的margin-top發(fā)生重疊 （重疊之后的值是兩個值中的**值） 關于父子相鄰的解決方案： **種解決方案.取消相鄰，給父元素設置border或者padding-top 讓相鄰之間有間隔。 第二種解決方案，父元素加overflow:hidden屬性 — 原理bfc相關 塊元素包括：div， h1-h6 ， p ，ul，li，ol， dl，dt, hr，form,table ，tr，td 行內(nèi)元素：內(nèi)容決定所占空間的多少，內(nèi)容多少就占多少空間。不能設置寬高（默認寬高是0）。margin垂直方向無效（margin-top,margin-bottom）,如果設置垂直方向用line-height屬性。
多個行內(nèi)元素排列在一起，他們之間會出席空格。 行內(nèi)元素包括：font , span, b , i , u, sub, sup, a , 標紅為常見的塊元素和行內(nèi)元素。 行內(nèi)塊：共享一行，可設置寬高,多個行內(nèi)元素排列在一起，他們之間會出席空格。
可設置margin,padding屬性。**了塊和行內(nèi)的所有優(yōu)點。 行內(nèi)塊元素包括：img,input 注意：設置兩個并排的div.一個width:20%,一個width:80%.用display:inline-block 讓兩個div并排，會使右側(cè)的div向下排列 效果圖： 產(chǎn)生該問題的原因是：div1+div2的寬度：****.但是display:inline-block 的設置會使兩個div之間有空格。
width就為****再加上空格 大于 父級的寬度，所以會折行。 處理方式：將div1和div2之間的空格去掉 text-align這個屬性在水平方向上對行內(nèi)（inline），行內(nèi)塊(inline-block)以及文字都起作用（行內(nèi)元素或行內(nèi)塊元素設置水平居中用text-align屬性） 行內(nèi)元素：垂直居中用line-height屬性 行內(nèi)塊：設置垂直居中，不能line-height會出問題，應該用vertical-align.多個行內(nèi)塊元素并排，同時設置居中 同級中找設置一個**的行內(nèi)塊元素(這個行內(nèi)塊元素內(nèi)容為空，僅僅用來做對齊的標尺)，讓其他元素向它對齊。 塊元素： 塊元素水平居中：用margin-left和margin-right設置為auto的方式 類似：margin:0 auto 塊元素水平垂直居中： 情況1子級元素定寬定高(寬高各為100px)： 情況2：子級元素寬高不定： **種： 第二種： 塊元素：display:block 行內(nèi)：display:inline 行內(nèi)塊：display:inline-block 讓塊消失：display:none（元素結(jié)構(gòu)還在，但是在頁面不顯示，也不占位置） vertical-align屬性：垂直方向的對齊方式，對齊依據(jù)找到同級別**的元素，以該元素為參照進行vertical-align的設置。
CSS中內(nèi)聯(lián)元素和塊級元素的區(qū)別是什么啊
塊級元素的分類塊級元素按照其應用于結(jié)構(gòu)還是內(nèi)容分為三種：結(jié)構(gòu)化塊狀元素，終端塊狀元素，多目標塊狀元素。一.結(jié)構(gòu)化塊狀元素這類元素用于構(gòu)造文檔的結(jié)構(gòu)，一個好的文檔結(jié)構(gòu)對于搜索引擎和應用其他技術(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)的終點，它們不能再包含其他塊級元素，只能包含文本或行級元素。終端塊狀元素 <h1>…<h6><p><blockquote><dt><address><caption>三.多目標塊狀元素所謂多目標指的是可以自由的擴展或嵌套文檔的結(jié)構(gòu)，以可以終端的形式出現(xiàn)。當多目標塊狀元素以結(jié)構(gòu)化的方式使用時就含有結(jié)構(gòu)化的內(nèi)涵，以終端的形式使用就含有語義的內(nèi)涵。
多目標塊狀元素既可以包含塊狀元素，也可以包含內(nèi)容（文本與行級元素的組合為內(nèi)容），但不能同時包含兩者。應該把內(nèi)容放在塊狀元素中。塊狀元素不應作為行級元素與文本的兄弟元素，受HTML校驗器的限制，目前還沒辦法檢驗出此種情況，但是應該避免。
多目標塊狀元素 <div><li><dd><td><form><noscript>在談論CSS布局時，我們需要提前知道一些東西。對于html各種標簽/元素，可以從塊的層面做一個分類：要么是block(塊元素)，要么是inline(內(nèi)聯(lián)元素)： block元素的特點： 總是另起一行開始;高度，行高以及頂、底邊距都可控制;寬度缺省是它所在容器的****，除非設定一個寬度。 inline元素的特點： 和其它元素都在一行上;高度，行高以及頂、底邊距不可改變;寬度就是它所容納的文字或圖片的寬度，不可改變。
下面對它們的性質(zhì)及應用做進一步說明：◎塊元素(block element) 通常作為其它元素的容器，它可以容納內(nèi)聯(lián)元素和其它塊元素。我們知道默認情況下，塊元素會順序以每次另起一行的方式往下排，而通過CSS控制其樣式，我們可以改變這種默認布局模式，把塊元素擺放到你想要的位置上 去。需要指出的是，table標簽也是塊元素的一種，基于table表格和基于CSS+DIV的布局，在使用者看來除了頁面載入速度的差別（table在 所有內(nèi)容元素加載完成后才顯示），沒有其它的差別。
但是從頁面的源代碼來看，這種差異就非常大了。基于良好結(jié)構(gòu)理念設計的CSS布局源碼，至少能讓沒有 web開發(fā)經(jīng)驗的用戶很容易找到連續(xù)的頁面內(nèi)容。從這個角度來說，CSS layout code應該有更好的美學體驗。我們可以把模塊化的DIV想象成一個個box，然后把它們按自己的意愿排列組成完整的內(nèi)百科容，網(wǎng)頁布局設計就是遵循了同樣的模式。
CSS塊級元素與行內(nèi)元素（內(nèi)聯(lián)元素）的區(qū)別和聯(lián)系
塊狀元素特點：
1、獨占一行，在默認情況下，寬度自動填滿父元素寬度
2、寬度和高度可以控制
3、margin和padding橫向縱向設置都有效
4、可以通過display: inline; 轉(zhuǎn)換為行內(nèi)元素
5、除個別特殊元素外，可包含塊狀元素和行內(nèi)元素
行內(nèi)元素特點：
1、不能獨占一行
2、寬高由內(nèi)容撐開
3、margin和padding橫向設置有效，縱向設置不產(chǎn)生邊距效果
4、可以通過display: block; 轉(zhuǎn)換為塊狀元素
5、除ins和del外，不能包含塊狀元素
《HTML標簽嵌套規(guī)則》
