CSS內聯元素與塊級元素

2021-09-22 20:02:09 字數 866 閱讀 1811

css內聯元素與塊級元素

任何不是塊級元素的可見元素都是內聯元素。其表現的特性是「布局」形式,這裡的「行布局」的意思就是說其表現形式始終以行進行顯示。

所以塊級元素是獨佔一行,多個內聯元素佔這一行,自己裡面還可以劃分行。

主要用的css樣式有以下三個: •display:block – 顯示為塊級元素 

•display:inline – 顯示為內聯元素 

•dipslay:inline-block – 顯示為內聯塊元素,表現為同行顯示並可修改寬高內外邊距等屬性

例如:div 塊狀元素

span內聯元素

————-——————

塊狀元素

我是內聯元素1

我是內聯元素2

————————————

由此可見,塊狀元素包含內聯元素

在這裡為了讓其布局好看,還用了display顯示的意思,這裡面有很多屬性。

舉個例子:為了讓兩段文字對齊,可以採用以上說明。

html**:

.享受公升級服務,推薦注 冊手機號碼@163.com>>

.搶註!數字靚號,短賬戶(付費》

css**:

#duoyu

#duoyu_text

效果圖:

下面兩行文字對齊,通過margin-left:200px;與文字框對齊。

CSS塊級元素與內聯元素

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

CSS塊級元素 內聯元素

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

CSS塊級元素 內聯元素

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