css知識總結

2021-08-10 15:35:29 字數 1996 閱讀 3920

· background-color  背景顏色。

· background-image  元素的背景影象.

· background-repeat 水平方向平鋪 (repeat-x),

· background-attachment 背景影象是否固定或者隨著頁面的其餘部分滾動

· background-position 屬性改變影象在背景中的位置:

·    十六進製制值 - 如"#ff0000"

· 乙個rgb值 - "rgb(255,0,0)"

· 顏色的名稱 - 如"紅"

文字排列屬性是用來設定文字的水平對齊方式。

文字可居中或對齊到左或右,兩端對齊.

當text-align設定為

"justify"

,每一行被展開為寬度相等,左,右外邊距是對齊

text-decoration:line-through 刪除

text-decoration:underline 下劃線

文字轉換屬性是用來指定在乙個文字中的大寫和小寫字母。

text-transform

css**邊框:

使用border屬性。

border-collapse 屬

性設定**的邊框是否被摺疊成一

個單一的邊框或隔開:

text-align屬性設定水平對齊方式,像左,右,或中心:

padding屬性

·margin(外邊距)- 清除邊框區域。margin沒有背景顏色,它是完全透明

·border(邊框)- 邊框周圍的填充和內容。邊框是受到盒子的背景顏色影響

·padding(內邊距)- 清除內容周圍的區域。會受到框中填充的背景顏色影響

·content(內容)- 盒子的內容,顯示文字和影象

元素總寬度計算

例如

總寬度300px

width : 250px

padding: 10px

boder :5px soid black;

margin:10px

計算 250+20+10+20=300

則:總元素的寬度=寬度

+左填充

+右填充

+左邊框

+右邊框

+左邊距

+右邊距

邊框樣式屬性指定要顯示什麼樣的邊界。

border-style屬性用來定義邊框的樣式

·border-style:dotted solid double dashed;

o 上邊框是 dotted

o 右邊框是 solid

o 底邊框是 double

o 左邊框是 dashed

·border-style:dotted solid double;

o 上邊框是 dotted

o 左、右邊框是 solid

o 底邊框是 double

·border-style:dotted solid;

o 上、底邊框是 dotted

o 左、右邊框是 solid

·border-style:dotted;

o 四面邊框是 dotted

CSS知識總結

基本流程 解析html以構建dom樹 構建render樹 布局render樹 繪製render樹,如下圖 名稱解釋 注意 display none 的節點不會被加入render tree,而visibility hidden 則會,所以,如果某個節點最開始是不顯示的,設為display none是更...

CSS知識總結

使用flex 使用 css3 transform 使用 display table cell 方法 position 的常見四個屬性值 relative,absolute,fixed,static。一般都要配合 left top right 以及 bottom 屬性使用。float屬性的取值 浮動的...

CSS知識總結(2)

1.css選擇器 每一條css樣式定義由兩部分組成,形式如下 選擇器在 之前的部分就是 選擇器 選擇器 指明了 中的 樣式 的作用物件,也就是 樣式 作用於網頁中的哪些元素 p上面的css樣式 的作用 為p標籤設定12px字型大小,行間距設定20px的樣式。2 2,類選擇器 類選擇器在css樣式編碼...