css中的塊級和內聯元素

2022-09-16 05:51:11 字數 1216 閱讀 5882

塊級元素:

首先說明display是塊級元素,會單獨站一行,如

19晨落夢公子20

21view code

但當新增上浮動(float)後,則為:(會換行)

20晨落夢公子21

22view code

當不設定width或設定為auto時,背景會填充整行。如:

常用的塊級元素:div,ul(無序列表),ol(有序列表),li(列表內容),p,dl(敘事式列表),h1~h6,hr(水平分隔符),table(**)

內聯元素:注意,內聯元素不會獨佔一行。width和height對其不起作用。

如圖:其中的strong元素沒換行顯示

26晨落夢公子晨落夢公子27

28view code

用display可以改變內聯和塊。

display:block 將內聯轉換成塊

display:inline 將塊裝換成內聯

display:inline-block 將容器轉換為內聯塊,既可以設定width和height,又不會單獨佔一行

display:none 隱藏不佔位  visiblility:hidden 隱藏但佔位

把內聯元素裝換為塊元素的3種方法

1、display:block

2、display:inline-block

3、float

CSS塊級元素 內聯元素

在css盒子模型中,我們提到了html元素中的塊元素 block element 和內聯元素 inline element 那麼它們究竟是什麼呢?其實,這兩種元素都是html規範中的概念。塊元素 block element 一般是其他元素的容器元素,能容納其他塊元素或內聯元素。最常見的就是p和div...

CSS塊級元素 內聯元素

在css盒子模型中,我們提到了html元素中的塊元素 block element 和內聯元素 inline element 那麼它們究竟是什麼呢?其實,這兩種元素都是html規範中的概念。塊元素 block element 一般是其他元素的容器元素,能容納其他塊元素或內聯元素。最常見的就是p和div...

CSS塊級元素 內聯元素概念

css文件流與塊級元素 block 內聯元素 inline 之前翻閱不少書籍,看過不少文章,看到所多的是零碎的css布局基本知識,比較表面。看過o reilly的 css權威指南 發現裡面提到的文件流概念讓我很敏感。可惡的是書中並沒有解釋文件流是什麼東西,或許作者覺得這個太簡單了以至於不值一提。但我...