1.布局

• 靜態(tài)布局
• 彈性布局
  http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
• grid布局

css盒子模型

20140415151801.jpg

.box{
    padding: 20px;
    margin: 20px;
    border:10px solid salmon;
    background: aqua;
    width: 200px;
}

box-sizing

• border-box:為元素設(shè)定的寬度和高度決定了元素的邊框盒。
• content-box:寬度和高度分別應(yīng)用到元素的內(nèi)容框

2.開發(fā)準(zhǔn)備

覆蓋瀏覽器默認(rèn)樣式

*{
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    box-sizing:border-box;
}

提取公共樣式

.flex{
  display:flex;
}
.flex-column{
  flex-direction:column
}
.mt-10{
 margin-top:10px;
}
...

3.居中

3.1 水平居中

文字水平居中

.text-center{
  text-align: center;
}

塊水平居中

.box-center{
  margin：0 auto
}

3.2垂直居中

文字垂直居中

設(shè)置高度

<div class="vertical">
    <span>垂直居中</span>
</div>
.vertical{
  height:32px
  line-height:32px
}

不設(shè)置高度

.vertical span{
  display:inline-block;
  padding:10px
}

塊垂直居中

使用定位

<div class="vertical">
    <div class="box">
        這是一個(gè)快
    </div>
</div>
.vertical{
    width: 200px;
    height: 200px;
    background: cadetblue;
    font-size: 12px;
    position: relative;
}
.vertical .box{
    height: 100px;
    width: 100px;
    background: #91c8c9;
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}

transform屬性

.vertical .box{
    height: 100px;
    width: 100px;
    background: #91c8c9;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

4.偽類&偽元素

偽類

通過選擇器找到那些不存在與DOM樹中的信息以及不能被常規(guī)CSS選擇器獲取到的信息。

• nth-child

/**常用于表格**/
p:nth-child(odd)
p:nth-child(even)
/**靈活運(yùn)用**/
p:nth-child(3n) 3的倍數(shù)項(xiàng)
li:nth-child(n+3) 大于等于三的

• first-child last-child
• hover focus visited
• not 常搭配其他偽類使用

/**常用**/
p:not(:first-child)
p:not(:nth-child(3n)
a:not([])

偽元素

偽元素在DOM樹中創(chuàng)建了一些抽象元素，這些抽象元素是不存在于文檔語(yǔ)言里的

• :after :before

/**清除浮動(dòng)**/
.box:after{
    content: '';
    clear: both;
    display: block;
}
p:after{
 clear:both;
}
/**畫三角形的應(yīng)用**/
p:nth-child(1):before {
    display: block;
    content: '';
    border-width: 8px ;
    border-style: solid;
    border-color:  transparent  transparent transparent darkorange;
    position: absolute;
    left: 100%;
    top: calc(50% - 8px);
}
p:nth-child(1):after {
    display: block;
    content: '';
    border-width: 8px ;
    border-style: solid;
    border-color:  transparent  transparent transparent #fff;
    position: absolute;
    left: calc(100% - 1px);
    top: calc(50% - 8px);
}
/**圖片錯(cuò)誤處理應(yīng)用**/
 <img  src="" :class="{error,error}" alt="自然風(fēng)景"  onerror="error=true">
img.error {
  display: inline-block;
  transform: scale(1);
  content: '';
  color: transparent;
}
img.error::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: #f5f5f5 url(../assets/error_img.svg) no-repeat center / 50% 50%;
}
img.error::after {
  content: attr(alt);
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  line-height: 2;
  background-color: rgba(0,0,0,.5);
  color: white;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  //... 略
}

5.轉(zhuǎn)換

2D轉(zhuǎn)換

• translate()
  根據(jù)左(X軸)和頂部(Y軸)位置給定的參數(shù)，從當(dāng)前元素位置移動(dòng)。
• rotate()
  在一個(gè)給定度數(shù)順時(shí)針旋轉(zhuǎn)的元素。負(fù)值是允許的，這樣是元素逆時(shí)針旋轉(zhuǎn)
• scale()
  該元素增加或減少的大小，取決于寬度（X軸）和高度（Y軸）的參數(shù)：
• skew()
  分別表示X軸和Y軸傾斜的角度，如果第二個(gè)參數(shù)為空，則默認(rèn)為0，參數(shù)為負(fù)表示向相反方向傾斜。
• matrix()
  matrix()方法和2D變換方法合并成一個(gè)。包含旋轉(zhuǎn)，縮放，移動(dòng)（平移）和傾斜功能。

3D轉(zhuǎn)換

• rotateX()
• rotateY()

6.過渡

應(yīng)用場(chǎng)景：元素由一種狀態(tài)變?yōu)榱硪环N狀態(tài)的轉(zhuǎn)變過程

// 抽屜效果
.drawer{
  height: 100%;
  width: 400px;
  background: aqua;
  border-radius: 20px 0 0 20px;
  position: absolute;
  right: 0;
  transition: all 0.4s linear;
  &.hide{
    right:-400px
  }
}
// 一些鼠標(biāo)懸浮效果
button{
  width: 100px;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  border: none;
  background: white;
  transition:all 0.4s;
  &:hover{
    background: #228ab3;
    color:white;
  }
}
// 消息彈出框
.message{
  position: absolute;
  width: 300px;
  border-radius: 6px;
  background: #fff;
  color:#555;
  text-align: center;
  right: -300px;
  top:60px;
  box-shadow: 0px 4px 5px 0px #e9e9e9;
  transition: all 0.4s;
  span{
    padding: 10px;
  }
  &.show{
    right: 50px;
  }
}

7.動(dòng)畫

@keyframes規(guī)則創(chuàng)建動(dòng)畫：指定的變化時(shí)發(fā)生時(shí)使用％，或關(guān)鍵字"from"和"to"，這是和0％到100％相同。0％是開頭動(dòng)畫，100％是當(dāng)動(dòng)畫完成。

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
0%{top:0px;}
20% {top:20px;}
80% {top:180px;}
100% {top:200px;}
}

animation 調(diào)用動(dòng)畫

.move{
  background: aqua;
  width: 100px;
  height: 100px;
  position: absolute;
  animation: mymove 2s ease infinite  alternate;
}
// 旋轉(zhuǎn)
@keyframes mymove
{
  0%{top:0px;transform:rotateX(0deg) rotateY(0deg) rotate(0deg)}
  100% {top:200px;transform: rotateX(230deg) rotateY(230deg) rotate(360deg)}
}

8.剪裁

clip-path

  // 多邊形-右上、右下，左下，左上
  clip-path: polygon(50% 0,100% 100%, 0% 100%, 50% 0);
  // 圓-半徑，圓心坐標(biāo)
  clip-path: circle(50% at 50% 50%);
  // 橢圓-x軸半徑、y軸半徑、圓心坐標(biāo)
  clip-path: ellipse(30% 20% at 50% 50%);
  // 矩形-距上，距右，距下，距左
  clip-path: inset(100px 50px 50px 50px);
  // 實(shí)例 inset(<top> <right> <bottom> <left> round <top-radius> <right-radius><bottom-radius> <left-radius>)
  clip-path:inset(25% 0% 25% 0% round 0% 25% 0% 25%);