CSS開發基礎 塊級元素和內聯元素

2021-07-26 02:35:07 字數 2076 閱讀 4913

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...