css day6 個人學習筆記

2021-08-07 22:52:33 字數 3342 閱讀 2373

css-day6-個人學習筆記

一、漸變——多種顏色之間平緩過度的顯示效果(background-image)

1、漸變分類

a、線性漸變(linear-gradient)——按照直線的方式填充漸變顏色和方向

b、徑向漸變(radial-gradient)——以圓的方式填充漸變效果(圓心位置,半徑)

c、重複漸變——重複線性漸變(repeating-linear-gradient);重複徑向漸變(repeating-radial-gradient)。

2、漸變的語法

a、linear-gradient(angle,color-point1,color-point2);

angle——關鍵字(to top,to right,to bottom,to left),角度(0deg,90deg,180deg,270deg);

color-point——red 0px(該色標顏色為 red ,位置為填充方向的 0px 處),blue 50%(該色標顏色為 blue,位置為填充方向的 50% 處),linear-gradient(to top,red,blue,green);自動分配位置

b、radial-gradient([size at position,]color-point,color-point)

size:圓的半徑,position:圓心的位置(以px為單位的具體數值)/(x% y%)/(left,top)。

c、repeating-linear-gradient()

d、repeating-radial-gradient()

3、瀏覽器相容性問題——主流瀏覽器都支援漸變,對於不支援的瀏覽器,需要新增瀏覽器字首的方式實現相容性

瀏覽器字首:(1、firefox :-moz-;2、chrome 和 safari :-webkit-;3、opear :-o-;4、microsoft ie :-ms-)

如果瀏覽器不支援屬性的話,則將字首新增到屬性名稱前(animation:值;-moz-aniamtion:值;-webkit-aniamtion:值;-o-aniamtion:值;-ms-animation:值;)

如果瀏覽器支援屬性,但不支援屬性值的話,則將字首新增到屬性值前(background-image:linear-gradient();background-image:-moz-linear-gradient();)

二、文字格式化

1、字型屬性

a、指定字型——font-family:"微軟雅黑",arial;(字型中包含中文或特殊字元的話,盡量使用「」引起來 )

b、字型大小——font-size:px 或 pt 為單位的數值

c、字型加粗——font-weight:normal(正常體)/ bold(加粗顯示)/ 400 ~ 900;400 :normal,900 :bold

d、字型樣式——font-style:normal(正常體)/ italic (斜體)

e、小型大寫字元——font-variant:normal(正常,預設值) / small-caps(小型大寫字元)

f、字型屬性——font:style variant weight size family;注意:該簡寫屬性中,必須包含 family 的值

2、文字屬性

a、文字顏色——color:red

b、文字排列——text-align:left / center / right / justify(兩端對齊)

c、文字修飾——text-decoration:none(無線條修飾)/ underline(顯示下劃線)/ line-through(顯示刪除線 )/ overline(顯示上劃線)

d、行高——line-height:以px為單位 或 當前字型大小的倍數,一般可以設定行高與元素高度相同,從而實現字型垂直居中。

f、文字陰影——text-shadow:h-shadow v-shadow blur color;

三、**

1、**常用屬性

a、邊距屬性——padding,margin(不能為td設定margin)

b、尺寸屬性——width,height

c、垂直方向對齊——vertical-align:top / middle / bottom

2、**特有屬性

a、邊框合併屬性——border-collapse:separate(預設值)/ collapse(合併)

b、邊框邊距——border-spacing:px(注意:必須保證border-collapse是separate時才有效)

c、標題位置——caption-side:top(預設值)/ bottom(底部)

d、顯示規則——table-layout:auto /  fixed(尺寸取決於設定的值,加速顯示**)

四、浮動

1、定位

改變元素在網頁中的預設位置

2、定位的分類

a、普通流定位/文件流定位

b、浮動定位

c、相對定位

d、絕對定位

e、固定定位

3、定位 - 浮動定位

a、浮動定位特點:會排除在文件流之外即"脫離文件流",不再佔據頁面空間,後續元素則上前補位;浮動元素只在當前行內浮動;浮動元素會停靠在父元素的左邊或右邊或其他已浮動元素的邊緣上;浮動元素依然位於父元素之內;解決問題-多個塊級元素在一行內的顯示問題。

b、語法——float:none(預設值)/ left(元素左浮動)/ right(元素右浮動)。

c、浮動引發的特殊效果——當父元素容納不下所有已浮動子元素,最後乙個將換行顯示(有可能被卡住);元素一旦浮動起來後,寬度將變成自適應(非手動指定情況下);元素一旦浮動起來後,都將變成塊級元素。

css day7 個人學習筆記

css day7 個人學習筆記 一 浮動定位 1 清除浮動 清除當前元素前面的元素浮動所帶來的影響 clear none 預設值,無清除效果 left 清除當前元素前面元素左浮動帶來的影響 right 清除當前元素前面元素右浮動帶來的影響 both 清除當前元素前面元素任何一種浮動方向所帶來的影響 ...

SAP BW個人學習筆記

sap bw個人學習筆記 難免有錯,持續更新,切勿對號入座。一 kpi 1 kpi是線性遞增的 2 kpi關鍵指標 一般情況下,2個模組,就有40個kpi,3個模組,有60多個kpi 二 增強 1 只有不符合要求時,才使用增強,還要使用標準字段。三 財務資料源 財務資料源是用的後像,也即是餘像,只能...

ajax個人學習筆記

1.function createxhr else if typeof activexobject undefined catch e else 2.ie瀏覽器第一次向伺服器端請求,獲取最新資料,其後預設獲取的是快取資料,而不是最新的資料,可以使用js中的隨機字串處理。3.ajax非同步 true ...