目錄
## 一、定位position
> 佈局方法：文檔流、浮動、層佈局（定位）
- 三種定位：相對定位、絕對定位、固定定位
> 定位元素的層級設置： 設置了定位的元素可以通過z-index屬性調整層級關係，默認值都是0，數字越大層級越高，數字相同，層級跟標籤的順序有關，標籤越靠後層級越高
### 1、相對定位（子絕父相）
- position:relative;
- 不脫離文檔流，在文檔中原本的位置依然爲其保留
- 偏移參考位置： 元素本身在文檔流內原本的位置
### 2、絕對定位
- position:absolute;
- 脫離文檔流，在文檔中原本的位置不保留
- 偏移參考位置(定位父級)： 離絕對定位元素最近的一個帶有position屬性的祖先元素，如果不存在這樣的元素就是參考body定位
### 3、固定定位
- position:fixed;
- 固定定位的元素會脫離文檔流，在文檔流中原本的位置不保留
- 偏移參考位置: 瀏覽器的可視區
```
定位偏移屬性偏移屬性：
left : 正右,負左
right： 正左,負右
top ： 正下,負上
bottom： 正上,負下
left/top和right/bottom通常使用一個，如果同時使用left/top生效
脫離文檔流的元素不會自動佔滿一行，寬度默認是由內容撐開
```
### 4、靜態定位
- position:static;
- 沒有定位，偏移屬性失效（left/right/top/bottom）
- 層級(z-index)也失效
## 二、圓角
- 簡寫屬性：
```
border-radius:10px; 四個角圓角半徑統一
border-radius:10px 20px; 左上和右下 右上和左下
border-radius:10px 20px 30px; 左上 右上和左下 右下
border-radius:10px 20px 30px 40px; 左上 右上 右下 左下
border-radius:50%;---是個圓
```
- 分解屬性
```
border-top-left-radius: 20px;
border-top-right-radius: 40px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 80px;
```
## 三、變形 transform
```
transform:rotate(-30deg) scale(0.5,2);
```
1、旋轉
- transform:rotate(30deg); 正數順時針，負數逆時針
2、縮放
- transform:scale(n); 水平和垂直同時縮放 n 取值 0-1之間縮小 , n>1 就是放大
- transform:scale(n-x,n-y); n-x：水平方向的縮放值,n-y垂直縮放值
## 四、關鍵幀動畫
1、定義動畫的關鍵幀
```
@keyframes 動畫名稱{
0%{
}
25%{
}
50%{
}
75%{
}
100%{
}
}
```
2、調用動畫
```
animation: move 3s linear infinite alternate;
```
- animation: animation-name animation-duration animation-iteration-count animation-timing-function animation-delay animation-direction;
- animation-name: 調用的動畫名稱
- animation-duration:整個動畫過程需要的時間 s(秒)/ms(毫秒)
- animation-iteration-count:動畫執行的次數 n/infinite（無限次）
- animation-timing-function: 動畫速度曲線
- ease 慢-快-慢
- linear 勻速
- ease-in 慢-快
- ease-out 快-慢
- ease-in-out 慢-快-慢
- cubic-bezier(.08,.73,.42,.93) 貝塞爾曲線 https://cubic-bezier.com/
- animation-delay: 動畫延遲時間 s/ms
- animation-direction: 動畫的方向 alternate(輪流反向)
- animation-fill-mode: 動畫結束位置 forwards(停在重點)
```
關鍵幀動畫： 可自動調用，動畫可設多個節點（狀態），可多次（無限次）運行
過渡動畫：不可自動執行,需僞類觸發，動畫只有兩個狀態，觸發一次運行一次，不會反覆運行
```
## 五、過渡動畫
>過渡使用場景：一般用於元素正常狀態和鼠標移入狀態（:hover）屬性變化時，出現平滑過渡效果
```
transition:transition-property transition-duration transition-timing-function transition-delay;
```
```
transition-property:過渡的屬性名 ，all(所有變化的屬性都過渡)
transition-duration:過渡的時間 s/ms
transition-timing-function: 過渡的速度曲線，取值同關鍵幀動畫
transition-delay：過渡延遲時間 s/ms
```
- 多個屬性過渡
```
transition: width 2s linear,height 4s ease,...;
```
- 示例
```
情況1：
.box{
width: 100px;
transition:all 0.5s linear; <!-- 鼠標脫離時的過渡 -->
}
.box:hover{
width: 200px;
transition:all 2s linear; <!-- 鼠標懸停時的過渡 -->
}
情況2：
.box{
width: 100px;
<!-- 鼠標脫離時沒有過渡效果 -->
}
.box:hover{
width: 200px;
transition:all 2s linear; <!-- 鼠標懸停時的過渡 -->
}
情況3：
.box{
width: 100px;
transition:all 0.5s linear;<!-- 鼠標懸停和脫離時都有過渡，並且效果相同 -->
}
.box:hover{
width: 200px;
}
```
## 六、陰影
1、 盒子陰影
```
box-shadow:x-shadow y-shadow blur spread color inset;
- x-shadow : 必需，水平陰影位置 ，正數向右偏移，負數向左偏移
- y-shadow : 必需，垂直陰影位置 ，正數向下偏移，負數向上偏移
- blur : 可選，陰影的模糊距離
- spread: 可選，陰影的擴展尺寸
- color: 可選，陰影的顏色
- inset: 可選，不設置表示外陰影，設置inset表示內陰影
多組陰影：
box-shadow:x-shadow y-shadow blur spread color inset,x-shadow y-shadow blur spread color inset, ... ;
```
2、 文字陰影
```
text-shadow:x-shadow y-shadow blur color;
- x-shadow : 必需，水平陰影位置 ，正數向右偏移，負數向左偏移
- y-shadow : 必需，垂直陰影位置 ，正數向下偏移，負數向上偏移
- blur: 可選，陰影的模糊距離
- color:可選，陰影的顏色 默認和文字顏色相同
多組陰影：x-shadow y-shadow blur color,x-shadow y-shadow blur color,...;
```
## 七、三角和箭頭
1、小三角：
> 實現思路：把盒子寬高設置爲0,保留一個邊框的顏色，其他邊框設置爲透明
```
.box{
width: 0px;
height: 0px;
border: 50px solid;
border-color: turquoise transparent transparent;
}
```
2、小箭頭：
> 實現思路：實現兩個三角，通過定位讓兩個三角部分重疊，上一層三角顏色設置成和背景相同的顏色
```
<div class="arrow1"></div>
.arrow1{
position: relative;
width: 0px;
height: 0;
border: 50px solid;
border-color: turquoise transparent transparent;
margin-top: 10px;
}
.arrow1::after{
position: absolute;
left: -50px;
top: -55px;
content: '';
width: 0px;
height: 0px;
border: 50px solid;
border-color: #fff transparent transparent;
}
```
## 八、透明兼容
1、rgba() 模式顏色： 可以給文字和背景設置顏色(IE低版本不兼容)
> 給元素設置背景透明時，不會影響裏面的內容
2、opacity:0-1; 0完全透明，1不透明，0.X半透明(IE低版本不兼容)
> 元素整體透明，元素本身以及裏面的內容全部透明
3、filter:alpha(opacity=50) IE低版本瀏覽器專用透明濾鏡，效果等同於opacity屬性，0代表完全透明，100代表不透明
## 九、居中技巧
1、方法一： 父級的尺寸未知，子元素的尺寸已知
```
.outer{
position:relative; /*父元素相對定位*/
}
.inner{
width:300px;
height:200px;
position:absolute; /* 子元素絕對定位*/
left:50%; /*盒子偏右*/
top:50%; /*盒子偏下*/
margin-left:-150px; /* 設置爲子元素寬度的一半（負值），往左移*/
margin-top:-100px; /* 設置爲子元素高度的一半（負值），往上移*/
}
```
2、方法二： 父級的尺寸和子元素的尺寸都可以未知
```
.outer{
position:relative; /*父元素相對定位*/
}
.inner{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
width:300px;
height:200px;
}
```
## 十、浮動和定位對比
> 佈局方法：文檔流、浮動、層佈局（定位）
- 文檔流：指的是元素按照本身的屬性進行排列，塊元素從上往下垂直排列，行內元素從左往右
- 浮動（水平佈局）：
- 通常用來實現水平得多列布局（左右、左中右、四列、五列）
- 所有元素（塊級、行內、行內塊）都可浮動
- float:left/right; 會使元素脫離文檔流
- 浮動的元素會脫離文檔流,不脫離文本流（文字、圖片、表單元素不會被浮動元素覆蓋）
- 定位（層佈局）：
- 通常用來實現元素之間固定的位置關係，或者有覆蓋關係的
- 所有元素（塊級、行內、行內塊）都可定位
- position:absolute/fixed;會使元素脫離文檔流
- 定位的元素既脫離文檔流，又脫離文本流
- 脫離文檔流的元素特點：
- 不再區分行內和塊級
- 默認寬高都是由內容撐開
- 能設置寬高，所有盒模型屬性
## 十一、css精靈圖（雪碧圖）
> 英文叫法 CSS sprites , “css貼圖定位”或“css
圖像拼合”。原理-把一些小圖片拼在一張圖片上，通過背景引入，用背景定位調整顯示的圖標。
適合一些小圖標，不適合大圖背景。
- 優點：
- 1、減少網頁http請求次數，提高頁面的性能
- 2、減少圖片命名困擾
- 3、更換風格方便
- 缺點：
- 1、必須要規定好容器的尺寸，背景定位的值也必須精確計算，相對比較麻煩
## 十二、PS操作
```
1、移動工具 ：用來定位圖層，或者移動圖層
2、歷史記錄 : 用來返回前面一些操作
- 撤回 ctrl+z 撤回多步 ctrl+shift+z
- 直接返回初始狀態 F12
3、吸管工具： 用來取頁面的色值
4、標尺工具：用來量尺寸
5、放大鏡工具： 用來放大或者縮小畫布
- ctrl+ 加號 放大
- ctrl+ 減號 縮小
- 按住alt + 鼠標滾輪 向上滾動放大 向下滾動縮小
6、抓手工具：用來移動整個畫布
- 按住空格鍵 + 鼠標左鍵按下拖拽
7、文字工具：添加文字圖層，或者選取文字圖層，查看文本樣式信息
8、保存切片：
- 存儲爲web所用格式，快捷鍵：ctrl+alt+shift+s
- 設置切片格式和品質
- 切片選項：
- 所有切片（劃分的切片 + 整個頁面剩餘的部分）
- 用戶切片（指的是自己劃的切片）
- 選中的切片 （指定部分切片保存）
9、ctrl+T ： 自由變換工具，改變圖層大小
```
```
1、網頁中的常見圖片格式
- jpg 色彩豐富，文件相對小,有損壓縮，反覆保存質量下降 使用場景-廣告/商品圖/照片
- gif 支持動圖,文件小 只支持256種顏色 色彩簡單的小圖標icon/動圖
- png 支持透明,簡單圖尺寸較小 色彩豐富的圖片尺寸大，不支持動圖，適用透明圖片
- webp 支持透明、動畫,文件小、質量高 瀏覽器兼容性不好 只能在支持它格式的設備上顯示
2、 切透明圖標
- 方法一：
- 定位到圖層-去掉顯示爲透明、最下面圖層6 layer0也隱藏--
- 切片-存png24半透明/全透明 png8是全透明
- 方法二：
- 複製小圖標，新建粘貼 去掉背景即可看透明圖標---ctrl a全選+ctrl c複製+ ctrl n新建時是選擇設置爲透明
3、製作精靈圖
- 複製小圖標（ctrl a +ctrl c) 複製圖層 （ctrl j）--點擊圖層-混合選項-顏色疊加--設置圖標顏色
- 圖層編組 ctrl+G
- 合併圖層 ctrl+E
4、靜態大banner圖優化
- 從重要內容使用img標籤，修飾的圖案使用背景圖片這個原則，需要把中間部分切成圖片 ，兩邊剩餘的部分作爲大背景圖
- 中間部分可以再劃分成幾個小切片，爲了防止網絡情況不好大圖請求超時
```