值得關(guān)注的選擇器

選擇器分類

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

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

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

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

偽類選擇器???????????? :hover{} //元素的狀態(tài)

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

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

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

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

選擇器權(quán)重

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

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

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

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

計(jì)算一個(gè)不進(jìn)位的數(shù)字

#id .link a[href]

計(jì)算：

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

.link?????? +10

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

[href]????? +0

結(jié)果：111

#id .link.active
#id       +100
.link       +10
.active   +10
結(jié)果：120

不進(jìn)位

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

百位????十位????個(gè)位

其他選擇器權(quán)重

!important優(yōu)先級最高

元素屬性優(yōu)先級高 //元素的屬性 > 外部樣式表 (style標(biāo)簽，外部樣式表)

相同權(quán)重后寫的生效

非布局樣式

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

背景、邊框

滾動、換行

粗體、斜體、下劃線

字體族

serif(襯線字體)

sans-serif(非襯線字體)

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

cursive(方正靜蕾體)

fantasy

多字體fallback機(jī)制

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

font-family:Monaco PingFangSC

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

font-family:"Microsoft Yahei",serif

字體族不需要引號，因?yàn)椴皇蔷唧w的字體

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

指定在mac系統(tǒng)上用PingFang SC,windows上用Microsoft Yahei，把單個(gè)平臺獨(dú)有的字體寫到前面

網(wǎng)絡(luò)字體、自定義字體

自定義字體

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

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

網(wǎng)絡(luò)字體：注意跨域

iconfont

字體機(jī)制

先把只有一個(gè)平臺才有的寫到最前面

引用遠(yuǎn)程字體有問題的話，要注意跨域問題

阿里巴巴的圖標(biāo)庫，自選 iconfont.cn

行高的構(gòu)成

行高由line-box決定

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

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

行高的相關(guān)現(xiàn)象

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

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

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

經(jīng)典圖片空隙問題

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

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

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

背景顏色

HSL

H：Hue(色調(diào))。0(或360)表示紅色，120表示綠色，240表示藍(lán)色，也可取其他數(shù)值來指定顏色。取值為：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實(shí)現(xiàn)各種漸變背景，可以通過疊加實(shí)現(xiàn)，放射漸變

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

優(yōu)點(diǎn)：

減少加載網(wǎng)頁圖片時(shí)對服務(wù)器的請求次數(shù)

提高頁面的加載速度

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

缺點(diǎn)：

單個(gè)圖片大小，考慮網(wǎng)絡(luò)環(huán)境比較差的情況

內(nèi)存使用問題。大量空白你就會最終使用大量的無用的空白。

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

維護(hù)比較麻煩，

base64和性能優(yōu)化

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

優(yōu)點(diǎn)

傳輸性能，減少http請求

缺點(diǎn)：

增大了體積的開銷

圖片本身提交增大1/3

增大css體積

增加了解碼的開銷

適用：小圖標(biāo)，例如：loading圖

用法：一般用在構(gòu)建中轉(zhuǎn)，打包

多分辨率適配

邊框的屬性

線型

大小

顏色

邊框背景圖

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

//repeat：可能會導(dǎo)致不完整
//round：整數(shù)個(gè)拼，可能會有一些空間上的壓縮

邊框銜接(三角形)

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

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

滾動行為和滾動條

visible:內(nèi)容直接顯示，撐出容器

hidden：超出容器部分隱藏

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

auto:超出容器滾動，當(dāng)內(nèi)容比較短不需要滾動條的時(shí)候不顯示滾動條

在mac系統(tǒng)上收系統(tǒng)設(shè)置影響

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

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

word-break

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

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看起來不合法但生效的寫法

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

缺點(diǎn)

難理解

難維護(hù)

易失效

替代方案

特性檢測

針對性加class

使用注意

標(biāo)準(zhǔn)屬性寫到前面，hack寫到后面

作用

瀏覽器兼容性

典型案例

checkbox

tabs

CSS布局

早期以table為主(簡單)

解析并不是流式的，以前可能等待時(shí)間長，現(xiàn)在已經(jīng)可以流式布局

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

現(xiàn)在有flexbox/grid(偏簡單)

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

常用布局方式

table表格布局

float浮動+margin

inline-block布局

flexbox布局

布局方式(表格)

display:table

display:table-row

盒模型

寬度和高度是只對內(nèi)容區(qū)生效
占據(jù)的空間是content + padding + border

#### display/position

display確定元素的顯示類型：

block

inline

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

position確定元素的位置：

static:靜態(tài)布局，按照文檔流布局

relative:相對于元素本身的偏移，relative偏移時(shí)，元素所占據(jù)的文檔空間不會產(chǎn)生偏移

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

fixed:相對于屏幕/可視區(qū)域

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

彈性盒子

盒子本來就是并列的

指定寬度即可

?

低版本IE不支持

出過三個(gè)版本，市面上各個(gè)瀏覽器都有對應(yīng)的解析，會導(dǎo)致一些兼容性問題

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

彈性布局用法詳解

float

元素“浮動”

脫離文檔流

但不脫離文本流

float對自身的影響：

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

位置盡量靠上

位置盡量靠左(右)

float本意就是要做文字環(huán)繞、圖文混排等內(nèi)容的

對兄弟的影響

上面貼著非float元素

旁邊貼float元素

不影響其他塊級元素位置

影響其他塊級元素內(nèi)部文本

對父級元素的影響

從父級元素上“消失”

高度“塌陷”

解決“高度塌陷”的方案

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

overflow:auto/hidden

當(dāng)里面的元素超出的時(shí)候自動滾動

用其他元素?fù)纹饋?/p>

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

float布局

兼容性好

float和margin實(shí)現(xiàn)兩欄布局和三欄布局

兩欄布局：

float:left(左)

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

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

float:left(左)

float:right(右)

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

margin-left:左元素的寬度

margin-right:右元素的寬度

像文本一樣排block元素

沒有清除浮動等問題

需要處理間隙

處理間隙

間隙來源：html中的空白

處理辦法：

直接把兩塊html寫在一起；

兩塊中間加一個(gè)注釋；

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

響應(yīng)式設(shè)計(jì)和布局

在不同的設(shè)備上正常使用

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

主要方法：

隱藏+折行+自適應(yīng)空間

rem/viewport/media query

viewport：

適配的第一部永遠(yuǎn)是加上viewport

viewport`可視區(qū)大小=屏幕大小`，有些設(shè)備默認(rèn)屏幕寬度980px

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

也可以根據(jù)window.innerWidth動態(tài)計(jì)算頁面的寬度

media query:

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

rem：

    html{
        font-size:16px; // 默認(rèn)16個(gè)像素，為了好記一般設(shè)置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)

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

原因:空白字符

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

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

清除浮動原理

讓盒子負(fù)責(zé)自己的布局

overflow:hidden(auto)

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

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

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

設(shè)計(jì)上:隱藏折行自適應(yīng)

效果屬性

box-shadow

text-shadow

border-radius

background

clip-path

營造層次感(立體感)

充當(dāng)沒有寬度的邊框

特殊效果

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

立體感

印刷的品質(zhì)感

圓角矩形

圓形(圓角足夠大 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;
}

背景圖尺寸適應(yīng)方案

對容器進(jìn)行裁剪

常見幾何圖形

自定義路徑

clip-path支持動畫且不改變?nèi)萜鞔笮?/b>

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

變換transform(2D)

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

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

//有順序

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

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

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

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

動畫的原理：

動畫的作用

動畫類型

animation-timing-function:steps(1)

介紹

less和sass的區(qū)別

CSS預(yù)處理器

less
加上 &：并不是父子關(guān)系而是同級
CSS中并不允許這么嵌套寫，less和sass允許，結(jié)構(gòu)關(guān)系清晰

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

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

less

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

.block(@fontsize+2px);

sass

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

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

作用

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中實(shí)際上沒有循環(huán)的語法,通過遞歸來實(shí)現(xiàn)相應(yīng)的效果
引用方法:

.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;
}

應(yīng)用場景：表格、特效等

sass

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

@include gen-col(12);

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

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

介紹

Bootstrap4

功能

CSS工程化介紹

postCSS支持的構(gòu)建工具

取決于插件可以做什么

Angular各版本

shadowDOM

Scoped CSS

模擬Scoped CSS

內(nèi)置CSS解決方案
模擬Scoped CSS