新增模組：
1、選擇器模組
2、邊框和背景
3、使用者介面
4、漸變
5、動畫
6、2d和3d
瀏覽器私有字首:
瀏覽器廠商使用一種方式提前把屬性納為自己的標準,按時該屬性還沒有成為標準
字首: ie -ms- -ms-border-radius:
chrome和safari -webkit- -webkit-border-radius:
opera -o-
firefox -moz-
自動新增屬性私有字首: autoprefix
ctrl+shift+p
如果屬性不是標準,會自動新增私有字首.
如果沒有新增字首說明屬性已經成為乙個標準,每個瀏覽器都可以識別
css2 屬性選擇器:
（1） [attr]： 選中帶有attr屬性的元素
（2） [attr=val]： 選中帶有attr屬性並且其屬性值為val的元素
（3）[attr~=val]： 選中帶有attr屬性並且其詞列表(有多個屬性值)中有乙個為val的元素
css3 屬性選擇器:
（1）[attr^=val]： 選中帶有attr屬性並且其值是以val字元開頭的元素
（2）[attr$=val]： 選中帶有attr屬性並且其值是以val字元結束的元素
（3）[attr*=val]： 選中帶有attr屬性並且其值中包含val字元的元素
2、新增狀態偽類選擇器
（1）:disabled： 選中禁用狀態的表單元素
（2）:enabled： 選中可用狀態的表單元素
（3） :checked： 選中單多選框被選中的元素
（4）::selection： 選擇被選中元素(一般針對滑鼠選中文字)
3、新增結構偽類選擇器
（1）ele:first-child： 選擇ele父元素中得第乙個元素
（2）ele:last-child ： 選擇ele父元素中得最後乙個元素
（3） ele:nth-child(n)： 選擇ele父元素中得第n個元素
n值：自然數
2n：選擇2的倍數的元素(任何倍數都可以)
-n+4 (1-4)：選擇前四個元素
（4）ele:nth-last-child(n) ：選擇ele父元素中的倒數第n個元素
（5）ele:first-of-type： 選擇ele父元素中型別為ele的第乙個元素
（6） ele:last-of-type： 選擇ele父元素中型別為ele的最後乙個元素
（7）ele:nth-of-type(n)： 選擇ele父元素中型別為ele的第n個元素
（8）ele:nth-last-of-type(n) ：選擇ele父元素中型別為ele的倒數第n個元素
1、resize： 定義元素是否可拉伸
none：不可以拉伸
both： 兩個方向都可以拉伸
vertical： 垂直方向可以拉伸
horizontal： 水平方向可以拉伸
【注】：需要和overflow: hidden | auto | scroll一起使用
2、 box-sizing 定義元素區域的計算方式
content-box ：內容盒子(預設) ——元素實際大小: width+ padding+border
border-box ：邊框盒子——元素實際大小 = width
1、盒子陰影
書寫格式——box-shadow: x-shadow y-shadow blur size color inset/outset
x-shadow 水平方向的偏移量
y-shadow 垂直方向的偏移量
blur 模糊距離
size 陰影大小
color 陰影顏色
inset 內陰影 outset **影(預設值)
【注】：陰影不佔位，且可以同時設定多個陰影,多個陰影之間逗號隔開
2、文字陰影
書寫格式——text-shadow: x-shadow y-shadow blur color;
x-shadow 水平方向偏移量
y-shadow 垂直方向偏移量
blur 模糊距離
color 顏色
【注】：可以同時設定多個陰影,逗號隔開
1、多背景圖
background-image: url(),url()…
可以同時設定多個背景,多個之間逗號隔開，路徑越靠前,顯示越靠上
2、背景大小
background-size:
值可以是具體的畫素值，也可以是百分比
【注】：如果只設定乙個方向的大小,另乙個方向等比縮放
3、背景鋪設位置
background-origin:
content-box ： 內容開始
padding-box ： 內邊距開始(預設值)
border-box ： 邊框開始
4、背景的裁切方式
background-clip:
content-box： 保留內容區域的背景圖
border-box ： 保留邊框以內區域的背景圖
padding-box ： 保留內邊距以內區域的背景圖
background-image: 漸變
【注】 (把乙個漸變當作乙個背景處理)
1、線性漸變
background-image: linear-gradient()
linear-gradient(to 方向,顏色1 顏色節點,顏色2 顏色節點,顏色3 顏色節點…)
方向: 預設從上往下
top | bottom | left| right
2、重複線性漸變
repeating-linear-gradient(to 方向,顏色1 顏色節點,顏色2 顏色節點,顏色3 顏色節點…)
1、徑向漸變:
background-image:radial-gradient(漸變原點,漸變形狀,顏色1 顏色結點,顏色2 顏色結點…)
漸變原點(需要加私有字首): left | top | right | bottom | px | %
漸變形狀: ellipse 橢圓 circle 圓形
2、 重複徑向漸變:
repeating-radial-gradient(漸變原點,漸變形狀,顏色1 顏色結點,顏色2 顏色結點…)
前端學習日記11
transition transition propertype transition duration transiton timing function transition delay 過渡的復合屬性 其中，過渡的持續時間不可以省略 參與過渡的屬性省略 預設是all 過渡的速度變換曲線省略 預...
前端學習日記12
1 lumn count 3 分欄的數量 2 column gap 50px 欄目和欄目之間的間距 3 column width 500px 欄目的寬度 4 column rule 5px dotted yellow 欄目和欄目之間的邊線 邊框一樣 5 column span all 標題橫跨的列數...
前端學習日記05
讓標籤相對於某個元素重新定義乙個新的位置，可以相對於元素本身的位置，或者相對于父元素，甚至相對於瀏覽器視窗進行定位 屬性 position 值 1 relative 相對定位 特點 相對於元素本身的位置 不脫離文件流,仍然佔位 使用場景 微調元素位置 2 absolute 絕對定位 相對於離他最近的...