html 的元素可以分為兩種:
兩者的區別:
1、內聯元素會在一條直線上排列(都是同一行的水平方向排列);
2、塊級元素各佔據一行(即無法與其他元素顯示在同一行內,除非你顯式修改元素的 display 屬性);
3、塊級元素可以包含行內元素和塊級元素,行內元素不能包含塊級元素;
4、塊級元素的 width 預設為 100%,而內聯元素則是根據其自身的內容或子元素來決定其寬度;
5、行內元素設定width無效、height無效、margin上下無效左右有效、padding上下無效左右有效;
舉個例子
pspan
style>
head>
class="block-element">我是塊級元素p>
我是內聯元素span>
我是內聯元素span>
我是內聯元素span>
div>
body>
顯示結果如下
通過修改設定值,可以得到下面的結果
可以看到塊級元素可以修改width和height的值,內聯元素對於修改這些值無效,但可以修改margin-left、padding-right這樣的值。
可以用dispaly
來實現,css的display 屬性規定元素應該生成的框的型別。
可能值有值描述
none
此元素不會被顯示。
block
此元素將顯示為塊級元素,此元素前後會帶有換行符。
inline-block
行內塊元素。(css2.1 新增的值)
inline
預設。此元素會被顯示為內聯元素,元素前後沒有換行符。
修改上面**中的span為
span
顯示結果為
設定display:block,則可以顯示如下的結果
address
blockquote
center
dirdiv
dlfieldset
form
h1h2
h3h4
h5h6
hrisindex
menu
noframes
noscriptolp
pretableul值
描述aabbr
acronym
b粗體(不推薦)
bdobidi override
big大字型
br換行
cite
引用code
計算機**(在引用原始碼的時候需要)
dfn定義字段
em強調
font
字型設定(不推薦)i斜體
imginput
輸入框kbd
定義鍵盤文字
label
**標籤
q短引用
s中劃線(不推薦)
samp
定義範例計算機**
select
專案選擇
small
小字型文字
span
常用內聯容器,定義文字內區塊
strike
中劃線strong
粗體強調
sub下標
sup上標
textarea
多行文字輸入框
tt電傳文字
u下劃線
var定義變數值描述
button
按鈕del
刪除文字
iframe
inline frame
insmap
區塊(map)
object
object物件
script
CSS塊級元素 內聯元素
在css盒子模型中,我們提到了html元素中的塊元素 block element 和內聯元素 inline element 那麼它們究竟是什麼呢?其實,這兩種元素都是html規範中的概念。塊元素 block element 一般是其他元素的容器元素,能容納其他塊元素或內聯元素。最常見的就是p和div...
CSS塊級元素 內聯元素
在css盒子模型中,我們提到了html元素中的塊元素 block element 和內聯元素 inline element 那麼它們究竟是什麼呢?其實,這兩種元素都是html規範中的概念。塊元素 block element 一般是其他元素的容器元素,能容納其他塊元素或內聯元素。最常見的就是p和div...
html的塊級 內聯 內聯塊級元素基礎
概念 塊級 block 內聯 inline 內聯塊級 inline block 在html元素中,元素會有display屬性 display屬性預設值是block,那麼該元素是塊級元素。display屬性預設值是inline,那麼該元素是內聯元素。沒有元素的display預設值是inline blo...