二.元素分類
三.元素的轉換
根據css顯示分類,xhtml元素被分為:塊狀元素,內聯元素(置換元素&&非置換元素)
1.塊級元素特點
(1) 塊狀元素在網頁中就是以塊的形式顯示,所謂塊狀就是元素顯示未矩形區域
(2) 預設情況下,塊狀元素都會佔據一行,通俗的說,兩個相鄰塊狀元素不會出現並列顯示的現象,預設情況下,塊狀元素會按順序自上而下排列
(3) 塊狀元素都可以定義自己的寬度和高度
(4) 塊狀元素一般作為其他元素的容器,它可以容納其它內聯元素和其它塊狀元素,我們可以把這種容器比喻為乙個盒子.
2.內聯元素特點(行內元素)
(1) 內聯元素的表現形式是始終以行內逐個進行顯示
(2) 內聯元素沒有自己的形狀,不能定義它的寬和高,它,顯示的高度和寬由內容決定,它只能根據所包含內容的高度,最小內容單元也會呈現矩形形狀
(3) 內聯元素也會遵循盒模型基本規則,如可以定義padding,border,margin,background等屬性,但個別屬性不能正確顯示(padding-top,margin-top/bottom)
1.常見塊級元素
元素描述
div最常用的塊級元素
dl-dt-dd
搭配使用的塊級元素
form
表單h1-h6
大小標題
hr水平分割線
ol有序列表p段落
ul無序列表
fieldset
表單字段集
2.常見的內聯元素(行內元素)
元素描述
a超連結
br換行i斜體
em強調
label
表單標籤
span
常見內聯容器,定義文字內區域塊
strong
粗體強調
textarea
多行文字輸入框
u下劃線
select
下拉框3.行內塊元素
在行內元素中有幾個特殊的標籤img input td
(1) 可以設定寬高和對齊屬性,預設寬度就是本身內容寬度
(2) 和相鄰行內元素(行內塊)在同一行上,但是之間會有間隙
元素描述
imginput
輸入框td
**單元格
需要根據上下文關係確定該元素是塊元素或者內聯元素
盒子模型可以通過display屬性來改變預設的顯示型別
1display屬性
display屬性擁有18個屬性值
屬性值:block/inline/inline-block/none/flex/grid/list-item/table-header-grounp/table-footer-group/table
作用:該屬性設定或者檢索物件元素應該生成的盒模型的型別
元素描述
block 塊狀,顯示
類似在元素後面新增換行符,也就是說其他元素不能在其後面並列顯示(將元素轉為塊狀元素,是該元素擁有塊狀元素的特點)
inline 內聯,顯示
在元素後面刪除換行符,多個元素可以在一行內並列顯示(元素轉為內聯元素)
float 浮動
就相當於給該元素加了display:block宣告,但是脫離了文件流
inline-block 行內塊顯示
元素的內容以塊狀顯示,行列的其他元素同在一行(只有這乙個元素型別支援(vertical-align)img,input(行內塊元素)
none
不會被顯示
list-item
將元素轉為列表,li的預設型別
2.基本型別
(1) 大部分塊元素display屬性值預設為block,其中列表li的預設值為list-item
(2) 大部分內聯元素的display屬性值預設為inline,其中img,input,預設為inline-block(行內塊元素)
3.垂直居中
設定乙個元素在乙個容器中垂直居中,必須更改預設的display屬性值為inline-block,並加上同級元素(標尺).
同級元素(標尺)樣式設定為:
span(1) 必須給父容器加上text-align:center
(2) 必須給當前元素轉為行內塊元素(display:inline-block),再給當前元素加上vertical-align:middle;
(3)在當前元素的後面(沒有回車)加上同級元素span作為參照物(標尺),並對span進行設定上述樣式
CSS元素型別
html元素可以分為兩種 塊級元素 block level element 內聯元素 inline element 也叫行元素 兩者的區別在於以下三點 1 塊級元素會獨佔一行 即無法與其他元素顯示在同一行內，除非你顯式修改元素的display屬性 而內聯元素則會在一行內顯示。2 塊級元素可以設定wi...
CSS元素型別
前面有一篇文章講到在css世界中，html元素的表現都是乙個個盒子，而css中盒子的顯示方式有三種方式，分別是塊元素 行內元素和行內塊元素。本文總結這三種顯示方式的特徵和區別。最近在整理cnblogs上頁面的樣式，預設右側 隨筆分類 中的標籤是每行顯示乙個，而我想把右側 隨筆分類 中的標籤設定為一行...
css元素型別
css元素型別分為 塊狀元素，內聯元素，內聯塊狀元素 塊狀元素 1 在頁面中以矩形區域顯示 2 自上而下排列，獨佔一行 3 可以直接新增寬高，可做為其他元素或者內容的容器 常用的塊狀元素有 fieldset 表單字段集 colgroup col 表單列分組元素 table tr td 內聯元素 1 ...