html+CSS整理

一、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-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分类法

嵌套关系

  • 块级元素可以包含行内元素
  • 块级元素不一定能包含块级元素(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

方案一:随机选择器(不支持) 方案二:随机属性 *

*div[abcdefg]{}


### 2、Vue中的CSS
> 内置CSS解决方案

复制代码

模拟Scoped CSS 方案一:随机选择器 CSS modules 方案二:随机属性

[abadafda]{}

vue同时支持了这两种方案