全面系统讲解CSS工作应用+面试一步搞定

---

[TOC]

一、课程介绍

二、HTML基础强化

html常见元素和理解

html常见元素分类

head区元素：（不会在页面上留下元素）
  * meta
  * title
  * style
  * link
  * script
  * base
body区：
  * div/selection/article/aside/header/footer
  * p
  * span/em/strong
  * table/thead/tbody/tr/td
  * ul/ol/li/dl/dt/dd
  * a
  * form/input/select/textarea/button

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <base href="/">
  // 指定一个基础路径，所有的路径都是以这个为基准
  //viewport表示视图的大小
  //适配移动端第一步，viewport

a[href,target]
//target：打开窗口。也可以设置框架中在哪个框架打开
img[src,alt]
//alt:图片不可用时候，文字显示出来
table td[colspan,rowspan]
form[target,method,enctype]
//target:表单提交到哪儿
//enctype:指定编码，如果上传文件指定要用form-data
input[type,value]
button[type]
select>option[value]
label[for]
//label与input进行关联

如何理解html

HTML“文档”
描述文档的结构
有区块和大纲

更好的让机器、搜索引擎、蜘蛛很好的理解结构
html的语义化

html版本

* HTML4/4.01(SGML) 浏览器做很多的容错和修正工作
* XHTML(XML) 要求非常严格，严格要求编码习惯
* HTML5(基于HTML4)

html5新增内容

1、新增区块标签
    * section
    * article
    * nav
    * aside //一般不出现在大纲中，表示不重要的广告类
2、表单增强
    * 日期、时间、搜索
    * 表单验证
    * placehold自动聚焦

html5新增语意

header/footer头尾
section/article区域
nav导航
aside不重要内容
em/strong强调
i //icon

元素分类

按默认样式分

块级block：
行内inline：
inline-block:

HTML分类法

嵌套关系

默认样式和reset

* 块级元素可以包含行内元素
* 块级元素不一定能包含块级元素(p标签不能包含div)
* 行内元素一般不能包含块级元素(a>div 合法，html5中a是transparent元素)
  

HTML标签在浏览器中都有默认的样式，不同的浏览器的默认样式之间存在差别。例如ul默认带有缩进样式，在IE下，它的缩进是由margin实现的，而在Firefox下却是由padding实现的。开发时浏览器的默认样式可能会给我们带来多浏览器兼容性问题，影响开发效率。现在很流行的解决方式是一开始就将浏览器的默认样式全部覆盖掉，这就是css reset。

真题

doctype的意义是什么？

1、让浏览器以标准模式渲染
2、让浏览器知道元素的合法性

HTML、XHTML、HTML5的关系

1、HTML属于SGML
2、XHTML属于XML，是HTML进行XML严格化的结果
3、HTML5不属于SGML或者XML，比XHTML宽松

HTML5有什么变化

1、新的语义化标签
2、表单增强
3、新的API(离线、音视频、图形、实时通信、本地存储、设备能力)

//Canvas+WEBGL等技术，实现无插件的动画以及图像、图形处理能力；
//地存储，可实现offline应用；
//websocket，一改http的纯pull模型，实现数据推送的梦想；
//MathML，SVG等，支持更加丰富的render； 

em和i有什么区别

1、em是语义化的标签，表强调
2、i是纯样式的标签，表斜体
3、HTML5中i不推荐使用，一般用作图标

语义化的意义是什么

1、开发者容易理解
2、机器容易理解结构(搜索、读屏软件)
3、有助于SEO
4、semantic microdata

哪些元素可以自闭合

1、表单元素input
2、图片img
3、br hr
4、meta link

HTML和DOM的关系

1、HTML是‘死’的
2、DOM由HTML解析而来，是活的
3、JS可以维护DOM

property和attribute的区别

1、attribute是‘死’的
2、property是‘活’的

form作用

1、直接提交表单
2、使用submit/reset按钮
3、便于浏览器保存表单
4、第三方库可以整体提取值
5、第三方库可以进行表单验证

三、css基础

cascading style sheet 层叠样式表

1、选择器

1、用于匹配HTML元素
2、分类和权重
3、解析方式和性能
    * 浏览器的解析方式是从右往左反着，然后再往前验证,主要出于性能的考虑，更快速的匹配到指定元素
4、值得关注的选择器

选择器分类

1、元素选择器         a{}
2、伪元素选择器    ::before{}    //不会出现在html中也不会出现DOM树中，真实存在的元素
3、类选择器        .link{}
4、属性选择器        [type=radio]{}
5、伪类选择器        :hover{}       //一个元素的状态
6、ID选择器        #id{}
6、组合选择器        [type=checkbox] + label{}
7、否定选择器        :not(.link){}
8、通用选择器        *{}

选择器权重

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标签，外部样式表)
相同权重后写的生效

2、非布局样式-字体

字体

1、字体族
    serif
    sans-serif
    monospace
    cursive
    fantasy
2、多字体fallback
3、网络字体、自定义字体
4、 iconfont

字体机制
先把只有一个平台才有的写到最前面

引用远程字体有问题的话，要注意跨域问题
阿里巴巴的图标库，自选 iconfont.cn

3、非布局样式-行高

行高由line-box决定
line-hight会撑起inline-box的高度，并不会影响本来的高度
inline-box组成line-box，line-box是由inline-box决定

1、一般做垂直居中用line-height做就行了
2、默认情况是按照base-line对齐，如果要居中对其就用vertical-align:middle
3、底线、顶线和文字的顶和文字的底是不一样的

经典图片空隙问题：

原理：按照inline排版，如果按照inline排版的话，那么它就有基线排版，默认按照base-line
基线和底线之间有距离的，如果12px字体那么缝隙可能就是3px
解决方案：按照底线对齐，vertical-align:bottom

4、非布局样式-背景

背景颜色

H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：Saturation(饱和度)。取值为：0.0% - 100.0%
L：Lightness(亮度)。取值为：0.0% - 100.0%

渐变色背景

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实现各种渐变背景，可以通过叠加实现，放射渐变

背景图片和属性(雪碧图)

base64和性能优化

优点：节省http链接数
缺点：体积会增大，图片原来的体积会(增大1/3,增大css文件)；增大解码的开销(先转化成图片再解码)
适用：小图标
用法：一般用在构建中转

多分辨率适配

5、非布局样式-边框

• 边框的属性：线型 大小 颜色

• 边框背景图
• 边框衔接(三角形)

原理：利用边框衔接过程是斜切

6、非布局样式-滚动

滚动行为和滚动条

visible:内容直接显示，撑出容器
hidden：超出容器部分隐藏
scroll:超出容器滚动，始终显示滚动条
auto:超出容器滚动，当内容比较短不需要滚动条的时候不显示滚动条

在mac系统上收系统设置影响

7、非布局样式-文本折行

 1、overflow-wrap(word-wrap)通用换行控制：是否保留单词
 2、word-break针对多字节文字，中文句子也是单词
 3、white-space空白处是否断行

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

不换行的话 white-space: nowrap

word-wrap：
1、normal    只在允许的断字点换行（浏览器保持默认处理）。
2、break-word    在长单词或 URL 地址内部进行换行。

word-break：
normal    使用浏览器默认的换行规则。
break-all    允许在单词内换行。
keep-all    只能在半角空格或连字符处换行。

8、非布局样式-装饰性属性(粗体、斜体、下划线)

1、装饰性属性及其它
2、字重(粗体) font-weight
3、斜体font-style:itatic
4、下划线text-decoration
5、指针cursor

9、hack和案例

1、Hack即不合法但生效的写法
2、主要用于区分不同的浏览器
3、缺点：难理解，难维护，易失效
4、替代方案：特性检测
5、替代方案：针对性加class

10、面试题

CSS样式(选择器)的优先级

计算权重确定
!important
内联样式
后写的优先级高   

雪碧图的作用

减少HTTP请求数，提高加载性能
有一些情况下可以减少图片大小

自定义字体的使用场景

1、宣传/品牌/banner等固定文案
2、字体图标

base64的使用

1、用于减少HTTP请求
2、适用于小图片
3、base64的体积约为原图的4/3

伪类和伪元素的区别

1、伪类表状态
2、伪元素是真的有元素
3、前者单冒号，后者双冒号(注意兼容性)

如何美化checkbox

1、label[for]和id
2、隐藏原生的input
3、:checked+label

四、css布局

1、布局简介

• CSS知识体系的重中之重

• 早期以table为主(简单)
• 后来以技巧性布局为主(难)
• 现在有flexbox/grid(偏简单)
• 响应式布局是必备知识

常用布局方式

1、table表格布局
2、float浮动+margin
3、inline-block布局
4、flexbox布局

2、布局方式(表格)

display:table
display:table-row

3、一些布局属性

盒模型

宽度和高度是只对内容区生效

display/position

确定元素的显示类型：
    1、block
    2、inline
    3、inline-block:有宽高有可以与其他元素排在同一行

确定元素的位置：
    1、static：静态布局，按照文档流布局
    2、relative:相对于元素本身的偏移，relative偏移时，元素所占据的文档空间不会产生偏移
    3、absolute：从文档流脱离，相对于最近的父级absolute或者relative，如果父级不是的话，会一直网上到body
    4、fixed:相对于屏幕/可视区域

定位于relatvie、absolute、fixed都可以设置z-index，数值越大附带

4、flexbox布局

弹性盒子
盒子本来就是并列的
指定宽度即可

低版本IE不支持
出过三个版本，市面上各个浏览器都有对应的解析，会导致一些兼容性问题

5、float 布局

元素“浮动”
脱离文档流
但不脱离文本流

float对自身的影响：

1、形成“块”(BFC),inline元素也可以设置宽高
2、位置尽量靠上
3、位置尽量靠左(右)

对兄弟的影响

上面贴着非float元素
旁边贴float元素
不影响其他块级元素位置
影响其他块级元素内部文本

对父级元素的影响

从父级元素上“消失”
高度“塌陷”

解决“高度塌陷”的方案：

1、让父元素形成BFC来接管自己的高度 overflow:auto/hidden
    //当里面的元素超出的时候自动滚动

2、用其他元素撑起来

container2::after{
    content:'';
    clear:'both';
    display:block;
    height:0;
    visibility:hidden
}
//比较经典的清除浮动布局的方式    

float布局

兼容性好

float和margin实现两栏布局和三栏布局
两栏布局：float:left  float:right  margin:""
三栏布局：记住“尽量往左靠，尽量往右靠”

6、inline-block布局

像文本一样排block元素
没有清除浮动等问题
需要处理间隙

处理间隙

间隙来源：html中的空白
处理办法：1、直接把两块写在一起；
        2、两块中间加一个注释；
        3、父字体设置font-size:0;子块重新加上字体font-sizi:14px;

7、响应式设计和布局

1、在不同的设备上正常使用
2、一般主要处理屏幕大小的问题
3、主要方法：
    * 隐藏+折行+自适应空间
    * rem/viewport/media query

viewport：

1、适配的第一部永远是加上 viewport，可视区大小=屏幕大小，有些设备默认屏幕宽度980px
* <meta name='viewport' content="width=device-width,initial-scale=1.0">
* 如果固定使用width，可以使不同页面等比放大
* 也可以根据window.innerWidth动态计算页面的宽度

media query:

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

rem：

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

8、主流网站使用的布局方式

9、CSS面试真题

1、实现两栏(三栏)布局的方法

    1、表格布局 display:table
    2、float+margin布局
    3、inline-block布局：处理间隙
    4、flexbox布局：兼容性不是特别好

2、position:absolute/fixed有什么区别？

    1、前者相对于最近的absolute/relative
    2、后者相对屏幕(viewport)
    如果要兼容老的设备，fixed兼容性不是很好    

display:inline-block的间隙

原因:字符间距
解决:消灭字符或者消灭间距

如何清除浮动

1、让盒子负责自己的布局
2、overflow:hidden(auto)
3、::after{clear:both}

如何适配移动端页面?

1、viewport
2、rem / viewport/ media query
3、设计上:隐藏折行自适应

五、css效果

• box-shadow
• text-shadow
• border-radius
• background
• clip-path

1、box-shadow

1、营造层次感(立体感)
2、充当没有宽度的边框
3、特殊效果

一个div画xx系列，可以用box-shadow，其他图形可以通过点，确定是可能有性能问题

2、text-shadow

3、border-radius

圆角矩形
圆形
半圆/扇形
一些奇怪的角角

4、background

多背景叠加

• 纹理、图案
• 渐变
• 雪碧图动画
• 背景图尺寸适应方案

动画效果

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

5、clip-path

• 对容器进行裁剪
• 常见集合类型
• 自定义路径

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;

6、3D-transform

变换transform(2D)

• translate
• scale
• skew
• rotate

缺点：性能不是很好
复杂场景下出现渲染不一样问题

7、面试题

如何用一个div画xxx

box-shadow无线投影
::before
::after

如何产生不占空间的边框

1、box-shadow
2、outline

如何实现圆形元素(头像)

border-radius:50%

如何实现IOS图标的圆角

clip-path:(svg)

如何实现半圆、扇形等图标

border-radius组合：
有无边框
边框粗细
圆角半径

如何实现背景图居中显示/不重复/改变大小

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

如何平移放大一个元素

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

如何实现3D效果

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

六、css动画

动画的原理：

• 1、视觉暂留作用
• 2、画面逐渐变化

.

动画的作用

• 1、愉悦感
• 2、因其作用
• 3、操作进行反馈
• 4、掩饰(程序在后台加载)

.

动画类型：

• transition补间动画(中间的过程浏览器脑补起来)
• keyframe关键帧动画(也是补间动画，但是有很多关键帧)
• 逐帧动画

1、transition

位置-平移(left/right/margin/transform)
方位-旋转(transform)
大小-缩放(transform)
透明度(opacity)
其他-线性变换(transform)

transition-delay   //延迟多长时间执行

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

transition-timing-function

timing(easing)：定义动画进度和时间的关系
//linear,ease-in-out
//自定义贝塞尔曲线

2、keyframes动画

相当于多个补间动画
与元素状态的变化无关
定义更加灵活

animation:run 1s linear;
animation-direction           //reverse:反向
animation-fill-mode:forword   //forwards,backwards决定动画最终停留在哪里
animation-iteration-count     //infinite:循环次数
animation-play-state:pause    //js控制它的停和动

3、逐帧动画

每帧都是关键帧，中间没有补间过程
依然使用关键帧动画
属于关键帧动画中的一种特殊情况

适用于无法补间计算的动画
资源较大
使用steps()

animation-timing-function:steps(1);
//中间不要加东西，每个区间就只有一个状态
step是指定每个区间帧数

4、CSS面试题

css中动画怎么写，transation和animation和keyframs怎么写

CSS中动画实现的方式有几种

transition
keyframes(animation)

过渡动画和关键帧动画的区别

过度动画需要有状态变化，关键帧动画不需要有状态变化
关键帧动画能控制更精细

如何实现逐帧动画

使用关键帧动画
去掉补间(steps)

CSS动画的性能

1、性能不坏
2、部分情况下优于JS
3、但JS可以做到更好
4、部分高危属性，box-shadow等

七、预处理器

介绍

• 基于CSS的另一种语言
• 通过工具编译成CSS
• 添加了很多CSS不具备的特性(变量)
• 能提升CSS文件的组织方式

less和sass的区别：

1、less：用JS写的，编译速度比较快，有个浏览器中可以直接使用的版本，不需要预先编译
缺点：在一些复杂特性上比较繁琐
2、sass(scss)：ruby写的比较慢，但是有解决方案，可以使用它的移植版本node-sass

CSS预处理器：

1、嵌套                 反映层级和约束
2、变量和计算            减少重复代码
3、Extend和Mixin        代码片段
4、循环                 适用于复杂有规律的样式
5、import CSS          文件模块化

1、嵌套

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文件

2、变量

less:@fontSize
sass:$fontSize

less的理念：尽量的接近css的语法
sass的理念：尽量避免产生混淆

3、mixin

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清除浮动

4、extend

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

5、loop

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变得更像一门变成语言

6、import

预处理器的变量跨文件

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

7、预处理器框架

预处理器的模块化，提供了按需使用他人代码的可能

SASS-Compass
Less-Lesshat/EST
提供现成mixin
提供JS类库，封装常用功能

有兼容性问题的封装成mixin统一处理

真题

常见的CSS预处理器

Less(Node.js)
Sass(Ruby，有Node版本)

预处理器作用

帮助更好地组织CSS代码
提高代码复用率
提升可维护性

预处理利器的作用

嵌套               反应层级和约束
变量和计算           减少重复代码
Extend和Mixin      代码片段
循环                适用于复杂有规律的样式
import                CSS文件模块化

预处理器的优缺点

优点：提高代码复用率和可维护性
缺点：需要引入编译过程  有学习成本

前端工程化发展起来了，预处理器的热度有所下降

八、Bootstrap

介绍

• 一个CSS框架
• twitter出品
• 提供通用基础样式

.

Bootstrap4

• 兼容IE10+(bootstrap3兼容到IE9)
• 使用flexbox布局
• 抛弃Nomalize.css
• 提供布局和reboot版本

.

功能

• 基础样式
• 常用组件
• JS插件

现在用sass编写

1、基本用法

2、Js组件

用于组件交互
    dropdown(下拉)
    modal( 弹窗)

基于jQuery
依赖Popper.js
bootstrap.js    

使用方式
     基于`data-`属性
     基于JS-API

3、响应式布局

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

4、定制化

使用CSS同名类覆盖
修改源码重新构建                  //修改彻底，但是需要了解整个框架
使用SCSS源文件，修改变量           //对结构的要求更高

把bootstrap当初一个预处理文件来使用，十一个更干净的使用方式

5、CSS真题、

Bootstrap的优缺点

优点：CSS代码结构合理，现成的样式可以直接使用
缺点：定制较为繁琐，体积大

Bootstrap如何实现响应式布局

原理：通过media query设置不同分辨率的class
使用：为不同分辨率选择不同的网格class

如何基于Bootstrap定制自己的样式

使用CSS同名覆盖
修改源码重新构建
引用SCSS源文件，修改变量

九、css工程化方案

postCSS介绍

• 组织
• 优化
• 构建
• 维护

1、postCSS插件的使用

PostCSS本身只有解析能力
各种神奇的特性全靠插件
目前至少有200多个插件

import模块合并
autoprefixier自动加前缀
cssnano压缩代码
cssnext使用css新特性

2、CSSnext

3、precss

• 变量
• 条件
• 循环
• MIxin Extend
• import
• 属性值引用

4、gulpPostCSS

postCSS支持的构建工具

• Webpack postcss-loader
• Gulp gulp-postcss
• Grunt grunt-postcss
• Rollup rollup-postcss

5、webpack

6、webpack处理css

css-loader将css文件变成js文件
style-loader将变成js的css文件注入到页面中

7、 css-modules和extract-text-plugin

直接将class名全部换掉，确保组件样式不冲突

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

style.green ...

8、 webpack小结

css-loader 将 CSS变成JS
style-loader 将JS样式插入head
ExtractTextPlugin 将CSS从JS中提取出来
css modules 解决css命名冲突的问题(映射表)
less-loader  sass-loader各类预处理器
postcss-loader  PostCSS处理

9、 真题

如何解决CSS模块化：

less sass  等CSS预处理器
PostCSS插件(postCSS-import/precss等)
webpack处理CSS(css-loader+style-loader)

PostCSS可以做什么

取决于插件可以做什么

autoperfixer cssnext precss等，兼容性处理
import模块合并
css语法检查、兼容性检查
压缩文件

CSS modules是做什么的，如何使用

解决类名冲突的问题
使用PostCSS或者webpack等构建工具进行编译
在HTML模板中使用编译过程产生的类名

为什么使用JS来引用、加载CSS

JS作为入口，管理资源有天然优势
将组件的结构、样式、行为封装到一起，增强内聚
可以做更多处理(webpack)

十、三大框架中的css

1、Angular中的CSS

Angular各版本

Angular.js(1.x)
    *没有样式集成能力
Angular(2+)
    *typeScript
    *提供了样式封装能力
    *与组件深度集成

shadowDOM

逻辑上是一个DOM
结构上存在子集集合

Scoped CSS

限定了范围的CSS
无法影响外部元素
外部样式一般不影响内部
可以通过/deep/或>>>穿透

兼容性还存在问题

模拟Scoped CSS

方案一：随机选择器(不支持)
方案二：随机属性
    *<div abcdefg>
    *div[abcdefg]{}

2、Vue中的CSS

内置CSS解决方案

模拟Scoped CSS
方案一：随机选择器    CSS modules
方案二：随机属性      <div abcdefg>   <div>[abadafda]{}

vue同时支持了这两种方案

<style module>
<style scoped>

3、React中的CSS

React的处理

• 官方没有集成方案
• 社区方案众多

css modules
(babel)react-css-modules
styled components
styled jsx

十一、课程总结

课程内容

• HTML基础 CSS基础
• CSS布局
• 效果和动画
• 工具、工程化、框架