一、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

HTML重要属性

• a[href,target]

  • target：打开窗口。也可以设置框架中在哪个框架打开

• img[src,alt]

  • alt:图片不可用时候，文字显示出来
• table td[colspan,rowspan]

• form[target,method,enctype](有表单的地方都建议放上form)

  • 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新增内容

• 新增区块标签

  • section
  • article
  • nav
  • aside //一般不出现在大纲中，表示不重要的广告类

• 表单增强

  • 日期、时间、搜索
  • 表单验证
  • 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。

Normalize.css

面试题

doctype的意义是什么？

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

HTML、XHTML、HTML5的关系

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

HTML5有什么变化

• 新的语义化标签
• 表单增强(新的元素，表单验证)

• 新的API(离线、音视频、图形、实时通信、本地存储、设备能力)

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

em和i有什么区别

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

语义化的意义是什么

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

哪些元素可以自闭合

• 表单元素input
• 图片img
• br hr
• meta link

HTML和DOM的关系

• HTML是‘死’的(字符串，没有结构)
• DOM由HTML解析而来，是活的(是树，有结构)
• JS可以维护DOM

property和attribute的区别

• attribute是‘死’的(属性，写在HTML中)
• property是‘活’的(特性，DOM对象中)
• attribute不会影响property,property也不会影响attribute

form作用

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

二、css基础

cascading style sheet层叠样式表

选择器

选择器简介

• 用于匹配HTML元素
• 分类和权重

• 解析方式和性能

  • 浏览器的解析方式是从右往左反着，然后再往前验证,主要出于性能的考虑，更快速的匹配到指定元素(左边范围太广了，比如<div>可能能找到几百个)
• 值得关注的选择器

选择器分类

• 元素选择器             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

• Hack看起来不合法但生效的写法
• 主要用于区分不同的浏览器，只在特定的浏览器生效

• 缺点

  • 难理解
  • 难维护
  • 易失效

• 替代方案

  • 特性检测
  • 针对性加class

• 使用注意

  • 标准属性写到前面，hack写到后面

• 作用

  • 浏览器兼容性

• 典型案例

  • checkbox
  • tabs

css布局

布局简介

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，数值越大附带

flexbox布局

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

 

• 低版本IE不支持
• 出过三个版本，市面上各个浏览器都有对应的解析，会导致一些兼容性问题
• 移动浏览器基本兼容,react Native和微信小程序可以直接用来布局

弹性布局用法详解

float 布局

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:右元素的宽度

inline-block布局

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

处理间隙

• 间隙来源：html中的空白

• 处理办法：

  • 直接把两块html写在一起；
  • 两块中间加一个注释；<!-- -->
  • 父字体设置font-size:0;子块重新加上字体font-sizi:14px;

响应式设计和布局

响应式设计和布局

• 在不同的设备上正常使用
• 一般主要处理屏幕大小的问题

• 主要方法：

  • 隐藏+折行+自适应空间
  • rem/viewport/media query

viewport：

• 适配的第一部永远是加上viewport
• 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：

    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布局:兼容性好

CSS面试题

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

• 表格布局 display:table
• float+margin布局(清理浮动)
• inline-block布局(处理间隙)
• flexbox布局(兼容性不是特别好)

position:absolute/fixed有什么区别？

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

display:inline-block的间隙

• 原因:空白字符
• 解决:消灭字符(标签写到一起不要加空白，或者中间写上注释)或者消灭间距

如何清除浮动

浮动元素不会占据父元素空间，因此父元素不会管浮动元素，很可能超出父元素，对其他元素产生影响。作为父元素一定要清除浮动，保证对外没有影响

清除浮动原理

• 让盒子负责自己的布局

  • overflow:hidden(auto)
  • ::after{clear:both}(也可以用单独的元素)

如何适配移动端页面?

• 首先适配viewport(页面宽度和移动端适配)
• rem/viewport/media query(大小方面的适配)
• 设计上:隐藏折行自适应

css效果

效果属性

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

box-shadow

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

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

text-shadow

• 立体感
• 印刷的品质感

border-radius

• 圆角矩形
• 圆形(圆角足够大 border-radius:50%)
  
  百分比是宽高的百分比
• 半圆/扇形
  
• 一些奇怪的角角
  

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

• 背景图尺寸适应方案

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;

支持svg

transform

3D-transform

变换transform(2D)

• translate(translateZ 3D立体)

• scale
• skew(斜切)
• rotate

transform:translateX(100px) translateY(100px) rotate(25deg)transform:rotate(25deg) translateX(100px) translateY(100px) //有顺序

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

面试题

如何用一个div画xxx

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

如何产生不占空间的边框

• box-shadow
• 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动画

动画的原理：

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

动画的作用

• 愉悦感
• 引起注意
• 操作进行反馈
• 掩饰(程序在后台加载)

动画类型

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

transition

• 位置-平移(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
• 自定义贝塞尔曲线

keyframes动画

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

• 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是指定每个区间帧数

CSS面试题

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

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

• transition
• keyframes(animation)

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

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

如何实现逐帧动画

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

CSS动画的性能

• 性能不差
• 部分情况下优于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的理念：尽量避免产生混淆

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

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

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

import

预处理器的变量跨文件

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

预处理器框架

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

• 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编写

基本用法

Js组件

• 用于组件交互

  • dropdown(下拉)
  • modal( 弹窗)

• 基于jQuery

  • 依赖Popper.js
  • bootstrap.js

• 使用方式

  • 基于data-属性
  • 基于JS-API

响应式布局

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

定制化

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

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

CSS面试题

Bootstrap的优缺点

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

Bootstrap如何实现响应式布局

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

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

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

CSS工程化方案

CSS工程化介绍

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

postCSS插件的使用

• PostCSS本身只有解析能力
• 各种神奇的特性全靠插件

• 目前至少有200多个插件

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

  • precss

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

gulpPostCSS

postCSS支持的构建工具

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

webpack处理css

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

css-modules和extract-text-plugin

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

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

style.green ...

webpack小结

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

面试题

如何解决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

Angular中的CSS

Angular各版本

• Angular.js(1.x)

  • 没有样式集成能力

• Angular(2+)

  • typeScript
  • 提供了样式封装能力
  • 与组件深度集成

shadowDOM

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

shadowDOM介绍

Scoped CSS

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

兼容性还存在问题

模拟Scoped CSS

• 方案一：随机选择器(不支持)

• 方案二：随机属性

  • <div abcdefg>
  • div[abcdefg]{}

Vue中的CSS

内置CSS解决方案

模拟Scoped CSS

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

vue同时支持了这两种方案
<style module>
<style scoped>

React中的CSS

React的处理

• 官方没有集成方案
• 社区方案众多
• css modules
• (babel)react-css-modules
• styled components
• styled jsx