樣式屬性(1)

2022-03-09 08:33:17 字數 1835 閱讀 6535

(一)css屬性值的運用

1:預格式化標籤:

7 :1)block塊狀顯示,類似的在元素後面新增換行符,也就是說其它元素不能在後面並列

2)inline內聯顯示:在元素後面刪除換行符,多個元素可以在同一行內並列顯示。

3)當元素設定了float屬性後,就是相當於該元素具備塊狀元素顯示的特點;

4)inline-block行內塊元素顯示:元素的內容以塊狀顯示,行內的其它元素顯示在同一行。

8:刪除線:文字

9:塊狀元素(block element)

a)塊狀元素在網頁中是以塊的形式顯示,就是元素顯示的是矩形區域,常用的塊狀元素包括div,dl,dt,dd,

ol,ul,fieldset,h,p,form,hr,colgroup,col,table,tr td等

10:預設情況下,塊狀元素都會佔據一行,兩個塊元素不會出現並列情況

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

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

11:a)內聯元素(inline element)行內元素

b)常見行內元素:a,span,i,em,strong,b等

c)內聯元素的表現形式始終是以行內逐個進行顯示

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

e)內聯元素也會遵循盒模型基本規則,如可以定義padding,border,margin,background等屬性,但個別屬性值不能正確顯示

12:內聯塊元素

inline-block:和其它元素都在一行上

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

常見標籤:img input textarea

13:可變元素

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

(二)元素型別的轉換

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

1)display屬性與屬性值(18個屬性值)

屬性值:block/inline/inline-block/none/list-item

作用:塊元素和內聯元素之間的轉換。

說明:各屬性值的作用

a:block塊狀顯示:類似在元素後面新增換行符,也就是說其它元素不能在其後面顯示,或者是讓元素豎排顯示

b:inline內聯顯示:在元素後面刪除換行符,多個元素可以在一行內並列顯示,或者是讓元素豎排顯示

c:當元素設定了float屬性後,就相當於該元素具備塊狀元素顯示的特點;

d:inline-block行內塊元素顯示:元素的內容以塊狀顯示,行內的其它元素顯示在同一行img input

e:none元素不會被顯示

f:list-item:將元素轉換成列表,li的預設型別

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

b:大部分內聯元素的display屬性預設為inline,其中的img input預設為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;等設定;

垂直對齊方式:vertical-align:top/bottom/middle;

應用於不同在div當中垂直居中

CSS字型樣式屬性和外觀樣式屬性

1css字型樣式屬性 1.1font size 字型大小大小 font size屬性用於設定字型大小,該屬性的值可以使用相對長度單位,也可以使用絕對長度單位。其中,相對長度單位比較常用,推薦使用畫素單位px,絕對長度單位使用較少。具體如下 1.2 font family 字型 font family...

CSS樣式屬性

position用來設定元素的定位型別,有absolute 絕對定位 relative 相對定位 static 靜態定位,預設值 fixed 固定定位 四種。static 預設。位置設定為 static 的元素,它始終會處於頁面流給予的位置 static 元素會忽略任何 top bottom lef...

字型樣式屬性

1.font size 字型大小 相對長度單位 說明em 相對於當前物件內文字的字型尺寸 px畫素,最常用,推薦使用 絕對長度單位 說明in 英吋cm 厘公尺mm 公釐pt 點2.font family 字型 3.font weight 字型粗細 值描述normal 預設值。定義標準的字元 bold...