關於css 行元素和塊元素 相互轉換 居中

2022-09-22 01:51:12 字數 990 閱讀 6548

一、塊級元素  行內元素

div、h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內容,即「塊框」。與之相反,span 和 strong 等元素稱為「行內元素」,這是因為它們的內容顯示在行中,即「行內框」。

您可以使用 display 屬性改變生成的框的型別。這意味著,通過將 display 屬性設定為 block,可以讓行內元素(比如 元素)表現得像塊級元素一樣。還可以通過把 display 設定為 none,讓生成的元素根本沒有框。這樣的話,該框及其所有內容就不再顯示,不占用文件中的空間。

但是在一種情況下,即使沒有進行顯式定義,也會建立塊級元素。這種情況發生在把一些文字新增到乙個塊級元素(比如 div)的開頭。即使沒有把這些文字定義為段落,它也會被當作段落對待:

顯示出來的效果為:               

some text                 some text

some more text.

some more text.

在這種情況下,這個框稱為無名塊框,因為它不與專門定義的元素相關聯。

塊級元素的文字行也會發生類似的情況。假設有乙個包含三行文字的段落。每行文字形成乙個無名框。無法直接對無名塊或行框應用樣式,因為沒有可以應用樣式的地方(注意,行框和行內框是兩個概念)。但是,這有助於理解在螢幕上看到的所有東西都形成某種框。

塊級元素特點:

1、每個塊級元素都從新的一行開始,並且其後的元素也另起一行。(真霸道,乙個塊級元素獨佔一行)

2、元素的高度、寬度、行高以及頂和底邊距都可設定。

3、元素寬度在不設定的情況下,是它本身父容器的100%(和父元素的寬度一致),除非設定乙個寬度

塊狀元素也可以通過**display:inline將元素設定為內聯元素

內聯元素特點:

1、和其他元素都在一行上;

2、元素的高度、寬度及頂部和底部邊距不可設定;

3、元素的寬度就是它包含的文字或的寬度,不可改變。

常用的塊狀元素有:

行元素塊元素

塊元素 block element html標籤分類明細 address 位址 blockquote 塊引用 center 舉中對齊塊 dir 目錄列表 div 常用塊級容易,也是css layout的主要標籤 dl 定義列表 fieldset form控制組 form 互動表單 只能用來容納其它塊...

行元素 塊元素 行內塊元素

可以與其它行內元素同處一行,與塊元素不行 設定width,height無效 設定行高line height有效,並且會占用高度位置 相當於該行內元素有了height值,對下面元素的位置有影響,但該行內標籤實際height值並沒有改變 設定margin只有左右有效,上下無效 設定padding上下左右...

css行內元素和塊元素

塊元素 總是在新行上開始 高度,行高以及外邊距和內邊距都可控制 寬度預設是它的容器的100 除非設定乙個寬度。它可以容納內聯元素和其他塊元素 行內元素 和其他元素都在一行上 高,行高及外邊距和內邊距不可改變 寬度就是它的文字或的寬度,不可改變 內聯元素只能容納文字或者其他內聯元素 塊級元素 div ...