css相关

盒模型

盒模型都是由margin border padding content 组成

• 标准盒模型：width是content的宽度
• IE盒模型：width是content、padding和border的宽度之和
  改变盒模型的方法：
  box-sizing : border-box 或 box-sizing : content-box(标准，默认)

css选择器及权重

！important修饰的权重最高
行内元素 1000
id选择器 100
类、伪类、属性选择器 10
标签选择器 1
通配符、相邻、父子 0

计算方式

• 叠加
• 就近原则：出现样式冲突：不重叠，以最后书写的样式为准（长江后浪推前浪）

可以继承的属性

1，字体相关：font-size font-family
2,文本 text-align text indent
3,鼠标的形态 cursor
4,列表的布局 list-style

display的属性值及作用

none:让元素在文档流中移除
block:块级元素，独占一行，可设置宽高，有m,p
line:行内元素，同行显示，默认为内容的宽高，左右m,p可设置
inline-block:行内块，在一行显示，默认为内容的宽高,宽高，左右mp可设置
list-item:指定为列表样式
table:作为块级表格

隐藏元素的方式和区别

• diaplay:none
  渲染树不会包含该渲染对象，不会在页面中占据位置,不会响应绑定监听事件，改变display会引起重排和重绘
• visibilty:hidden
  渲染树包含该元素，在页面中占据空间，只是内容不可见,改变visibilty只会引起重绘，不会响应绑定的监听事件
• transform: scale(0,0)：将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
• opacity :0 透明度设置为0 ，仍在页面中占据空间，可以响应绑定监听事件

伪类和伪元素的区别

区别其实就是是否创建了新的元素

• 伪类：将一些效果放在特殊的选择器上 比如div:hover{} ：focus这些
• 伪元素：是创建了虚拟的容器，并不存在再文档中 比如用伪元素来清除浮动

link和@import区别

• link是html标签，除了可以引用css之外还可以链接一个外部的icon用于浏览器的栏目图标和收藏夹小图标，而@import是css范畴的，只能用来引用css
• link是在页面载入时同时载入，而@import是在页面加载完成之后才引入进来的
• link的样式可以用js控制DOM来改变，而@import不行

translation和animation的区别

translation 是过渡，需要事件触发，他只有一个开始帧和结束帧
animation 是动画，不需要事件来触发，他可以设置多个关键帧来实现

对requestAnimationframe的理解

window.requestAnimationFrame() 是请求动画帧，这个方法需要传递一个参数，在下一次浏览器重绘之前调用，该方法属于宏任务，使用cancelAnimationFrame来取消执行动画
优势：
CPU节能：在使用setTimeOut和setInterval的时候，虽然页面处于最小化，它还是会计时，但这是没有意义的。所以使用requestAnimationFrame会在页面不可见的情况下不执行，也就对CPU起到了节能的作用

为什么使用translate而不是定位?

• translate是transform的一个属性，改变transform不会引起浏览器的重排和重绘，而改变定位会引起重排重绘
• transform会使浏览器为元素创建一个GPU，而改变定位会使用到CPU，所以translate更高效
• 使用translate元素会占据原来的位置，改变定位不会

li 与 li 之间有看不见的空白间隔是什么原因引起的？如何解决？

因为浏览器会把内联元素之间的空白字符渲染成一个空格，通常我们会将一个li标签放在一行，就有了换行，所以浏览器会把换行渲染成一个空格
解决：

• 使用浮动
• 将
• 标签写在同一行，但是代码不够美观
• ul调整字母间距letter-spacing:-8px,然后在li中设置为正常

常见的图片格式及使用场景

• png 无损的，会压缩图片的数据，使图片有更小的体积
• jpeg 有损，采用直接色，图片颜色更丰富，但是有损压缩会导致图片模糊
• gif 无损的，支持动画，适用于对色彩要求不高的的图片
• svg 是无损的矢量图，放大不会失真，所以经常用来存放logo,小图标

对 CSSSprites （精灵图、雪碧图）的理解

精灵图就是把一个页面上用到的所有的图片汇总成一个大图，然后通过各种背景操作来让背景处在一个合适的地方
优点：减少网络请求，减少图片存储的大小
缺点：维护起来比较麻烦，开发的时候也麻烦，需要对图片进行有序的拼接等操作

CSS 优化和提高性能的方法有哪些？

css压缩，尽量减少页面重排、重绘。尽量少的去对标签进行选择，而是用class

Sass、Less 是什么？为什么要使用他们？

都是 CSS 预处理器，是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。 例如 Less 是一种动态样式语言，将 CSS 赋予了动态语言的特性，
结构清晰，便于扩展。 可以方便地屏蔽浏览器私有语法差异。封装对浏览器语法差异的重复处理， 减少无意义的机械劳动。
可以轻松实现多重继承。

媒体查询@media

媒体查询可以根据页面不同的大小来改变相应的样式，通常在响应式布局中常见

CSS3中的transform有哪些属性

• 旋转rotate、缩放scale和移动translate、扭曲skew、矩阵变形matrix

相对定位和绝对定位

relative（相对定位）：元素仍处于文档流中，定位是相对于原本自身的位置，若没有设置宽度，则宽度为父元素的宽度，该元素的大小会影响父元素的大小。
absolution（绝对定位）：元素会脱离文档流，定位是相对于离它最近的且不是static定位的父元素而言，若该元素没有设置宽度，则宽度由元素里面的内容决定，且宽度不会影响父元素，定位为absolution后，原来的位置相当于是空的，下面的的元素会来占据。

css布局单位

• px像素
  css像素：为开发者提供的一个抽象单位
  物理像素：设备能显示的最小的单位
• % :相对于父级的百分比
• em和rem
  都是相对于字体的倍数
  em是相对于父级字体的倍数
  rem是相对于根元素html的字体的倍数
• vh vw
  与百分比相似
• vh相对于视口高度，视口高度为100vh
• vw是相对于窗口的宽度,视口宽度为100vw

两栏布局

(左侧宽度固定(200px)，右侧自适应宽度)

• 使用float浮动左边的元素，右边的元素margin-left:200px width:auto(宽度会撑满整个父元素) 或者 右侧使用overflow:hidden触发BFC，这样就不会发生重叠

• 利用flex布局，左边宽度设置为200px,右边flex:1

• 利用绝对定位，父元素为相对定位，子元素为绝对定位，左边left:0,width:200px, 右边元素left:200,其余方向为0 或者右侧margin-left:200px,width:auto

三栏布局

（左右两栏宽度固定，中间自适应的布局）

• flex布局，左右width:200px,中间flex:1
• 绝对定位，左固定，右固定，中间的设置对应的margin值
• float左浮动，右浮动，中间的设置对应的margin值(中间的元素要在左右两元素后面)，
• grid布局，直接display:grid; grid-template-columns:100px auto 200px;

九宫格布局

九宫格布局
flex实现
float
grid ：使用grid创建网格布局，划分为3x3的等分布局
table

flex布局

flex弹性布局
容器上的属性：
flex-direction:设置主轴的方向
flex-wrap : 设置项目的排列方式，是否换行
flex-flow:是上面的两个属性的就简写形式
justify-content:定义项目在主轴上的对齐方式
align-item:项目在交叉轴上的对齐方式
align-content:定义多根主轴的对齐方式
项目上的属性：
order:定义项目的排列顺序，order越小排列越前
flex-grow:项目在分配剩余空间的比例
flex-shrink:空间不足时的缩小比例
dlex-besis:再分配空间前在主轴方向上的大小
flex:是上面三个的缩写,默认0 1 auto。
align-self:允许单个元素与其他不同的对齐方式

Grid布局

• display: grid; 声明一个容器
• grid-template-columns: repeat(3,200px) 声明列的宽度,数字3表示的重复3次，即有3列宽度为200px
• grid-template-rows: 100px 200px; 分别表示两行的高度
• column-gap，row-gap，gap，//grid-gap: 20px; 声明行间距和列间距
• grid-auto-flow:row //先行后列

repeat的参数：
1，auto-fill，有时，单元格的大小是固定的，但是容器的大小不确定，这个属性就会自动填充 grid-template-columns: repeat(auto-fill,100px);
2，auto，表示由浏览器自己决定长度
grid-template-columns: 100px auto 100px;

.box {
  display: grid;
  height: 600px;
  width: 100%;
  grid-template-columns: repeat(3, 1fr);  //fr网格之间的比例
 grid-template-rows: repeat(3, 1fr);
}

水平垂直居中

• 给文字水平垂直居中（单行）：text-align:center line-height等于单行文本行高
• 已知宽高：
  • 子绝父相+top:50% left:50% margin-left:子元素宽度一半 margin-top子元素长度一半
  • 子绝父相+top:0 left:0 right:0 bottom :0 +margin:auto
  • 子绝父相 top: calc(50% - 子高度一半); left: calc(50% - 宽度一半);
• 未知宽高：子绝父相+top:50% left:50%+ transform:translate(-50%,-50%)
• 使用flex布局，父元素：display:flex justify-content:center align-items:center 来实现子元素的水平垂直居中

清除浮动

• 触发父元素的BFC，overflow:hidden
• 给父元素的伪元素加上clear:both
• 给浮动的元素后面加一个空的div,div上设置clear：both
  (clear属性是在block上才生效，伪元素默认是内联元素，所以清除浮动时为元素的diaplay:block)

对BFC的理解，如何创建BFC

BFC （Block Formatting Context） 块级格式化上下文，是一个独立的渲染区域，里面的元素不受外界影响，也不会影响外界

BFC的特性

• 属于同一个BFC的两个相邻容器的上下margin会重叠（重点）
• 计算BFC高度时浮动元素也参于计算（重点）
• BFC的区域不会与浮动容器发生重叠（重点）

触发BFC：

• body 根元素
• 浮动元素：float 除 none 以外的值
• 对定位元素：position (absolute、fixed)
• display 为 inline-block、table-cells、flex
• overflow 除了 visible 以外的值 (hidden、auto、scroll)

使用BFC解决问题

• 解决margin重叠问题，两个相邻的元素会有margin重叠的问题，给两个元素触发BFC（BFC的元素不会影响外界）
• 清除浮动，解决高度坍塌问题
• 避免浮动的元素遮住后面的元素，给后面的元素触发BDFC即可（可以用来实现两栏布局）

画一条0.5px的线

使用transform:scale:(0.5,0.5)
使用meta viewport

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

设置小于12px的字

使用transform:scale来收缩
使用图片，如果是内容固定不变情况下，使用将小于12px文字内容切出做图片，这样不影响兼容也不影响美观。

两个绝对定位的元素，是z-index大的在z-index小的前面嘛？

z-index值只决定同一父元素中的同级子元素的堆叠顺序,要是不是同同一父级的情况，得看父级的z-index的层叠关系
子元素永远在父元素上面

z-index属性在什么情况下会失效

• 父元素position为relative时，子元素的z-index失效。
• 元素还设置了float属性，这是要清除浮动

css硬件加速(GPU)

就是通过GPU进行渲染，解放CPU。 在css中的animation,transform,translation不会自动开启GPU，而是会使用浏览器的渲染引擎来实现，如果开启GPU，就会使渲染加速。
可以通过设置3D效果就可以开启GPU了，比如transform:translate3d(0),rotate3d(360deg)
比如使用 translate3d() rotate3d() scale3d()这几个方法，我们就可以使用ＧＰＵ加速了。
但是呢，某些情况下，我们并不想要对元素应用３Ｄ变换的效果，却还想要实现ＧＰＵ加速，这是我们就可以使用简单的ＣＳＳ属性来“欺骗”浏览器了，触发硬件加速。

写一个函数来检测浏览器可以设置的最小字体是多少(学到了)

    const div1 = document.getElementsByClassName('div1')[0]
    const getMinFontSize = (el) => {
        let size = 0;
        for (let i = 20; i >= 0; i--) {
            el.style.fontSize = i + 'px';
            const t = el.style.fontSize;
            if (size === t) {
                return size
            } else {
                size = t
            }
        }
    }
    console.log(getMinFontSize(div1));

画一个宽度为父元素宽度一半的正方形

当padding的取值是百分比时，他是相对于父元素的宽度。
width: 50%;
padding-bottom: 50%;

打乱一个有序数组

生成[min,n、max]的随机数：Math.random()*(max-min+1)+min
random生成的随机数是伪随机数，即使用一套公式来得到随机数，种子不同，得到的随机数就不同

• function fn(arr) {
  return arr.sort(() => Math.random() - 0.5)
  }
• function fn(arr) {
  var rd, t
  for (let i = 0; i < arr.length; i++) {
  rd = parseInt(Math.random() * (arr.length - 1))
  t = arr[i]
  arr[i] = arr[rd]
  arr[rd] = t
  }
  return arr
  }

移动端H5的触摸事件都有哪些？

touchstart->touchmove->touchend

画一个0.5px的线

• transfor:scale:(1,0.5)
• box-shadow:0,0.5,0,#000

事件

event.preventDefault() 取消默认事件
event.stopPropagation() 取消冒泡
event.cancelBulble()

css变量（一键换色）

先用:root声明
:root {
–blue: #1e90ff;
–white: #ffffff;
}
用的时候用var()函数
background-color: var(–white);
全局的变量会被局部的样式覆盖掉，这时可以在局部也设置变量
button {
–blue: #0000ff;
background-color: var(–white);
color: var(–blue);
border: 1px solid var(–blue);
padding: 5px;
}

给图片模糊处理

filter: blur(10px)，10px代表与10px融在一起，数值越大，越模糊

小图标

svg iconfont 精灵图 使用base64来编码图片
base64编码图片体积会增大，可以减少请求
base64使用64位可打印的字符来表示二进制，可以在HTTP传输中

css预处理器sass 、less

css有什么样的缺点？ 为什么需要sass，less

（1）语法不够强大，无法嵌套书写，开发中需要重复写很多遍选择器，造成代码冗余

（2）样式复用的规则，不能mixin，难以维护，开发效率低

什么是css预处理器

其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。为css增加了一些编程的特性 函数，变量，控制语句，导入，嵌套 等功能

有了这些功能，sass可以：

• 提供变量，实现一键切换主题色之类的功能
• 用嵌套写法减少选择器的重复书写
• 用混用功能mixin来解决代码复用问题
• 用函数进行复杂的运算
• 把样式代码模块化，减少不同模块的代码间不必要的相互影响，提高代码的安全性

//mixin:
@mixin square {
  width: 100px;
  height: 100px;
}
// 应用：
.user-avatar {
  @include square;
}

SASS 是怎么编译成 CSS的，过程。

我们写好的 Sass 代码，浏览器是不能识别的，Sass 只不过是作为一个预处理工具，只有将 Sass 代码编译成 CSS 代码后，才能够使用。写好的scss/sass文件会在运行代码后直接编译为同名的css文件
webpack: less-loader 、 scss-loader
Sass 的编译方法有很多，例如：

命令行编译模式：比较简单，可以直接在终端中输入 Sass 指令来编译，本节我们主要讲命令行编译模式的使用。
GUI工具编译：有的比较多的看一工具有 Koala、CodeKit、Scout、Compass.app 等，这些工具都需要安装。
自动化编译：可以使用 Grunt 或者 Gulp 来配置 Sass 自动化编译。

实现文本超出之后打点显示

单行文本溢出隐藏：

p{
text-overflow: ellipsis;//必须
white-space: nowrap;//必须
overflow: hidden;//必须
}
上面代码中：
text-overflow:定义文本溢出时如何处理，有2个有效值：
clip：当内联内容溢出块容器时，将溢出部分裁切掉。
ellipsis：当内联内容溢出块容器时，将溢出部分替换为（...）。 

多行

p {
overflow: hidden;//必须
display: -webkit-box;//必须
-webkit-line-clamp: 2;//必须
-webkit-box-orient: vertical;//必须
}
上面代码中：
-webkit-line-clamp：设置文本最多显示行数。
-webkit-box-orient：不设置将不显示省略号（...）。

CSS后处理器

CSS后处理器是对CSS进行处理，并最终生成CSS的预处理器，它属于广义上的CSS预处理器。

最典型的例子是CSS压缩工具（如clean-css）。

后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

怎么做样式隔离

微前端的概念自从火爆以来，对于JS隔离和css的隔离成为了众多开发者的解决的主要方向

1. 命名空间： 给每个不同模块使用的css规划好命名，这样所有的css就都不会出现冲突，这种方法虽然很好理解和简单，但是编写起来很繁琐，维护成本会很高。（例如在组件的class上加前缀，用scss变量来做）

2. css Modules： 这其实跟命名空间有点类似，vue应该就是使用类似的方法，给选择器加上特殊的字符串，达到css隔离的效果。（vue scope给根节点加上data属性<div data-v-[随机数] >）

3. css-in-js （style-components）

4. Shadow DOM 参考
   Web components 的一个重要属性是封装——可以将标记结构、样式和行为隐藏起来，并与页面上的其他代码相隔离，保证不同的部分不会混在一起，可使代码更加干净、整洁。其中，Shadow DOM 接口是关键所在，它可以将一个隐藏的、独立的 DOM 附加到一个元素上。

• shadow dom是游离在 DOM 树之外的节点树，所以文档上的CSS就不会作用在他身上。
• 通过host伪类选择器来shadow root中的任何地方访问shadow host