关于fixed和transform结合的小bug

我们知道position: fixed；偏移量是以整个浏览器窗口为参照的。

对于声明transfrom值非none元素，其子元素中若存在position: fixed将以声明transform的最近祖先作为基准而定位，这是因为transfrom值非none的元素定义了一个局部坐标系统，导致postion: fixed以此坐标系统计算布局。 目前这个bug仍未被解决，官方建议避免在transform元素下做fixed定位。

<style>
    .parent {
      transform: translate(100px, 0);
      border: 1px solid black;
    }
    .son {
      position: fixed;
      left: 60px;
      width: 50px;
      height: 50px;
      background: red;
    }
  </style>
  <div class="parent">
    <div class="son"></div>
  </div>

如何通过css实现滚动进度条

body {
      height: 2000px;
      background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
      background-size: 100% calc(100% - 100vh + 5px);
      background-repeat: no-repeat;
    }
//这里是为了覆盖body 5px一下的渐变颜色的。
    body::after {
      content: "";
      position: fixed;
      top: 5px;
      left: 0;
      bottom: 0;
      right: 0;
      background: #fff;
      z-index: -1;
    }

分辨率，像素，多倍图

同一个分辨率下，显示的像素格越多，图片越清晰。

分辨率是度量位图图像内数据量多少的一个参数。

像素密度描述的是一英寸斜边代表的范围内含有的物理像素块的数量。

设备无关像素：css中的像素。设备无关像素是一个抽象存在的像素。也就是说他可大可小。

图片像素就是虚拟像素。是因为他没有固定的尺寸，我们可以根据需要将图片拉伸成任意尺寸，相应的每个像素也会缩放。

设备像素比：DPR = 物理像素／设备无关像素

图片的分辨率就是指 图片 横向的色块数量 x 纵向的色块数量。

1. 图片像素是构成图片的像素块，他们是没有实际尺寸的，你拉伸缩放图片他的像素块数量是不会变的。

2. 设备像素是指设备屏幕被划分成的千千万万个小格子，是物理像素，你能够通过设备的长宽和分辨率计算出每个物理像素的尺寸。

3. CSS像素又叫设备无关像素，是一个抽象的概念。不同设备上的1px用肉眼看是不一样长的。是我们编码时用到的单位。

一些文字样式

white-space：normal(默认值) | nowrap | pre | pre-wrap | pre-line

• nowrap: 表示永不换行。多个普通的空格被合并为一个。但是不会干扰</br>的实现。

• pre: preserve的缩写，表示保存。就是现实在页面上的内容和写在html标签中的内容是一模一样的，包括普通的空格也会显示若干个。

• pre-wrap：preserve-wrap的缩写。表示保留和换行。是前两个属性的综合。

• pre-line： 多个普通空格被合并，而且会自动换行。

（CSS2）

• 使标题竖着排列

• table-cell：指定对象作为表格单元格。类同于html标签

（CSS2）

• 不可设置margin,可以设置padding

• table-row：指定对象作为表格行。类同于html标签

word-break： normal(默认值) | break-all | keep-all

break-all：非常强烈的折行。如果是一个很长的英文单词，可能将单词从中间截断。

keep-all: 只有空格可以触发自动换行，不然就会超出容器宽度。并且不会拆分很长的单词而换行。

word-wrap（overflow-wrap）：normal | break-word

break-word：表示不那么强烈的折行。只有在一行显示不下的时候才会拆分单词。不然就是正常折行。

letter-spacing：设置每个字符之间的距离的。

如果是英文单词，他表示每个字母之间的距离，而不是每个单词之间的距离。

wor-spacing：设置每个英文单词之间的距离。

css的层叠上下文

定义： MDN中的解释：我们假定用户正面向（浏览器）视窗或网页，而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开，层叠上下文就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性按照优先级顺序占据这个空间。

产生层叠上下文的方式：

• 文档根元素（HTML）；

• position 值为 absolute（绝对定位）或 relative（相对定位）且 z-index 值不为 auto 的元素；

• position 值为 fixed（固定定位）或 sticky（粘滞定位）的元素（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）；

• 父元素的display属性值为flex|inline-flex，子元素z-index属性值不为auto的时候，子元素为层叠上下文元素；

• grid (grid) 容器的子元素，且 z-index 值不为 auto；

• opacity 属性值小于 1 的元素（参见 the specification for opacity）；

• mix-blend-mode 属性值不为 normal 的元素；

• 以下任意属性值不为none的元素：

• transform

• filter

• perspective

• clip-path

• mask / mask-image / mask-border

• isolation 属性值为 isolate 的元素；

• -webkit-overflow-scrolling 属性值为 touch 的元素；

• will-change 值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素（参考这篇文章）；

• contain 属性值为 layout、paint 或包含它们其中之一的合成值（比如 contain: strict、contain: content）的元素。

层叠等级图

处于同一个层叠上下文中，比较的规则。

奇葩的测试：

当两个父元素，设置相同的z-index时，它们的层叠等级，层叠顺序是相同的, 此时比较的就是正常文档流中的dom顺序。

<style>
    * {
      margin: 0;
      padding: 0;
    }
    .A {
      position: relative;
      z-index: 1;
    }
    .B {
      position: relative;
      z-index: 1;
    }
    .a {
      position: absolute;
      background: red;
      width: 100px;
      height: 100px;
      z-index: 5;
    }
    .b {
      position: absolute;
      top: 100px;
      background: blue;
      width: 100px;
      height: 100px;
      margin-top: -50px;
    }
  </style>
   <div class="A">
    <p class="a">a</p>
  </div>
  <div class="B">
    <p class="b">b</p>
  </div>

层叠上下文元素的background/border的层叠等级小于z-index值小于0的元素的层叠等级。

<style>
    .box {
      display: flex;
    }
    .parent {
      width: 200px;
      height: 100px;
      background: #168bf5;
      /* 虽然设置了z-index，但是没有设置position，z-index无效，.parent还是普通元素，没有产生层叠上下文 */
      z-index: 1;
    }
    .child {
      width: 100px;
      height: 200px;
      background: #32d19c;
      position: relative;
      z-index: -1;
    }
  </style>
  <div class="box">
    <div class="parent">
      parent
      <div class="child">child</div>
    </div>
  </div>

总结：

• 层叠上下文可以包含在其他层叠上下文中，并且一起创建一个层叠上下文的层级。

• 每个层叠上下文都完全独立于它的兄弟元素：当处理层叠时只考虑子元素。

• 每个层叠上下文都是自包含的：当一个元素的内容发生层叠后，该元素将被作为整体在父级层叠上下文中按顺序进行层叠。

• 比较元素的层叠等级时，都需要在同一个父级层叠上下文中。

• 不同父级层叠上下文中的子元素中的z-index不会进行比较。

学习自掘金

will-change

为web开发者提供了一种告知浏览器该元素会有哪些变化的方法，这样浏览器可以在元素属性真正发生变化之前提前做好对应的优化准备工作。 这种优化可以将一部分复杂的计算工作提前准备好，使页面的反应更为快速灵敏。

不要将 will-change 应用到太多元素上

给它足够的工作时间：使用时需要尝试去找到一些方法提前一定时间获知元素可能发生的变化，然后为它加上 will-change 属性。建议加在改变元素之前。比如如果想让移入时元素有边框阴影，我们可以将该样式加在移入和元素的时候加给子元素。

<style>
    div {
      position: relative;
      padding: 1em;
      background-color: #fff;
    }
    div:before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      /* z-index: -1; */
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
      opacity: 0;
      will-change: opacity;
      -webkit-transition: 0.2s;
      transition: 0.2s;
    }
    div:hover:before {
      opacity: 1;
    }
  </style>
  <div>
    <p>
      dwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwd吧哒哒哒哒哒哒多地对地导弹对哒哒哒哒哒哒多多多多多多多多多
    </p>
  </div>

meta标签的作用

如果设置了 name 属性，meta 元素提供的是文档级别（document-level）的元数据，应用于整个页面。和content结合使用，以名-值对的方式给文档提供元数据，其中 name 作为元数据的名称，content 作为元数据的值。

• 常用的值： keywords，description, viewport

keywords: 设置关键字，content为要设置的关键字，利于搜索引擎的搜索。

description: 该网页的描述文字，content为描述文字，利于搜索引擎的搜索。

viewport: 它提供有关视口初始大小的提示，仅供移动设备使用。content表示对于移动端的一些设置。

如果设置了 http-equiv 属性，meta 元素则是编译指令，提供的信息与类似命名的HTTP头部相同。

• 常用的值：content-type，refresh(刷新)，expires (期限)

content-type，设置的content为text/html;charset=utf-8
refresh, 让网页多长时间（秒）刷新自己，或在多长时间后让网页自动链接到其它网页。设置的content如果只有一个整数，则表示间隔多少秒刷新一次网页，如果还设置了url，则表示间隔多少秒跳转到指定的url处。

<meta http-equiv="refresh" content="2; url=http://39.97.212.45:3000/" >

• expires, 表示指定缓存文档的过期时间，一旦网页过期后，就必须从服务器中重新请求。content设置的是过期时间。格式必须是GMT

<meta http-equiv="expires" content="Wed, 17 Jun 2020 00:00:00 GMT" >

如果设置了 charset 属性，meta 元素是一个字符集声明，告诉文档使用哪种字符编码。

<meta charset="utf-8" > //表示网页编码为utf-8

参考

MDN

知乎

link标签

rel: 表示链接方式与包含它的文档之间的关系。

• icon，表示引入文档图标

• stylesheet，表示引入css资源

• preload，表示浏览器应该预加载该资源 ，并且这个属性的使用必须得依赖as，as的值表示加载的内容的类型

href：引入的链接。

media：表示该链接在什么条件下生效。

disabled：表示禁用引入的链接。

dns-prefetch: 此属性标识下一个导航可能需要的资源，用户代理应检索该资源。 这允许用户代理在将来请求资源时更快地做出响应。

title：属性在元素上有特殊的语义。当用于stylesheet时，它定义了一个首选样式表或备用样式表。不正确地使用它可能会导致样式表被忽略。如果link标签都有title属性那么他只会加载第一个link引入的样式文件。如果有link标签没有title,则表示永久生效的样式文件，而且后引入的覆盖前面引入的。

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--这个样式生效->
  <link rel="stylesheet" href="./css/style3.css" title="base3">
  <!-- 这里的样式覆盖了前面的样式。并且始终生效 -->
  <link rel="stylesheet" href="./css/style1.css">
  <!-- 这个样式不生效->
  <link rel="stylesheet" href="./css/style2.css" title="base2">
  <!-- <link rel="stylesheet" href="./css/style3.css" title="base3"> -->
  <title>Document</title>
</head>
<body>
  <div></div>
  <span>测试文字</span>
</body>

参考至 MDN

CSS性能优化

内联首屏关键CSS（Critical CSS）

内联CSS能够使浏览器开始页面渲染的时间提前，因为在HTML下载完成之后就能渲染了。

不过内联CSS有一个缺点，内联之后的CSS不会进行缓存，每次都会重新下载。不过如上所说，如果我们将内联后的文件大小控制在了14.6kb以内，这似乎并不是什么大问题。

异步加载css

通过js动态添加标签。

// 创建link标签
const myCSS = document.createElement( "link" );
myCSS.rel = "stylesheet";
myCSS.href = "mystyles.css";
// 插入到header的最后位置
document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling );

去除无用CSS

通过Uncss库。

有效的使用css选择器

保持简单，不要使用嵌套过多过于复杂的选择器。

通配符和属性选择器效率最低，需要匹配的元素最多，尽量避免使用。

不要使用类选择器和ID选择器修饰元素标签，如p.a，这样多此一举，还会降低效率。

不要为了追求速度而放弃可读性与可维护性。

不要使用@import引入css文件

首先，使用@import引入CSS会影响浏览器的并行下载。使用@import引用的CSS文件只有在引用它的那个css文件被下载、解析之后，浏览器才会知道还有另外一个css需要下载，这时才去下载，然后下载后开始解析、构建render tree等一系列操作。这就导致浏览器无法并行下载所需的样式文件。

分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场

1. display: none (不占空间，不能点击)（场景，显示出原来这里不存在的结构）

2. visibility: hidden（占据空间，不能点击）（场景：显示不会导致页面结构发生变动，不会撑开）

3. opacity: 0（占据空间，可以点击）（场景：可以跟transition搭配）

结构： display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击， visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击 opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击

继承： display: none和opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。 visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。

性能： displaynone : 修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大 visibility:hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容 opacity: 0 ： 修改元素会造成重绘，性能消耗较少

联系：它们都能让元素不可见

边框背景border-image

/* border-image: image-source image-height(如果是数值的话是边框宽度的倍数) image-width image-repeat */

<style>
    .box1 {
      border: 30px solid transparent;
      padding: 20px;
      border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 30;
    }
    .box2 {
      border: 30px solid transparent;
      padding: 20px;
      border-image: linear-gradient(red 49%, green 50%) 30;
    }
  </style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>

选择器的权重

CSS基本选择器包含ID选择器、类选择器、标签选择器、通配符选择器。 正常情况下，一般都能答出!important > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符选择器。

下三角

1.利用border

2.clip-path

.triangle {
    width: 30px;
    height: 30px;
    background: red;
    clip-path: polygon(0px 0px, 0px 30px, 30px 0px); // 将坐标(0,0),(0,30),(30,0)连成一个三角形
    transform: rotate(225deg); // 旋转225，变成下三角
}

clip-path

/* 前面的四个值，指的是距离兄弟元素的距离。为上右下左 。后面的值表示插入的长方形四个角的弧度。*/
   clip-path: inset(35% 35% 35% 35% round 0 70% 0 70%);
   /* 半径以一个以百分比表示的值将以公式 sqrt(width^2+height^2)/sqrt(2)计算，其中width与height为相关盒模型的宽与高。 圆心位置是以相关盒模型的宽高决定的。x:宽度换算。y:高度换算。*/
   clip-path: circle(25% at 50% 50%);
   /* 半径和圆心位置以百分比表示的长度将把盒模型的宽与高作为参照，宽作为 rx 的参照值，高作为 ry 的参照值。 */
   clip-path: ellipse(25% 25% at 50% 50%);
  /* 百分比表示的值x坐标是以模型和的宽度为参考的。y坐标是以模型和的高度做参考的。 */
  clip-path: polygon(50% 0, 25% 50%, 75% 50%);

1rem、1em、1vh、1px各自代表的含义？

rem

rem是全部的长度都相对于根元素元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。

em

• 子元素字体大小的em是相对于父元素字体大小

• 元素的width/height/padding/margin用em的话是相对于该元素的font-size

vw/vh

全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于 屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的 话 vh 单位更好。

px

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

一般电脑的分辨率有{1920*1024}等不同的分辨率

1920*1024 前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素

伪类和伪元素的区别

伪类：

1. 就是选择普通选择器不能选择的元素状态。

2. 由于状态的变化是⾮静态的，所以元素达到⼀个特定状态时，它可能得到⼀个伪类的样式；当状态改变时，它⼜会失去这个样式。

3. 使用单引号表示

伪元素：

1. 设置文档流不存在的内容，是虚拟容器。

2. 核⼼就是需要创建通常不存在于⽂档中的元素。

3. 以双引号来表示

相同之处：

• 伪类和伪元素都不出现在源⽂件和DOM树中。也就是说在html源⽂件中是看不到伪类和伪元素的。

不同之处：

• 伪类其实就是基于普通DOM元素⽽产⽣的不同状态，他是DOM元素的某⼀特征。

• 伪元素能够创建在DOM树中不存在的抽象对象，⽽且这些抽象对象是能够访问到的。

CSS命名规范

BEM命名

其中，block表示的是独立的分块或组件；独立就意味着，把这一部分放到其他部分也可以正常展示与使用，它不会依赖其父元素或兄弟元素。element表示每个block中更细粒度的元素；modifier则通常会用来表示该block或者element不同的类型和状态。

.block {}
.block__element {}
.block--modifier {}
.block__element--modifier {}

vertical-align

vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方。只能是inline和table-cell元素。不能是line-block。所以如果使图片居中，我们只能设置他的类型为table-cell。

div {
      display: table-cell;
      height: 500px;
      width: 900px;
      border: 1px solid black;
      text-align: center;
      /* CSS 的属性 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方 */
      vertical-align: middle;
    }

text-align

text-align CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐。

link和@import的区别

• @import中的样式优先级最低。内部样式也会覆盖他。

• Link 属于 html 标签，而@import 是 CSS 中提供的

• 在页面加载的时候，link 会同时被加载，而@import 引用的 CSS 会在页面加载完成后才会加 载引用的 CSS

• @import 只有在 ie5 以上才可以被识别，而 link 是 html 标签，不存在浏览器兼容性问题

• Link 引入样式的权重大于@import 的引用（@import 是将引用的样式导入到当前的页面中）

Doctype 的作用？严格模式与混杂模式的区别？

用于告知浏览器该以何种模式来渲染文档

严格模式下：页面排版及 JS 解析是以该浏览器支持的最高标准来执行。

混杂模式：不严格按照标准执行，主要用来兼容旧的浏览器，向后兼容。

轻松切换图片

img:hover{
    content: url(path);
}

content 改变的仅仅是视觉呈现，当我们鼠标右键或其他形式保存这张图片时，所保存的还是原来 src 对应的图片。这种方法还可以用在官网标志上。

由于使用 conetnt 生成图片无法设置图片的尺寸，要想在移动端使用该技术，建议使用SVG图片。