CSS基本知識4 CSS行模型

2021-09-06 14:59:07 字數 1130 閱讀 3005

display:inline、block、inline-block
block元素的特點是:

總是在新行上開始;

高度,行高以及頂和底邊距都可控制;

寬度預設是它的容器的100%,除非設定乙個寬度

inline元素的特點是:

和其他元素都在一行上;

高,行高及頂和底邊距不可改變;

寬度就是它的文字或的寬度,不可改變。

display:inline-block將物件呈遞為內聯物件,但是物件的內容作為塊物件呈遞。旁邊的內聯物件會被呈遞在同一行內,允許空格。

意思就是,這個物件本身是乙個行元素,但是它的內容是塊(也就是說它可以設高寬。這可以想象成,乙個通道上的一些物件,可以對齊,可以有有自已的大小等。

塊級元素:塊狀元素排斥其他元素與其位於同一行,可以設定元素的寬(width)和高(height),塊級元素一般是其他元素的容器,可容納塊級元素和行內元素。常見的塊級元素有div, p ,h1~h6等。

行內元素:行內元素不可以設定寬(width)和高(height),但可以與其他行內元素位於同一行,行內元素內一般不可以包含塊級元素。行內元素的高度一般由元素內部的字型大小決定,寬度由內容的長度控制。常見的行內元素有a, em ,strong等。

例如:我們可以給div或p應用下面樣式,但是a標籤卻無法應用下面的樣式。

1

.test

當然我們還可以通過樣式display屬性來改變元素的顯示方式。當display的值設為block時,元素將以塊級方式呈現;當display值設為inline時,元素將以行內形式呈現。所以我們可以給a標籤應用以下樣式:

1

.test

另外,如果我們即想讓乙個元素可以設定寬度高度,又想讓它以行內形式顯示,這時我們可以設定display的值為inline-block。如:

1

a

附:

CSS基本知識3 CSS盒模型

box sizing content box border box inherit 值 描述content box 這是由 css2.1 規定的寬度高度行為。寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框。border box 為元素設定的寬度和高度決定了元素的邊框盒。就是...

CSS基本知識

選擇符表示要定義樣式的物件,可以是元素本身,也可是一類元素或制定名稱的元素 在css選擇符中,大致可有10種 類選擇符 id選擇符 class選擇符 萬用字元 群組選擇符 包含選擇符 偽類選擇符 偽物件選擇符 關於選擇符的權重問題,css中用四位數來表示權重,權重的表示式如0000 在這裡特別要注意...

CSS 基本知識

html示例 塊級元素 display block 每個塊級元素佔一行,多個塊級元素上下堆疊顯示,它的寬度預設為父元素的寬度,高度由它的內容高度決定 內容撐開 塊級元素有 6級標籤 段落 有序列表 列表項 等等行內元素 display inline 多個行內元素在一行內顯示,當同一行寬度不夠時,才到...