CSS元素型別及其轉換

2021-10-07 09:13:32 字數 3291 閱讀 1996

根據css顯示分類,xhtml元素被分為

三種型別:

塊狀元素,內聯元素,可變元素

三種型別:

塊狀元素,內聯元素,內聯塊元素(css2.1增加)

a:塊狀元素在網頁中就是以塊的形式顯示,所謂塊狀就是元素顯示為矩形區域,

b:預設情況下,塊狀元素都會佔據一行,通俗地說,兩個相鄰塊狀元素不會出現並列顯示的現象;預設情況下,塊狀元素會按順序自上而下排列。

c:塊狀元素都可以定義自己的寬度和高度。

d:塊狀元素一般都作為其他元素的容器,它可以容納其它內聯元素和其它塊狀元素。我們可以把這種容器比喻為乙個子。

a:內聯元素的表現形式是始終以行內逐個進行顯示;

b:內聯元素沒有自己的形狀,不能定義它的寬和高,它顯示的寬度、高度只能根據所包含內容的高度和寬度來確定,它的最小內容單元也會呈現矩形形狀;

c:內聯元素也會遵循盒模型基本規則,如可以定義padding,border,margin,background等屬性,但個別屬性不能正確顯示;(padding-top:;margin-top/bottom)

需要根據上下文關係確定該元素是塊元素或者內聯元素。

塊div -最常用的塊級元素

dl - 和dt-dd 搭配使用的塊級元素

form - 互動表單

h1 -h6- 大標題

hr - 水平分隔線

ol – 有序列表

p - 段落

ul - 無序列表

lifieldset - 表單字段集

colgroup-col - 表單列分組元素

table-tr-td **及行-單元格

內聯a –超連結(錨點)

b - 粗體(不推薦)

br - 換行

i - 斜體

em - 強調

img -

input - 輸入框

label - 表單標籤

span - 常用內聯容器,定義文字內區塊

strong - 粗體強調

sub - 下標

sup - 上標

textarea - 多行文字輸入框

u - 下劃線

select - 專案選擇

盒子模型可通過display屬性來改變預設的顯示型別

none

此元素不會被顯示。

block此元素將顯示為塊級元素,此元素前後會帶有換行符。

inline此元素會被顯示為內聯元素,元素前後沒有換行符。**

inline-block行內塊元素。(css2.1 新增的值)

list-item此元素會作為列表顯示。

run-in

此元素會根據上下文作為塊級元素或內聯元素顯示。

compact

css 中有值compact,不過由於缺乏廣泛支援,已經從 css2.1 中刪除。

marker

css 中有值 marker,不過由於缺乏廣泛支援,已經從 css2.1 中刪除。

table

此元素會作為塊級**來顯示(類似),**前後帶有換行符。

inline-table

此元素會作為內聯**來顯示(類似),**前後沒有換行符。

table-row-group

此元素會作為乙個或多個行的分組來顯示(類似)。

table-header-group

此元素會作為乙個或多個行的分組來顯示(類似

table-footer-group

此元素會作為乙個或多個行的分組來顯示(類似)。

table-row

此元素會作為乙個**行顯示(類似)。

table-column-group

此元素會作為乙個或多個列的分組來顯示(類似)。

table-column

此元素會作為乙個單元格列顯示(類似

table-cell

此元素會作為乙個**單元格顯示(類似

table-caption

此元素會作為乙個**標題顯示(類似

inherit

規定應該從父元素繼承 display 屬性的值。

)。a、大部分塊元素display屬性值預設為block,其中列表li的預設值為list-item。

b、大部分內聯元素的display屬性值預設為inline,其中img,input,預設為inline-block(行內塊元素)。

設定乙個元素在乙個容器中垂直居中,必須更改預設的display屬性值為inline-block;並加上同級元素(標尺)(同級元素[標尺]樣式設定為vertical-align:middle;width:0;height:100%;display:inline-block;)

三個條件:

1:必須給容器(父元素)加上text-align:center;

2:必須給當前元素轉成行內塊元素(display:inline-block;)再給當前元素加上vertical-align:middle;

3:在當前元素的後面(沒有回車)加上同級元素span;並對span進行vertical-align:middle;width:0;height:100%;display:inline-block

一、引題

在之前的**html中的塊級元素和內聯元素中了解到了內聯元素一般是不能設定寬高的,但是也有特殊。比如img是內聯元素,但可以設定寬高,這肯定讓不少人迷惑。這樣我們就要引入html中置換元素的概念(非置換元素在w3c中沒有給出明確的解釋,姑且我們就把除置換元素外的元素當作非置換元素吧)。

二、置換元素與非置換元素

a) 置換元素:瀏覽器根據元素的標籤和屬性,來決定元素的具體顯示內容。

例如:瀏覽器會根據標籤的src屬性的值來讀取資訊並顯示出來,而如果檢視(x)html**,則看不到的實際內容;標籤的type屬性來決定是顯示輸入框,還是單選按鈕等。 (x)html中的、、、都是置換元素。這些元素往往沒有實際的內容,即是乙個空元素。

置換元素在其顯示中生成了框,這也就是有的內聯元素(img,input)能夠設定寬高的原因。

b) 不可替換元素(非置換元素):(x)html 的大多數元素是不可替換元素,即其內容直接表現給使用者端(如瀏覽器)。

css元素型別的轉換

day12 1 元素型別的轉換 display屬性 display屬性 屬性值 block inline none 大部分塊狀元素預設的display的值為block,其中li預設的值 list item 列表元素 大部分內聯元素預設的display值為inline,其中input預設的值為 inl...

CSS元素型別的轉換

元素的型別通常分為 塊級元素 內聯元素 內聯塊元素 塊級元素 塊級元素會佔據一行的位置,它後面的元素內容會換行顯示 塊級元素裡面可以放任何內容,主要用來布局。常見的塊級元素 div h1 h6 ul li ol li p table form 行內元素 內聯元素也叫行級元素它只佔據他內容所佔的位置,...

css元素型別以及型別之間的轉換

塊狀元素 內聯元素 行內元素 可變元素 注 行內塊元素歸在內聯元素這一類裡面 塊狀元素特點 1 在頁面以矩形區域顯示。2 自上而下排列,獨佔一行。3 可直接加寬高 4 一般情況下,作為其他元素或內容的容器 內聯元素特點 1 在頁面中最小單位也是矩形 2 在一行內逐個排列 3 不可以直接新增寬高,大小...