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