position: static //靜態定位
position: relative //相對定位
top:25px; left:30px; //相對於原本在文件流中的位置的偏移，原來佔據的空間沒有動，其他元素也沒有動
position: absolute //絕對定位
top:25px; left:30px; //脫離文件流，相對於頂級元素body重新定位，原來佔據的控制項被**
position: fixed //固定定位
top:25px; left:30px; //完全移出文件流， 類似絕對定位
頁面滾動時，固定定位不隨頁面滾動而移動（其定位上下文是視口）
絕對定位隨頁面滾動而移動（其定位上下文是body）
this is text
div#outer
div#inner
父元素設定relative，子元素設定absolute，形成定位上下文
內部div跟著外部div移動而移動
內部div的top和left屬性的設定是相對於外部div定位
p //塊級元素變成內聯元素
a //內聯元素變成塊級元素
p //元素及其後代元素都不在頁面中顯示，原先佔據的空間被**
p //元素由visible變為隱藏，原先佔據的空間仍然存在
background-color
background-image: url()
background-repeat: repeat/no-repeat/repeat-x/repeat-y/round/space
background-position: center center //5個關鍵字（left top right bottom center）
background-position: 50% 50% //百分比
//背景尺寸
background-size: 50% //縮放，使其填充背景區的一半
background-size: 100px 50px //把調整到100px寬，50px高
background-size: cover //拉大，完全填滿背景區；保持寬高比
background-size: contain //縮放，恰好適合背景區；保持寬高比
//背景粘附
background-attachment: scroll(預設) //背景隨元素滾動而移動
background-attachment: fixed //背景不隨元素滾動而移動
radial-gradient(放射漸變)-從一點向四周發散
注意廠商字首
background: linear-gradient(color1, color2) //預設從上到下，即0%-100%
background: linear-gradient(color1, color2, color3) //0%-50%-100%
background: linear-gradient(left, color1, color2) //從左到右
background: linear-gradient(-45deg, color1, color2) //左上到右下
background: radial-gradient(color1, color2, color3)
//預設漸變形狀
background: radial-gradient(circle, color1, color2, color3)
//圓形漸變
background: radial-gradient(50px 30px, circle, color1, color2, color3)
//設定漸變圓心位置
background: linear-gradient(color1, color2 50%, color3)
//50%處有乙個漸變點
background: linear-gradient(color1 20%, color2 50%, color3 80%)
//20%、80%處有兩個漸變點
background: linear-gradient(color1, color2 25%, color3 50%, color4 75%, color)
//25%、50%、75%處有三個漸變點
background: linear-gradient(color1, color2 25%, color3 25%, color3 75%, color2 75%, color1)
//為同一漸變點設定兩種顏色，能實現突變的效果
-moz-transform: skewx(-45deg) //firefox
-webkit-transform: skewx(-45deg) //chrome,safari
-ms-transform: skewx(-45deg) //ie
-o-transform: skewx(-45deg) //opera
transform: skewx(-45deg) //w3c標準屬性
//必須加vsp的：
border-image, linear-gradient, radial-gradient, transform-origin, background-image
translate, transition, transform, background(針對背景和漸變)
css設計指南 筆記7
過渡屬性 transition property 過渡的css屬性名，如color width transition duration 過渡的持續時間，如2s 500ms transition timing function 過渡的調速函式，如linear ease in ease out ease...
css設計指南 筆記3
計算特指度 ice公式 選擇符中有乙個id，就在i的位置加1 選擇符中有乙個類，就在c的位置加1 選擇符中有乙個標籤名 元素名 就在e的位置加1 得到乙個三位數 body p largetext ul.mylist li 1 1 4特指度 114查理版簡單層疊要點 規則一 包含id的選擇符 包含類的...
css設計指南 筆記2
上下文選擇符以空格作為分隔符，分組選擇符以逗號作為分隔符 上下文選擇符選擇的是所有符合條件的後代元素 包括直接後代和間接後代元素 1.子選擇符 標籤1 標籤2 標籤2必須是標籤1的子元素 反過來，標籤1必須是標籤2的父元素而不是其他祖先元素2.緊鄰同胞選擇符 標籤1 標籤2 標籤2必須緊跟其同胞標籤...