Block element 塊級(jí)元素
顧名思義就是以塊顯示的元素,高度寬度都是可以設(shè)置的。比如我們常用的<div>、<p>、<ul>默認(rèn)狀態(tài)下都是屬于塊級(jí)元素。塊級(jí)元素比較霸道,默認(rèn)狀態(tài)下每次都占據(jù)一整個(gè)行,后面的內(nèi)容也必須再新起一行顯示。當(dāng)然非塊級(jí)元素也可以通過css的display:block;將其更改成塊級(jí)元素。此外還有個(gè)特殊的,float也具有此功能。
Inline element 內(nèi)聯(lián)元素
通俗點(diǎn)來說就是文本的顯示方式,與塊級(jí)元素相反,內(nèi)聯(lián)元素的高度寬度都是不可以設(shè)置的,其寬度就是自身文字或者圖片的寬度。我們常用到的<a>、<span>、<em>都屬于內(nèi)聯(lián)元素。內(nèi)聯(lián)元素的顯示特點(diǎn)就是像文本一樣的顯示,不會(huì)獨(dú)自占據(jù)一個(gè)行。當(dāng)然塊級(jí)元素也能變成內(nèi)聯(lián)元素,那就是通過css的display:inline;和float來實(shí)現(xiàn)。
內(nèi)聯(lián)元素是什么意思呢?什么是塊級(jí)別元素。
《CSS權(quán)威指南》中文字顯示:任何不是塊級(jí)元素的可見元素都是內(nèi)聯(lián)元素。其表現(xiàn)的特性是“行布局”形式,這里的“行布局”的意思就是說其表現(xiàn)形式始終以行進(jìn)行顯示。比如,我們?cè)O(shè)定一個(gè)內(nèi)聯(lián)元素border-bottom:1px solid #000;時(shí)其表現(xiàn)是以每行進(jìn)行重復(fù),每一行下方都會(huì)有一條黑色的細(xì)線。如果是塊級(jí)元素那么所顯示的的黑線只會(huì)在塊的下方出現(xiàn)。
p、h1、或div等元素常常稱為塊級(jí)元素,這些元素顯示為一塊內(nèi)容;strong、span等元素稱為行內(nèi)元素,它們的內(nèi)容顯示在行中,即“行內(nèi)框”。(可以使用display=block將行內(nèi)元素轉(zhuǎn)換成塊元素,display=none表示生成的元素根本沒有框,也既不顯示元素,不占用文檔中的空間)
A:行內(nèi)就是在一行內(nèi)的元素,只能放在行內(nèi);塊級(jí)元素,就是一個(gè)四方塊,可以放在頁面上任何地方
B:說白了,行內(nèi)元素就好像一個(gè)單詞;塊級(jí)元素就好像一個(gè)段落,如果不另加定義的話,它將獨(dú)立一行出現(xiàn)。
C:一般的塊級(jí)元素諸如段落<p>、標(biāo)題<h1><h2>…、列表,<ul><ol><li> 、表格<table>、表單<form>、DIV<div>和BODY<body>等元素。而內(nèi)聯(lián)元素則如:表單元素<input>、超級(jí)鏈接<a>、圖像<img>、<span> …
D:塊級(jí)無素的顯著特點(diǎn)是:每個(gè)塊級(jí)元素都是從一個(gè)新行開始顯示,而且其后的無素也需另起一行進(jìn)行顯示。
E:<span>在CSS定義中屬于一個(gè)行內(nèi)元素,而<div>是塊級(jí)元素。
對(duì)于學(xué)過CSS的人來說一聽就能明白。可對(duì)于新手來說不易理解,我主要對(duì)新手說通熟點(diǎn)吧!
用容器這一詞會(huì)更容易形象理解它們的存在與用途,行內(nèi)元素相當(dāng)一個(gè)小容器,而<div>相當(dāng)于一個(gè)大容器,大容器當(dāng)然可以放一個(gè)小容器了。<span>就是小容器,這樣一說你也許會(huì)在腦海中有一個(gè)初步的印象了吧,如果我們想在大容器中裝一些清水。但我也想在里裝一些墨水怎么辦?很簡單,我們把小容器拿出來裝上墨水然后放入大容器里的清水中不就成了嗎。
新聞熱點(diǎn)
疑難解答
圖片精選