一、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
字符集编码
viewport表示视图的大小,适配移动端第一步,
指定一个基础路径,所有的路径都是以这个为基准
常用标签
a[href,target]
target:打开窗口。也可以设置框架中在哪个框架打开img[src,alt]
alt:图片不可用时候,文字显示出来table td[colspan,rowspan]
form[target,method,enctype]
target:表单提交到哪儿 enctype:指定编码,如果上传文件指定要用form-datainput[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分类法
嵌套关系
- 块级元素可以包含行内元素
- 块级元素不一定能包含块级元素(p标签不能包含div)
- 行内元素一般不能包含块级元素(a>div 合法,html5中a是transparent元素)
默认样式和reset
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
* '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
方案一:随机选择器(不支持) 方案二:随机属性 *
### 2、Vue中的CSS
> 内置CSS解决方案
复制代码
模拟 vue同时支持了这两种方案Scoped CSS
方案一:随机选择器 CSS modules
方案二:随机属性