1、瀏覽器默認(rèn)樣式消除
2、relative 相對(duì)自身左上角的元素點(diǎn)定位，sticky粘性定位兼容性不好，inherit繼承父元素定位，initial設(shè)置css屬性默認(rèn)值，fixed相對(duì)瀏覽器窗口定位，absolute是以第一個(gè)position為relative或absolute定位，如果它的父級(jí)元素都沒(méi)有，就是相對(duì)于body定位的。
3、選擇器的種類(lèi)：后代選擇器 空格；子類(lèi)選擇器 >；兄弟選擇器 ~；相鄰兄弟選擇器 +；交集選擇器 不加分隔；并集選擇器 逗號(hào)分隔；
優(yōu)先級(jí)：!important > 行內(nèi)樣式 > id > class =偽類(lèi)=偽元素> 標(biāo)簽 > 通配符 * > 繼承 > 默認(rèn)樣式
通過(guò)js可以去修改已經(jīng)寫(xiě)好的所有樣式
4、偽類(lèi)選擇器 :link :visited :hover :active :focus

• 偽類(lèi)的特效實(shí)現(xiàn)：https://juejin.im/post/5f1ecfe7f265da22eb2a8c42#heading-27

5、塊級(jí)元素：div h table form ul dl p 行級(jí)元素：span img a input
6、rem是相對(duì)于html根元素的字體 em是相對(duì)于父元素的字體
7、英文換行單詞不截?cái)啵J(rèn)的行為）設(shè)置了word-break:break-all 會(huì)截?cái)?br> 8、保留文本格式：white-space: pre-wrap;
9、單行文本超出省略號(hào)： overflow:hidden; text-overflow: ellipsis; white-space: nowrap;
多行 webkit內(nèi)核使用display: box; box-orient: vertical; line-clamps: 3; overflow: hidden;
weex 可用內(nèi)置的lines: 3; text-overflow: ellipsis; 解決
10、box-sizing: border-box； context-box; 寬高的設(shè)置作用
12、vw和vh 分別作為屏幕寬度、高度的百分之一，通過(guò)calc(100vw / 750 * 1)
13、層級(jí)，定位>浮動(dòng)>標(biāo)準(zhǔn)流（默認(rèn)為0）> z-index負(fù)值；同級(jí)的后面的更高，z-index設(shè)置值只對(duì)定位元素有效（position屬性值為 relative 或 absolute 或 fixed的對(duì)象），沒(méi)有定位的（默認(rèn)定位的）無(wú)效，當(dāng)父元素z-index有效則首先遵循父元素的定位；父元素的定位無(wú)效則子元素的定位有效
15、animition和transition

• animition可以設(shè)置動(dòng)畫(huà)的次數(shù)，進(jìn)入觸發(fā)，可以設(shè)置多個(gè)幀，作用于元素本身
• transition 需要借助hover或js進(jìn)行觸發(fā)，觸發(fā)就執(zhí)行一次，作用于樣式
• canvas 繪制

// animition: 關(guān)鍵幀 時(shí)間 過(guò)渡效果 延遲時(shí)間 周期（n/infinite）正向反向（altermate奇正偶反） 靜態(tài)效果 當(dāng)前狀態(tài)指定
div {
  animation: demo 2s infinite(循環(huán));
}
@keyframes demo {
    0%{
       transform: rotate(0)   
}
    100% {
       transform: rotate(30deg)
 }
}
// transition: 過(guò)渡屬性 時(shí)間 過(guò)渡效果 延遲時(shí)間
div {
 transition: all 2s linear (過(guò)渡效果默認(rèn)ease) 2s(delay 延遲時(shí)間) 
}
div:hover {
 transform: rotate(30deg)
}
// canvas
ctx = document.getElementById('canvas').getContext('2d')
ctx.rotate(30*Math.PI/180)
ctx.fillRect(0,0, 300,200)

canvas

https://www.twle.cn/l/yufei/canvas/canvas-basic-gradient-line.html

偽元素選擇器和偽類(lèi)選擇器

更多： http://www.itdecent.cn/p/dfc749ba0eab

之前這兩種選擇器都是用：來(lái)標(biāo)志，而在css3之后偽類(lèi)用：標(biāo)識(shí)。偽元素選擇器用:：來(lái)標(biāo)識(shí)，而兩者的區(qū)別在于：

• 偽類(lèi)是我們用于標(biāo)志一些狀態(tài)或者是邏輯關(guān)系的選擇器比如:link :visited :hover : active : focus :first-child :last-child :first-of-type :last-of-type
• 偽元素選擇器，不進(jìn)行選擇元素而是在元素的之前或者之后（等同于但是實(shí)際上不是）創(chuàng)造一個(gè)新的元素從而實(shí)現(xiàn)某些效果，如::after ::before ::first-letter ::first-line ::selection
  1、偽元素需要借助一個(gè)content來(lái)給真實(shí)的dom元素添加一些文字或圖形，這個(gè)添加的content不在dom樹(shù)上但是可以操縱，需要在css上定義，但是不可以被選擇

css3新特性

• 過(guò)渡 動(dòng)畫(huà) 形狀轉(zhuǎn)換 transition animation transform
• flex grid布局
• 文字換行 word-break
• 邊框陰影和圖片 border-shadow border-image
• background-clip 制定背景繪制（顯示border-box; padding-box; content-box）區(qū)域 background-origin 對(duì)比clip來(lái)說(shuō)是定位，clip是裁切； background-size
• 盒模型定義：box-sizing: border-box; box-sizing: content-box

實(shí)現(xiàn)一個(gè)0.5px的線(xiàn)(用偽類(lèi)來(lái)實(shí)現(xiàn))

1、漸變一半有顏色一半透明

.linear:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-image:linear-gradient(0, transparent 50%, red 50%) // 角度 90deg 方向 to bottom right
  // background-image: radial-gradient(circle, red, yellow, green);  放射漸變 默認(rèn)橢圓 可設(shè)置百分比
}
// canvas漸變
let gradient = ctx.createLinearGradient(0,0,0,10) // 起點(diǎn)和終點(diǎn)
// let gradient = ctx.createRadialGradient(300,300, 300,300,300, 0) 漸變的起點(diǎn)圓心 半徑 結(jié)束圓心 半徑
gradient.addColorStop(0, "white")
gradient.addColorStop(1, "green")
ctx.fillStyle = gradient
ctx.fillRect(0,0, 300,1)

2、壓縮到原來(lái)的1/2

.linear:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  border: 1px solid red;
  transform: scaleY(0.5);
}

3、四周

.linear:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border: 1px solid red;
  transform-origin: 0 0;
  transform: scale(0.5, 0.5)
}