值得關注的選擇器

選擇器分類

元素選擇器???????????? a{}

偽元素選擇器???????? ::before{} //真實存在的容器

類選擇器???????????????? .link{}

屬性選擇器???????????? [type=radio]{}

偽類選擇器???????????? :hover{} //元素的狀態

ID選擇器?????????????? #id{}

組合選擇器???????????? [type=checkbox] + label{}

否定選擇器???????????? :not(.link){}

通用選擇器???????????? *{}

選擇器權重

ID選擇器器???????????? +100

類 屬性 偽類器?????? +10

元素 偽元素器???????? +1

其它選擇器器????????? +0

計算一個不進位的數字

#id .link a[href]

計算：

#id????????? +100

.link?????? +10

a?????????????? +1

[href]????? +0

結果：111

#id .link.active
#id       +100
.link       +10
.active   +10
結果：120

不進位

只要有id選擇器，就是最大，類選擇器再多也不會進位，只能在自己位上

百位????十位????個位

其他選擇器權重

!important優先級最高

元素屬性優先級高 //元素的屬性 > 外部樣式表 (style標簽，外部樣式表)

相同權重后寫的生效

非布局樣式

字體、字重、顏色、大小、行高

背景、邊框

滾動、換行

粗體、斜體、下劃線

字體族

serif(襯線字體)

sans-serif(非襯線字體)

monospace(等寬字體，例如代碼)

cursive(方正靜蕾體)

fantasy

多字體fallback機制

指定多個字體，如果找不到會按照順序使用其他字體，或者用同類字體

font-family:Monaco PingFangSC

英文字體用Monaco,但是Monaco沒有中文字體，所以如果碰到中文會使用PingFangSC，一個字體一個字體的找

font-family:"Microsoft Yahei",serif

字體族不需要引號，因為不是具體的字體

.chinese{
    font-family:"PingFang SC","Microsoft Yahei",monospace
}

指定在mac系統上用PingFang SC,windows上用Microsoft Yahei，把單個平臺獨有的字體寫到前面

網絡字體、自定義字體

自定義字體

@font-face{
    font-family:"IF";
    src:url("./IndieFlower.ttf");
}

.custom-font{
    font-family:IF;
}

網絡字體：注意跨域

iconfont

字體機制

先把只有一個平臺才有的寫到最前面

引用遠程字體有問題的話，要注意跨域問題

阿里巴巴的圖標庫，自選 iconfont.cn

行高的構成

行高由line-box決定

line-hight會撐起inline-box的高度，并不會影響本身布局的高度，但是會影響外部元素(line-box)

inline-box組成line-box，line-box高度是由inline-box決定

行高的相關現象

一般做垂直居中用line-height做就行了

默認情況是按照base-line對齊，如果要居中對齊就用vertical-align:middle

底線、頂線和文字的頂和文字的底是不一樣的

經典圖片空隙問題

原理：按照inline排版，如果按照inline排版的話，默認按照基線排版(base-line)

基線和底線之間有距離的，如果12px字體那么縫隙可能就是3px

解決方案：按照底線對齊，vertical-align:bottom 或者display:block

背景顏色

HSL

H：Hue(色調)。0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數值來指定顏色。取值為：0 - 360

S：Saturation(飽和度)。取值為：0.0% - 100.0%

L：Lightness(亮度)。取值為：0.0% - 100.0%
background:hsl(0,100%,50%)

RGB(A)

背景圖

漸變色背景

background: webkit-linear-gradient( left, red, green); //老式寫法

background: linear-gradient(to right,red, green) ;

background: linear-gradient (45deg, red, green);

background: linear-gradient( 135deg, red 0, green 50%, blue 100%)

background: linear-gradient ( 135deg, transparent 0, transparent 49.5%,green 50%)

多背景疊加

background: linear-gradient( 135deg, transparent 0, transparent 49.5%,green 49.5%,green 50.5%,transparent 50.5%,transparent 100%),linear-gradient( 45deg, transparent 0, transparent 49.5%,green 49.5%,green 50.5%,transparent 50.5%,transparent 100%)

background-size:30px 30px

background實現各種漸變背景，可以通過疊加實現，放射漸變

背景圖片和屬性(雪碧圖)

優點：

減少加載網頁圖片時對服務器的請求次數

提高頁面的加載速度

由所需圖片拼成的一張 GIF 圖片的尺寸會明顯小于所有圖片拼合前的大小。
單張的 GIF 只有相關的一個色表，而多帶帶分割的每一張 GIF
都有自己的一個色表，這就增加了總體的大小。
因此，多帶帶的一張 JPEG 或者 PNG sprite 在大小上非常可能比把一張圖分成多張得來的圖片總尺寸小

缺點：

單個圖片大小，考慮網絡環境比較差的情況

內存使用問題。大量空白你就會最終使用大量的無用的空白。

一個例子是來自于WHIT TV的網站。
注意這是一個1299×15,000像素的PNG圖片。
它也被壓縮的很好——實際下載大小只有大概26K —
但是瀏覽器并不會渲染壓縮后的圖片數據。當這個圖片被下載并被解壓縮之后

維護比較麻煩，

base64和性能優化

一種文本格式，顯示的是一串文本，而這串文本就是圖片本身

優點

傳輸性能，減少http請求

缺點：

增大了體積的開銷

圖片本身提交增大1/3

增大css體積

增加了解碼的開銷

適用：小圖標，例如：loading圖

用法：一般用在構建中轉，打包

多分辨率適配

邊框的屬性

線型

大小

顏色

邊框背景圖

border-img("./border.img") 30 round;

//repeat：可能會導致不完整
//round：整數個拼，可能會有一些空間上的壓縮

邊框銜接(三角形)

原理：利用邊框銜接過程是斜切

width:0px;
border-bottom:30px solid red;
border-left:20px solid transparent;
border-right:20px solid transparent;

滾動行為和滾動條

visible:內容直接顯示，撐出容器

hidden：超出容器部分隱藏

scroll:超出容器滾動，始終顯示滾動條

auto:超出容器滾動，當內容比較短不需要滾動條的時候不顯示滾動條

在mac系統上收系統設置影響

overflow-wrap(word-wrap)通用換行控制

- 兼容性不太好，經常還用word-wrap
- 是否保留單詞
- `normal`    只在允許的斷字點換行（瀏覽器保持默認處理）。
- `break-word`    在長單詞或 URL 地址內部進行換行。

word-break

- 針對多字節文字，中文句子也是單詞
- `break-all`    允許在單詞內換行。
- `keep-all`    只能在半角空格或連字符處換行，中文句子也不換行，兼容性還有點問題

white-space

- 空白處是否斷行
- 不換行的話    `white-space: nowrap` 

overflow-wrap: break-word ;
word-break: keep-all;
white-space: normal ;

字重(粗體) font-weight

斜體font-style:itatic

下劃線text-decoration

指針cursor

Hack看起來不合法但生效的寫法

主要用于區分不同的瀏覽器，只在特定的瀏覽器生效

缺點

難理解

難維護

易失效

替代方案

特性檢測

針對性加class

使用注意

標準屬性寫到前面，hack寫到后面

作用

瀏覽器兼容性

典型案例

checkbox

tabs

CSS布局

早期以table為主(簡單)

解析并不是流式的，以前可能等待時間長，現在已經可以流式布局

后來以技巧性布局為主(難)

現在有flexbox/grid(偏簡單)

響應式布局是(必備知識)

常用布局方式

table表格布局

float浮動+margin

inline-block布局

flexbox布局

布局方式(表格)

display:table

display:table-row

盒模型

寬度和高度是只對內容區生效
占據的空間是content + padding + border

#### display/position

display確定元素的顯示類型：

block

inline

inline-block:有寬高有可以與其他元素排在同一行

position確定元素的位置：

static:靜態布局，按照文檔流布局

relative:相對于元素本身的偏移，relative偏移時，元素所占據的文檔空間不會產生偏移

absolute：從文檔流脫離，相對于最近的父級absolute或者relative，如果父級不是的話，會一直網上到body

fixed:相對于屏幕/可視區域

定位于relatvie、absolute、fixed都可以設置z-index，數值越大附帶

彈性盒子

盒子本來就是并列的

指定寬度即可

?

低版本IE不支持

出過三個版本，市面上各個瀏覽器都有對應的解析，會導致一些兼容性問題

移動瀏覽器基本兼容,react Native和微信小程序可以直接用來布局

彈性布局用法詳解

float

元素“浮動”

脫離文檔流

但不脫離文本流

float對自身的影響：

形成“塊”(BFC),inline元素也可以設置寬高(BFC背后的神奇原理)

位置盡量靠上

位置盡量靠左(右)

float本意就是要做文字環繞、圖文混排等內容的

對兄弟的影響

上面貼著非float元素

旁邊貼float元素

不影響其他塊級元素位置

影響其他塊級元素內部文本

對父級元素的影響

從父級元素上“消失”

高度“塌陷”

解決“高度塌陷”的方案

讓父元素形成BFC來接管自己的高度

overflow:auto/hidden

當里面的元素超出的時候自動滾動

用其他元素撐起來

container2::after{
    content:"";
    clear:"both";       //保證這個元素左右都是"干凈"的，沒有浮動元素
    display:block;      
    height:0;           //不占高度
    visibility:hidden   //不用顯示
}
//比較經典的清除浮動布局的方式    

float布局

兼容性好

float和margin實現兩欄布局和三欄布局

兩欄布局：

float:left(左)

margin-left:左元素的寬度(右)

三欄布局：記住“盡量往左靠，盡量往右靠”

float:left(左)

float:right(右)

中間元素寫在最后，否則右邊的float元素不會對其

margin-left:左元素的寬度

margin-right:右元素的寬度

像文本一樣排block元素

沒有清除浮動等問題

需要處理間隙

處理間隙

間隙來源：html中的空白

處理辦法：

直接把兩塊html寫在一起；

兩塊中間加一個注釋；

父字體設置font-size:0;子塊重新加上字體font-sizi:14px;

響應式設計和布局

在不同的設備上正常使用

一般主要處理屏幕大小的問題

主要方法：

隱藏+折行+自適應空間

rem/viewport/media query

viewport：

適配的第一部永遠是加上viewport

viewport`可視區大小=屏幕大小`，有些設備默認屏幕寬度980px

如果固定使用width，可以使不同頁面等比放大

也可以根據window.innerWidth動態計算頁面的寬度

media query:

@media(max-width:640px){
    .left{
        display:none;
    }
}

rem：

    html{
        font-size:16px; // 默認16個像素，為了好記一般設置10px，20px
    }

@media (maxwidth: 375px){
    html{
        font-size :24px ;
    }
}    
@media (max-width: 320px){
    html{
        fonts ize: 20px;
    }
}    
@media (max-width: 640px){
    intro{
        margin: .3rem auto ;
        display: block;
    }
}

//精確性要求高的地方不要使用`rem`布局

float布局:兼容性好

表格布局 display:table

float+margin布局(清理浮動)

inline-block布局(處理間隙)

flexbox布局(兼容性不是特別好)

前者相對于最近的absolute/relative

后者相對屏幕(viewport)

如果要兼容老的設備，fixed兼容性不是很好

原因:空白字符

解決:消滅字符(標簽寫到一起不要加空白，或者中間寫上注釋)或者消滅間距

浮動元素不會占據父元素空間，因此父元素不會管浮動元素，很可能超出父元素，對其他元素產生影響。作為父元素一定要清除浮動，保證對外沒有影響

清除浮動原理

讓盒子負責自己的布局

overflow:hidden(auto)

::after{clear:both}(也可以用多帶帶的元素)

首先適配viewport(頁面寬度和移動端適配)

rem/viewport/media query(大小方面的適配)

設計上:隱藏折行自適應

效果屬性

box-shadow

text-shadow

border-radius

background

clip-path

營造層次感(立體感)

充當沒有寬度的邊框

特殊效果

一個div畫xx系列，可以用box-shadow，其他圖形可以通過點，確定是可能有性能問題

立體感

印刷的品質感

圓角矩形

圓形(圓角足夠大 border-radius:50%)

百分比是寬高的百分比

半圓/扇形

一些奇怪的角角

多背景疊加(顏色、圖片、漸變)
效果

紋理、圖案

漸變

雪碧圖動畫

.i{
    width: 20px ;
    height :20px ;
    background: url(./background.png) no repeat;
    background-size: 20px 40px;
    transition: background-position .4s ;
}
.i:hover{
    background-position: 0 20px;
}

背景圖尺寸適應方案

對容器進行裁剪

常見幾何圖形

自定義路徑

clip-path支持動畫且不改變容器大小

clip-path: inset(100px 50px);

clip-path: circle(50px at 100px 100px);

clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 10% 10%, 40px 10px);

  clip-path: url(#clipPath);
  background-size: cover; 
 transition:clip-path .4s;

支持svg

transform

變換transform(2D)

translate(translateZ 3D立體)

scale

skew(斜切)

rotate

transform:translateX(100px) translateY(100px) rotate(25deg)

transform:rotate(25deg) translateX(100px) translateY(100px) 

//有順序

缺點：性能不是很好

復雜場景下出現渲染不一樣問題

box-shadow無限投影
::before
::after

box-shadow

outline

border-radius:50%

clip-path:(svg)

border-radius組合：

有無邊框

邊框粗細

圓角半徑

background-position
background-repeat
background-size(cover/contain)

transform:translateX(100px)
transform:scale(2)

perspective:500px;              //指定透視的角度
transform-style:preserve-3d;    //保留3D效果
transform:translate rotate;        

動畫的原理：

視覺暫留作用

畫面逐漸變化

動畫的作用

愉悅感

引起注意

操作進行反饋

掩飾(程序在后臺加載)

動畫類型

transition補間動畫(中間的過程瀏覽器腦補起來)

keyframe關鍵幀動畫(也是補間動畫，但是有很多關鍵幀)

逐幀動畫(特殊的逐幀動畫，無法使用補間動畫)

位置-平移(left/right/margin/transform)

方位-旋轉(transform)

大小-縮放(transform)

透明度(opacity)

其他-線性變換(transform)

[深入了解transition動畫](https://www.cnblogs.com/xiaoh...
)

transition: [動畫類型] [動畫時間]

transition-delay //延遲多長時間執行

transition-delay:width 1s,background 3s; //多個效果疊加

transition-timing-function

timing(easing)：定義動畫進度和時間的關系

linear

ease-in-out

自定義貝塞爾曲線

相當于多個補間動畫

與元素狀態的變化無關

定義更加靈活

animation:run 1s linear;

animation-direction //reverse:反向

animation-fill-mode:forword //forwards,backwards決定動畫最終停留在哪里

animation-iteration-count //infinite:循環次數

animation-play-state:pause //js控制它的停和動

每幀都是關鍵幀，中間沒有補間過程

依然使用關鍵幀動畫

屬于關鍵幀動畫中的一種特殊情況

適用于無法補間計算的動畫

資源較大(適合時間短、資源小的動畫，一定要控制好大小的時長)

使用steps()

例如：圖片合成的動畫

animation-timing-function:steps(1)

指定時間和動畫進度關系

中間不要加東西，每個區間就只有一個狀態，靜止

step是指定每個區間幀數

transition

keyframes(animation)

過度動畫需要有狀態變化，關鍵幀動畫不需要有狀態變化

關鍵幀動畫能控制更精細

使用關鍵幀動畫

去掉補間(steps)

性能不差

部分情況下優于JS

但JS可以做到更好

部分高危屬性，box-shadow等

介紹

基于CSS的另一種語言

通過工具編譯成CSS

添加了很多CSS不具備的特性(變量)

能提升CSS文件的組織方式

less和sass的區別

less

基于node

優點：用JS寫的，編譯速度比較快，有個瀏覽器中可以直接使用的版本，不需要預先編譯,入門簡單

缺點：在一些復雜特性上比較繁瑣

sass(scss)

ruby寫的比較慢，但是有解決方案，可以使用它的移植版本node-sass

CSS預處理器

嵌套 ???????????????? ??????????? 反映層級和約束

變量和計算?????????????????? 減少重復代碼

Extend和Mixin ???????? 代碼片段

循環?????????????????????????????? 適用于復雜有規律的樣式

import CSS ???????????????? 文件模塊化

less
加上 &：并不是父子關系而是同級
CSS中并不允許這么嵌套寫，less和sass允許，結構關系清晰

body{
    padding:0px;
    margin: 0px;
}
.wrapper{
    background: white;
    .nav{
        font-size: 12px;
    }
    &:hover{                      //偽類
        background: red
    }
}

打包指令

lessc a.less > a.css

sass

npm install node-sass

sass的輸出有多重格式

node-sass  a.scss>a.css  --output-style expanded 

使用這條命令時候，我們編譯的路徑，不能有中文名，否則會報錯，之后只要我們更改scss文件，保存后，就會自動修改編譯后的css文件

變量為了可以參與運算，提供了各種運算的函數，包括顏色

less:@fontSize

sass:$fontSize

less的理念：盡量的接近css的語法

sass的理念：盡量避免產生混淆

CSS中并沒有提供復用CSS的方法，而是通過HTML復用

less

.block(@fontSize){
    font-size: @fontSize;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.block(@fontsize+2px);

不加括號也可以，不加括號.block{}不會被編譯出來，加了會被編譯出來

sass

@mixin block($fontSize) {
    font-size: $fontSize;
    border: 1px solid #ccc;
    border-radius: 4px;
}

@include block(font-size+2px);

區別在于需要顯示的聲明和調用，而且不能既做class又做mixin

場景：mixin清除浮動

作用

減少重復代碼

不會復制重復代碼

選擇器提取出來，公共的樣式寫到一起

less
寫法:

.block{
    font-size: @fontSize;
    border: 1px solid #ccc;
    border-radius: 4px;
}

引用:

 .nav:extend(.block){
        font-size: @fontSize;
    }

 .content{
        font-size: @fontSize + 2px;
        &:extend(.block);
    }

生成效果:

.block,
.wrapper .nav,
.wrapper .content {
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

sass
寫法：

.block {
    font-size: $fontSize;
    border: 1px solid #ccc;
    border-radius: 4px;
}

引用：

@extend .block;

生成效果：

.block, .wrapper {
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px; 
}

less
less中實際上沒有循環的語法,通過遞歸來實現相應的效果
引用方法:

.gen-col(@n) when (@n > 0 ){
    .gen-col(@n - 1);
    .col-@{n}{
        width: 1000px/12*@n;
    }
}

.gen-col(12);

生成效果:

.col-1 {
  width: 83.33333333px;
}
.col-2 {
  width: 166.66666667px;
}
.col-3 {
  width: 250px;
}
.col-4 {
  width: 333.33333333px;
}
.col-5 {
  width: 416.66666667px;
}
.col-6 {
  width: 500px;
}
.col-7 {
  width: 583.33333333px;
}
.col-8 {
  width: 666.66666667px;
}
.col-9 {
  width: 750px;
}
.col-10 {
  width: 833.33333333px;
}
.col-11 {
  width: 916.66666667px;
}
.col-12 {
  width: 1000px;
}

應用場景：表格、特效等

sass

mixin方式：

@mixin gen-col($n) {
    @if $n>0 {
        @include gen-col($n - 1);
        .col-#{$n} {
            width: 1000px/12*$n;
        }
    }
}

@include gen-col(12);

sass是支持循環的，不需要遞歸

@for $i from 1 through 12 {
    .col-#{$i} {
        width: 1000/12*$i;
    }
}

使得CSS變得更像一門變成語言

預處理器的變量跨文件

@import "logo";
@import "nav";
@import  "content";

預處理器的模塊化，提供了按需使用他人代碼的可能

SASS-Compass

Less-Lesshat/EST(國內)

提供現成mixin

提供JS類庫，封裝常用功能

有兼容性問題的封裝成mixin統一處理

Less(Node.js)

Sass(Ruby，有Node版本)

幫助更好地組織CSS代碼

提高代碼復用率

提升可維護性

嵌套 反應層級和約束

變量和計算 減少重復代碼

Extend和Mixin 代碼片段

循環 適用于復雜有規律的樣式

import CSS文件模塊化

優點：提高代碼復用率和可維護性

缺點：需要引入編譯過程 有學習成本

前端工程化發展起來了，預處理器的熱度有所下降

介紹

一個CSS框架

twitter出品

提供通用基礎樣式

Bootstrap4

兼容IE10+(bootstrap3兼容到IE9)

使用flexbox布局

拋棄Nomalize.css

提供布局和reboot版本

功能

基礎樣式

常用組件

JS插件

現在用sass編寫

用于組件交互

dropdown(下拉)

modal( 彈窗)

基于jQuery

依賴Popper.js

bootstrap.js

使用方式

基于data-屬性

基于JS-API

不同的分辨率下面又不同的分配

使用CSS同名類覆蓋

修改源碼重新構建 ??????????????????????????? //修改徹底，但是需要了解整個框架

使用SCSS源文件，修改變量 ????????? //對結構的要求更高

把bootstrap當初一個預處理文件來使用，十一個更干凈的使用方式

優點：CSS代碼結構合理，現成的樣式可以直接使用

缺點：定制較為繁瑣，體積大

原理：通過media query設置不同分辨率的class

使用：為不同分辨率選擇不同的網格class

使用CSS同名覆蓋

修改源碼重新構建

引用SCSS源文件，修改變量

CSS工程化介紹

組織

優化

構建

維護

PostCSS本身只有解析能力

各種神奇的特性全靠插件

目前至少有200多個插件

import模塊合并

autoprefixier自動加前綴

cssnano壓縮代碼

cssnext使用css新特性

precss

變量

條件

循環

MIxin Extend

import

屬性值引用

postCSS支持的構建工具

Webpack??????? postcss-loader

Gulp??????????????gulp-postcss

Grunt ?????????? grunt-postcss

Rollup????????? rollup-postcss

css-loader將css文件變成js文件

style-loader將變成js的css文件注入到頁面中

直接將class名全部換掉，確保組件樣式不沖突

var styles = require("component.css");

style.green ...

css-loader????????????????? 將 CSS變成JS

style-loader ?????????????將JS樣式插入head

ExtractTextPlugin???? 將CSS從JS中提取出來

css modules???????????????? 解決css命名沖突的問題(映射表)

less-loader ?????????????? sass-loader各類預處理器

postcss-loader ????????? PostCSS處理

less sass 等CSS預處理器

PostCSS插件(postCSS-import/precss等)

webpack處理CSS(css-loader+style-loader)

取決于插件可以做什么

autoperfixer cssnext precss等，兼容性處理

import模塊合并

css語法檢查、兼容性檢查

壓縮文件

解決類名沖突的問題

使用PostCSS或者webpack等構建工具進行編譯

在HTML模板中使用編譯過程產生的類名

JS作為入口，管理資源有天然優勢

將組件的結構、樣式、行為封裝到一起，增強內聚

可以做更多處理(webpack)

Angular各版本

Angular.js(1.x)

沒有樣式集成能力

Angular(2+)

typeScript

提供了樣式封裝能力

與組件深度集成

shadowDOM

邏輯上是一個DOM

結構上存在子集集合

shadowDOM介紹

Scoped CSS

限定了范圍的CSS

無法影響外部元素

外部樣式一般不影響內部

可以通過/deep/或>>>穿透

兼容性還存在問題

模擬Scoped CSS

方案一：隨機選擇器(不支持)

方案二：隨機屬性

內置CSS解決方案
模擬Scoped CSS