記錄學習----前端筆記02

CSS新屬性

背景縮放

background-size: xxxpx;隻改一個值 等比例縮放

background-size: xx%;

background-size:cover; ----->常用

圖檔進行等比例縮放 圖檔一定要保證寬度和高度同時滿足盒子的大小，勢必會有圖檔超出 溢出部分會被隐藏

background-size:contain;

保證圖檔等比例縮放 寬度和高度隻有一個滿足盒子的框高，就停止縮放 保護圖檔完整，但是有部分背景蓋不住

多背景圖檔

一個元素可以設定多重背景圖像

每組屬性間使用逗号分隔

如果設定的多重背景圖檔之間存在交集，前面的背景圖會覆寫在後面的 背景圖紙上

為了避免背景顔色将背景圖檔蓋住，通常間背景色定義在最後一組 ----不放在最後一組不能正常顯示顔色和圖檔

盒子模型

盒子模型的穩定性

width>padding>margin

margin會有外邊距合并的問題，并且在ie6中會有下面外邊距雙倍的問題

css3的盒模型

box-sizing

content-box 就是以前的盒子 會被撐大的盒子

border-box 不會被撐開的盒子

結構僞類選擇器

直接寫父元素 :nth-child時選擇的不論子元素的類型，直接選擇第幾個孩子

li:frist-child 選擇的是li的父元素的第一個孩子li孩子 如果第一個不是li那麼沒有任何效果

first-child

last-child

nth-child()

nth-child(even) 偶數

nth-child(odd) 奇數

nth-child(2n) n=0,1,2… 公式進行選擇—公式中第一個不能寫數字

需要前a 則寫nth-child(-n+a)

nth-last-child() 從最後一個孩子開始數

E:first-of-type : 指定類型E的第一個

E:last-of-type : 指定類型E的最後一個

E:nth-of-type(n) : 指定類型E的第n個

目标僞類選擇器

:target{}

用于選取目前活動的目标元素

屬性選擇器

選取帶有某些帶有特殊屬性的标簽選擇器

a[title] 帶有title的a标簽

a[input=text] 屬性值完全等于

a[class^=font] font開頭的class

a[class$=font] font結尾的class

a[class*=font] 任意位置有font的class

類選擇器 屬性選擇器 權重是0010

button disabled 禁用按鈕

僞元素選擇器

::first-letter 選擇第一個字

::first-line 選擇第一行

::selection 選中文字的樣式

::before   ::after
div::before {
    content=""; 
}
           

在盒子内部的前面插入内容（行内）

不是真正意義上的元素

權重為0001

必須有content屬性

文字陰影

text-shadow: 水準位置 垂直位置 模糊距離 陰影顔色;

可以多組設定 用逗号隔開

凹凸文字

上左白色下右黑色 凸

反之凹