目錄
## 一、變形 transform
### 1、2D變形
> *所有變形都不會影響元素本身的佔位
- 1、位移，保留佔位（類似相對定位）
- translate(x,y) 水平和垂直同時位移
- translateX() 水平位移,正往右，負往左
- translateY() 垂直位移, 正往下，負往上
- 2、旋轉
- rotate(deg) 正順時針，負逆時針
- 3、縮放
- scale(n) scale(n-x,n-y) 水平和垂直同時縮放
- scaleX(n) 水平縮放
- scaleY(n) 垂直縮放
- n 表示縮放的倍數，> 1 放大 0.X 縮小
- 4、傾斜（扭曲）
- skew(x-deg,y-deg) 水平和垂直同時傾斜，只寫一個值表示水平傾斜，垂直不傾斜
- skewX(deg) 橫向拉伸 ，正數往左邊倒 ， 負數往右邊倒
- skewY(deg) 縱向拉伸，正數右側往下 ， 負數左側往下
### 2、3D變形
- 1、位移
- translateZ() Z軸位移，正方向位移靠近（放大） 負方向位移遠離 （縮小）
- translate3d(x,y,z) 三個軸同時位移
- 2、旋轉
- rotateX() 繞X軸旋轉，正順時針（上往裏倒，下往外翻），負逆時針 （下面往裏，上面往外）
- rotateY() 繞Y軸旋轉， 正順時針 （右邊往裏，左邊往外），負逆時針（左邊往外，右邊往裏）
- rotateZ() 繞Z軸旋轉,正順時針，負逆時針
- rotate3d(x-n,y-n,z-n,deg)
- n ： 代表三個軸的矢量，0 不轉， 1 正方向旋轉 ，-1 負方向旋轉
- deg : 旋轉的度數
- 3、縮放
- scaleZ(n) Z軸縮放
- scale3d(x,y,z) 三個軸同時縮放
## 二、3d環境設置
- 1、視距設置 perspective:600-2000px;
> 模擬視圖和人眼的距離，讓3d變形的元素呈現遠小近大的效果，需要設置給父元素或者祖先元素
- 2、變形風格
```
transform-style: flat; 父元素3d變形時，子元素3d效果失效
transform-style: preserve-3d; 保留子元素的3d效果
```
- 3、變形原點
```
transform-origin: left/center/right/100px/50% top/center/bottom/100px/50%;
```
## 三、彈性盒佈局 （flex-box）
> css3提供得一種新得佈局方式
> 彈性盒佈局得目的是提供一種更加有效得方式來規定彈性盒子內部子元素的排列方式，對齊方式，空白空間的分配。
> 當把元素設置爲彈性容器之後，裏面的子元素 float/display/vertical-align屬性會失效
> 彈性容器改變的是直接子元素的排列方式/對齊方式，不會對子元素內部的元素產生影響
### 容器屬性
1、設置彈性盒容器
```
display:flex/inline-flex;
- flex : 把元素設置爲彈性容器，元素本身的屬性爲塊級
- inline-flex: 把元素設置爲彈性容器，元素本身的屬性爲行內
```
2、設置主軸方向
```
主軸方向決定項目的排列方式
flex-direction:row|row-reverse|column|column-reverse;
- row :默認， 從左到右
- row-reverse: 從右到左
- column: 從上到下
- column-reverse: 從下到上
```
3、設置項目在主軸上的對齊方式
```
具體效果和主軸的方向有關，這裏以主軸方向默認從左到右爲例
justify-content:flex-start|flex-end
- flex-start ：默認， 主軸的開始位置對齊（左對齊）
- flex-end : 主軸的結束我位置對齊 （右對齊）
- center : 主軸中間對齊
- space-between: 在每兩個項目之間留出相同的空白，主軸的開始和結束沒有空白
- space-around: 在每個項目兩邊留出相同的空白，兩個項目之間就是雙倍空白
- space-evenly: 主軸開始和結束以及每一個項目之間都是相同的空白
```
4、設置項目在交叉軸上的對齊方式
```
以主軸從左到右，交叉軸從上到下
align-items: stretch|flex-start|flex-end|center|baseline;
- stretch :默認， 拉伸，當項目沒有設置固定高，會進行拉伸佔滿容器高度
- flex-start : 交叉軸的開始位置對齊（頂部對齊）
- flex-end : 交叉軸的結束位置對齊（底部對齊）
- center : 交叉軸的中間對齊
- baseline: 基線對齊
```
5、項目換行
```
flex-wrap:no-wrap|wrap|wrap-reverse;
- no-wrap: 默認，不換行，項目被壓縮
- wrap: 換行
- wrap-reverse : 換行，顛倒行的順序
```
6、多行在交叉軸上的對齊方式
```
align-content:stretch|flex-start|flex-end|center|space-around|space-between;
- stretch :默認，拉伸，當項目沒有設置固定高，拉伸佔滿整個容器，比如有兩行，每一行高度佔容器的1/2，如果項目設置了固定高，項目在每一行的空間上頂部對齊
- flex-start ： 多行在交叉軸的開始對齊（頂部）
- flex-end ： 多行在交叉軸的結束對齊（底部）
- center : 交叉軸中間對齊
- space-around : 每一行前後留出相同的空白
- space-between ： 每兩行之間留出相同的空白
```
### 項目屬性
1、規定項目的排序
```
order:number;
默認值都是0，數字越大排序越靠後,數字相同,按照代碼順序排列
```
2、規定項目放大比例
```
flex-grow:number;
默認項目的放大比例都是0 ，就是不放大，如果都是1就是等比放大，如果設置不同的數字，就按照數字比例等比放大
```
3、規定項目壓縮比例（項目總寬度超出容器寬度，不換行）
```
flex-shrink:number;
默認值是1，表示所有的項目等比縮小,0表示不縮小，設置不同數字，就按照數字比例等比縮下
```
4、規定指定項目的在交叉軸上的對齊方式
```
align-self: 取值同容器的align-items屬性
```
## 四、css預處理
> css預處理就是定義了一種新的語言。
> 基本思想是通過一種專門的編程語言，爲css增加一些編程的特性，通過這種編程語言(預處理語言)編寫css代碼（這種語言不能直接運行在瀏覽器上），然後通過指定編譯器編譯成css文件，最後運用到網頁中。
> 比較成熟的css預處理語言有less/sass(scss);
> 優點：使用預處理語言可以使css代碼更加簡潔，適應性更強，可讀性和可維護性更好。
## 五、less
### 使用less
- 編譯less插件 -- Easy LESS
- 創建 less 文件 -- 編輯 -- 保存 -- 自動生成同名的 .css文件
### less語法
- 1、導入樣式
- 導入css文件
```
@import "reset.css";
如果導入的使.css文件，就是把這句代碼直接複製進編譯過後的css文件中
編譯後：
@import "reset.css";
```
- 導入less文件
```
@import "reset.less"; 導入less文件，可以省略後綴名
@import "reset";
如果導入的使.less文件，把reset.less中的代碼複製一份合併到目標文件中
編譯後：
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
img {
vertical-align: middle;
}
```
- 2、註釋
- css註釋
```
/*
這是css的註釋，less中可以顯示，並且會被編譯進css文件中
*/
```
- less註釋
```
// 這是less註釋，只在less文件中顯示，不會編譯進css文件中
```
- 3、變量
```
變量類似於容器，可以用來存儲一些值，後期可以通過變量名去反覆調用變量裏面的值，有利於頁面後期更換風格（維護）
變量命名必須要加 @ 後面的變量名儘量使用有意義的單詞和數字組合
@變量名:值;
@main-color:#00ff00;
@sub-color:orange;
@fs-lg:14px;
.box{
width:100px;
height:100px;
background-color:@main-color;
color:@sub-color;
font-size:@fs-lg;
}
```
### 4、混入
> 把一個類A混入到另一個類B中，使B類繼承了類A裏面的代碼，並且可以傳參
- 1)、不帶參數的混入
> less:
```
.size{
width: 100px;
height: 100px;
}
.box1{
.size;
background-color: red;
}
```
> 編譯後css：
```
.size{
width: 100px;
height: 100px;
}
.box1{
width: 100px;
height: 100px;
background-color: red;
}
```
- 2）帶參數的混入
> less:
```
/* 混入的類名後面只要帶了() 這個類本身就不會被編譯進css文件中*/
.size(@w,@h){ //混入的類內部需要幾個可以變的值，就定義幾個參數（形參）,形參的語法和變量相同，多個用逗號隔開
width: @w;
height: @h;
}
.box1{
.size(100px,200px); // 調用混入的類時，需要傳入具體的數值（實參），一般和形參需要一一對應
}
.box2{
.size(200px,300px);
}
```
> 編譯後css：
```
.box1{
width:100px;
height:200px;
}
.box2{
width:200px;
height:300px;
}
```
- 3）帶參數和默認值的混入
> less
```
.size1(@w:100px,@h:100px){ // 形參後面通過冒號添加默認值
width: @w;
height: @h;
}
.box5{
.size1; // 當調用類不傳實參，使用默認值
}
.box6{
.size1(200px,300px); //調用類傳入了實參，就會覆蓋默認值
}
.box7{
.size1(400px); //實參個數比形參少，默認按照順序匹配，沒有匹配到實參的參數依然使用默認值
}
.box8{
.size1(@h:500px); // 可以添加形參名稱和值指定實參匹配那個參數
}
```
> 編譯後css
```
.box5{
width: 100px;
height: 100px;
}
.box6 {
width: 200px;
height: 300px;
}
.box7 {
width: 400px;
height: 100px;
}
.box8 {
width: 100px;
height: 500px;
}
```
- 4)、@arguments 參數集合
>less:
```
.boxShadow(@h,@v,@blur,@s,@color){
box-shadow: @h @v @blur @s @color;
}
.boxShadow(@h,@v,@blur,@s,@color){
box-shadow: @arguments; //和上面的代碼等效
}
.box3{
.boxShadow(0px,5px, 10px, 0px, #333)
}
.box4{
.boxShadow(5px,0px, 20px, 0px, red)
}
```
>編譯後css：
```
.box3 {
box-shadow: 0px 5px 10px 0px #333;
}
.box4 {
box-shadow: 5px 0px 20px 0px red;
}
```
### 5、嵌套
> less：
```
.header{
height: 50px;
background-color: #333;
.left{
float: left;
ul{
list-style: none;
line-height: 50px;
li{
float: left;
background-color: orange;
a{
color: #fff;
&:hover{ // 添加&符表示繼承父級選擇器 （不添加空格）
color:#f00;
}
}
}
}
}
}
```
> 編譯後css：
```
.header {
height: 50px;
background-color: #333;
}
.header .left {
float: left;
}
.header .left ul {
list-style: none;
line-height: 50px;
}
.header .left ul li {
float: left;
background-color: orange;
}
.header .left ul li a {
color: #fff;
}
.header .left ul li a:hover{
color: #f00;
}
```
### 6、繼承
> 類似於簡單的混入，把一個類繼承到另一個類當中，但是混入是複製，會產生代碼冗餘，繼承則不會
> less :
```
less :
.size{
width: 100px;
height: 100px;
}
.box{
&:extend(.size);
background-color: red;
}
```
> 編譯後css：
```
.size,
.box{
width: 100px;
height: 100px;
}
.box {
background-color: red;
}
```
### 7、計算
> less ：
```
.box2{
//多個數字參與運算，有一個值以上帶單位
width: 1000px/2;
height: 20*10px;
border-width: 20-18px;
border-radius: 10+5px;
margin: (10-5px)*20; // 可以通過（）提升運算的優先級
}
```
> 編譯後css:
```
.box2 {
width: 500px;
height: 200px;
border-width: 2px;
border-radius: 15px;
margin: 100px;
}
```
## 六、calc函數
> css3中提供的運算函數，不兼容低版本瀏覽器
> 支持加減乘除運算，運算符兩邊需要添加空格
```
width:calc(100% - 200px);
```
## 七、移動端瀏覽器及內核
- 主流手機瀏覽器： 蘋果、百度、qq、uc、360...
- 內核：大部分的核心都是webkit內核，不需要過多考慮新技術的兼容性（html5+css3都可以用）
## 八、viewport（視口）設置
- 佈局視口： 認爲是html寬度，移動端一般是默認設置爲一些固定的值（980或者1024），比屏幕寬度要大
- 視覺視口： 用戶看到的網頁區域，相當於屏幕的寬度
- 理想視口：佈局視口對用戶不友好，沒有考慮到手機尺寸，所以蘋果公司引入理想視口概念，那些基於理想視口而設計的網站，不需要用戶手動縮放，也不需要出現橫向滾動條，網站的所有內容都可以正常的呈現給用戶( 把佈局視口進行設置，讓它和視覺視口相匹配)
1、設置viewport
```
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
```
- `width=device-width`: 讓佈局視口和視覺視口相匹配（html寬度 等於 設備的寬度）
- `initial-scale=1.0` : 頁面初始的縮放值，爲數字，可以是小數,一般設置爲1.0
- `user-scalable=no`: 是否允許用戶進行縮放，'no'爲不允許，'yes'爲允許
- `maximum-scale=1.0`: 用戶可放大的最大值
- `minimum-scale=1.0`: 用戶可縮小的最小值
## 九、rem 佈局
通過js動態計算一個最新的rem值：
```
<script>
// 1、先獲取設備的寬度（等同於html的寬度）
var deviceWidth = document.documentElement.clientWidth; //html寬度
// 2、計算出一個最新的rem的值
if(deviceWidth>750){
deviceWidth = 750;
}
var r = deviceWidth*100/750; // 750指的是設計稿寬度，根據實際拿到的設計稿尺寸去修改
// 3、把計算出來的最新的rem值設置給html的font-size
document.documentElement.style.fontSize = r + 'px';
</script>
```