css常见问题

BFC

BFC （block formatting context） 及块级格式化上下文，从样式上看，具有 BFC 的元素与普通的容器没有什么区别，从功能上看，BFC 相当于构建了一个密闭的盒子模型，在 BFC 中的元素不受外部元素的影响。

创建 BFC 的场景：

• 根元素或其它包含它的元素 (也就是 html 元素本身就是 BFC)
• float:left , right
• position:absolute,fixed
• display:inline-block,table-cell,table-caption;(行内块元素与表格元素)
• overflow：hidden，auto，scroll （非 visible 属性）
• display: flow-root （该元素生成一个块级元素盒，其会建立一个新的区块格式化上下文，定义格式化上下文的根元素）

BFC 的作用：

1. 清除浮动，解决浮动元素高度塌陷的问题
2. 解决浮动元素重叠的问题
3. 解决边据重叠问题

• 父子元素边距重叠
• 兄弟元素边据重叠

浮动元素

这是一段文本内容,演示BFC可以阻止文字环绕浮动元素。

水平垂直居中

/* case1 绝对定位 + margin偏移 */
.container {
  position: relative;
}

.center {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
}

/* case2 当被居中的元素是inline或者inline-block元素 */
.container {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.center {
}

/* case3 绝对定位 + transform偏移 */
.container {
  position: relative;
}

.center {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 这个方法更常用，自身的宽高可以是未知的 */
}

/* case4 使用 transform */
.container {
  position: relative;
}
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* case5 使用flex */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.center {
}

/* case6 使用grid  */
/* place-items 属性。用于同时设置 justify-items 和 align-items。 */
.container {
  display: grid;
  place-items: center; /* 水平和垂直居中 */
}
/* 使用 align-items 和 justify-items */
.container {
  display: grid;
  justify-items: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
/* 使用 grid-template-rows 和 grid-template-columns */
.container {
  display: grid;
  grid-template-rows: 1fr; /* 占据剩余空间 */
  grid-template-columns: 1fr; /* 占据剩余空间 */
}

.child {
  margin: auto; /* 自动边距使子元素居中 */
}
/* 使用 grid-template-areas */
.container {
  display: grid;
  grid-template-areas: "center";
  justify-content: center; /* 水平居中 */
  align-content: center; /* 垂直居中 */
}

.center {
  grid-area: center;
}

Flex居中

Position居中

清除浮动

/* 父级div定义 伪类:after */
<style>
  .float {
    float: left;
  }
    /*清除浮动代码*/
  .clearfix:after {
   content: "";
   display: block;
   clear: both;
  }
</style>
<div class="clearfix">
  <div class="float">
  </div>
</div>

浮动元素1

浮动元素2

隐藏元素的方式及区别

有多种方法可以隐藏元素的 CSS。

display: none;：将元素完全隐藏，不占据任何空间。
visibility: hidden;：将元素隐藏，但仍占据空间。
opacity: 0;：将元素透明化，但仍占据空间。
position: absolute; left: -9999px;：将元素定位到屏幕外部，不显示在可见区域。
height: 0; width: 0; overflow: hidden;：将元素高度和宽度设为0，同时隐藏溢出内容。
clip-path: polygon(0 0, 0 0, 0 0);：使用剪切路径将元素隐藏。

display: none; 、visibility: hidden; 和 opacity: 0 都可以使元素不可见。

核心点在于 display: none 的 DOM 元素在布局阶段中会被擦除（即布局树上不存在对应节点）。

区别：

结构上：

display: none ：布局树中不存在对应节点，因此不占布局空间，而且不能点击。

visibility: hidden：布局树中存在对应节点，因此占据布局空间，但是不能点击。

opacity: 0：布局树中存在对应节点，因此占空间，而且能响应点击事件。

继承上：

display: none ：作用于父元素后，子元素也不会被渲染（即使给子元素加了 display: block）

visibility: hidden：作用于父元素后，子元素继承这个属性，也不可见；不过可以给子元素设置 visibility: visible 使其可见。

opacity: 0：作用于父元素后，虽然子元素不会继承这个属性，但是子元素的透明度也会被影响，所以也不可见；而且不能通过给子元素设置 opacity: 1 使其变成不透明。

性能上：

display: none：会造成回流/重绘，性能影响大

visibility: hidden：会造成元素内部的重绘，性能影响相对小

opacity: 0：由于 opacity 属性启用了 GPU 加速，性能最好

使用场景：

opacity: 0：适用于需要实现淡出效果的场景，比如弹出层的显示和隐藏。

visibility: hidden：适用于需要占据原来空间的元素，但不需要显示的场景，比如菜单的展开和收起。

display: none：适用于需要完全隐藏元素的场景，比如实现一个开关，点击开关后可以隐藏或者显示某个元素。

其他： 读屏器不会读取display: none;元素内容；会读取visibility: hidden;元素内容

opacity 是不继承属性，父元素设置 opacity，子元素并不会继承。但是因为该属性的特殊性（类似 background），父元素有了透明度，子元素的样式也会被影响。如果父元素设置 opacity: 0.5，子元素设置 opacity: 0.5，那么实际上子元素的透明度是 0.5 \* 0.5 = 0.25。

如果希望子元素不被父元素的透明度影响，我们可以使用 background: rgba 代替 opacity: 0

隐藏效果演示元素

块级元素和行内元素的区别

block 元素有：<article>, <aside>, <audio>, <blockquote>, <canvas>, <dd>, <details>, <dialog>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <iframe>, <li>, <main>, <nav>, <noscript>, <ol>, <p>, <pre>, <section>, <table>, <tbody>, <tfoot>, <thead>, <ul>。

block 元素特点：

1. 处于常规流中时，如果 width 没有设置，会自动填充满父容器
2. 可以应用 margin/padding
3. 在没有设置高度的情况下会扩展高度以包含常规流中的子元素
4. 处于常规流中时布局时在前后元素位置之间（独占一个水平空间）
5. 忽略 vertical-align

inline 元素有：<a>, <abbr>, <b>, <bdi>, <bdo>, <br>, <cite>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <q>, <ruby>, <rt>, <s>, <samp>, <small>, <span>, <strong>, <sub>, <sup>, <time>, <u>, <var>, <wbr>。

inline 元素特点

1. 水平方向上根据 direction 依次布局
2. 不会在元素前后进行换行
3. 受 white-space 控制
4. margin/padding 在竖直方向上无效，水平方向上有效
5. width/height 属性对非替换行内元素无效，宽度由元素内容决定
6. 非替换行内元素的行框高由 line-height 确定，替换行内元素的行框高由 height,margin,padding,border 决定
7. 浮动或绝对定位时会转换为 block
8. vertical-align 属性生

flex 布局

阮一峰 flex 布局 flex 容器属性

.flex-container {
  display: flex;
  flex-direction: row;
  /* 主轴的方向，默认row，从左往右 */
  flex-wrap: nowrap;
  /* 是否换行，默认不换行*/
  justify-content: center;
  /* 主轴上的布局，默认flex-start */
  align-items: center;
  /* 交叉轴上的布局，默认值flex-start */
  align-content: center;
  /* 多条轴线的布局 */
}

flex 子元素属性

.flex-items {
  order: 2;
  /* 项目的order， 越大的越后面*/
  flex-grow: 1;
  /* 扩张比例，默认0，不占剩余空间 */
  flex-shrink: 0;
  /* 缩小比例，默认1，自动缩小*/
  flex-basis: 200px;
  /* 主轴上的宽度 */
  flex: 1 0 200px;
  /* 上面三条的缩写 */
  align-self: flex-end;
  /* 修改项目的交叉轴布局*/
}

Flex: 1

Flex: 2

Flex: 1

Space

Between

Items

样式优先级

1. 标签选择器：如div
2. ID 选择器：如#root
3. class 选择器：如.container
4. 子代选择器（即父子关系）：，如div > p
5. 后代选择器 （即可以是爷爷和孙子的关系）：如div p
6. 相邻兄弟选择器：如div + p， 选择紧邻着 div 后面的 p
7. 属性选择器：如input[type=input]
8. 伪类选择器：如:hover、:first-child、:nth-child()、:first-of-type、
9. 通配符选择器：*

在 HTML 渲染管线的样式计算环节中会计算出 DOM 节点最终的样式属性，具体的优先级如下：：!important > inline selector > id selector > class selector > tag selector > * > 浏览器默认样式 > 继承样式。这里的继承样式指的是部分样式如font-size、color、visibility是会继承给子节点的。

css 尺寸单位

1. 像素（Pixel，缩写为 px）：是最常用的单位，表示屏幕上的一个点，可以精确地指定元素的大小。
2. 百分比（Percentage，缩写为%）：相对于父元素的大小，可以根据父元素的大小来设置子元素的大小。
3. em：相对于当前元素的字体大小，用于设置字体大小时很常用。
4. rem：相对于根元素（即 html 元素）的字体大小。
5. vh/vw：相对于视口（Viewport）的高度和宽度。cm、mm、in、pt、pc 等长度单位：用于打印样式表，不建议在 Web 开发中使用。
6. 自定义单位：可以通过 CSS 的 calc()函数自定义单位，比如使用"1fr"作为网格布局中的单位。

需要注意的是，不同的浏览器可能会有不同的计算方式和默认值，因此在设置尺寸时需要进行充分的测试和兼容性处理。

实现吸顶效果

/* 1. 使用 `position: sticky` */
.content {
  position: sticky;
  top: 0;
  background-color: #fff;
}

文档流

CSS 的文档流（Document Flow）是指文档中元素按照其在 HTML 中出现的顺序自上而下布局的方式，也称为常规流（Normal Flow）或默认流。文档流定义了元素的布局顺序和定位方式，包括元素的位置、大小、间距等属性。

在文档流中，每个元素都会占据一定的空间并尽可能充满其包含块的宽度。每个元素的位置都会受到前面元素的影响，如果前面的元素发生位置变化，那么后面的元素的位置也会发生相应的变化。

文档流中的元素按照下面的规则排列：

块级元素：块级元素会独占一行，并在前面自动添加一个垂直间距。例如：<p>、<div>、<h1> 等。

行内元素：行内元素会在一行中排列，并且宽度根据内容自适应。例如：<a>、<span>、<img> 等。

行内块级元素：行内块级元素与行内元素类似，但是它可以设置宽度、高度等块级元素的属性。例如：<input>、<button>、<textarea> 等。

文档流是 CSS 中最基本、最重要的概念之一，它决定了网页的整体布局和排版方式。

position 常用属性

CSS 中 position 属性用于指定元素的定位方式，它有以下常见的属性值：

static：默认值，元素在文档流中正常排列。

relative：元素在文档流中正常排列，但是可以通过设置 top、right、bottom、left 属性相对于其正常位置进行偏移，不会影响其它元素的位置。

absolute：元素脱离文档流，相对于最近的非 static 定位的祖先元素进行定位，如果没有则相对于 <html> 元素进行定位。通过设置 top、right、bottom、left 属性进行偏移，如果祖先元素发生位置变化，则元素的位置也会发生相应的变化。

fixed：元素脱离文档流，相对于浏览器窗口进行定位，始终保持在窗口的固定位置，不会随页面滚动而滚动。通过设置 top、right、bottom、left 属性进行偏移。

sticky：元素在文档流中正常排列，当元素滚动到指定的位置时，停止滚动并固定在该位置，直到其祖先元素发生滚动时才会取消固定。通过设置 top、right、bottom、left 属性和 z-index 属性进行设置。

BFC、IFC、GFC 和 FFC

BFC（Block Formatting Contexts）块级格式化上下文。

BFC 布局规则

1. 内部的 Box 会在垂直方向，一个接一个地放置。
2. Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。
3. 每个元素的 margin box 的左边， 与包含块 border box 的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4. BFC 的区域不会与 float box 重叠。
5. BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6. 计算 BFC 的高度时，浮动元素也参与计算

IFC 全称：Inline Formatting Context，名为行级格式化上下文

IFC 布局规则

1. 在一个 IFC 内，子元素是水平方向横向排列的，并且垂直方向起点为元素顶部。
2. 子元素只会计算横向样式空间，【padding、border、margin】，垂直方向样式空间不会被计算，【padding、border、margin】。
3. 在垂直方向上，子元素会以不同形式来对齐（vertical-align）
4. 能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框（line box）。行框的宽度是由包含块（containing box）和与其中的浮动来决定。
5. IFC 中的 line box 一般左右边贴紧其包含块，但 float 元素会优先排列。
6. IFC 中的 line box 高度由 CSS 行高计算规则来确定，同个 IFC 下的多个 line box 高度可能会不同。
7. 当 inline boxes 的总宽度少于包含它们的 line box 时，其水平渲染规则由 text-align 属性值来决定。
8. 当一个 inline box 超过父元素的宽度时，它会被分割成多个 boxes，这些 boxes 分布在多个 line box 中。如果子元素未设置强制换行的情况下，inline box 将不可被分割，将会溢出父元素。

GFC（Grid Formatting Contexts）栅格格式化上下文 GFC 布局规则 通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间（具体可以在 MDN 上查看）

FFC（Flex Formatting Contexts）弹性格式化上下文 FFC 布局规则

1. 设置为 flex 的容器被渲染为一个块级元素
2. 设置为 inline-flex 的容器被渲染为一个行内元素
3. 弹性容器中的每一个子元素都是一个弹性项目。弹性项目可以是任意数量的。弹性容器外和弹性项目内的一切元素都不受影响。简单地说，Flexbox 定义了弹性容器内弹性项目该如何布局

grid 布局

CSS Grid 布局是 CSS 中的一种新的布局系统，旨在通过 网格（grid）和 行（row）、列（column）的概念来创建灵活的、高效的、响应式网页布局。CSS Grid 布局可以将一个元素的内容划分为多个网格，根据需要，可以在这些网格中定位元素。

CSS Grid 布局用于实现网格布局，以下是常用的几个属性：

display: grid;：设置一个元素为网格容器
grid-template-columns：定义网格中每一列的大小和数量
grid-template-rows：定义网格中每一行的大小和数量
grid-template-areas：为网格中的区域命名，以便将子元素分配到特定的区域
grid-column-gap 和 grid-row-gap：定义网格中行和列之间的间距
grid-area：定义元素应该在网格中的哪个区域，比如指定其所在的行、列和跨越的行列数量
grid-column-start 和 grid-column-end：定义元素开始和结束的列位置，类似地，grid-row-start 和 grid-row-end 定义元素开始和结束的行位置
grid-column 和 grid-row：简写属性，组合了 grid-column-start 、grid-column-end 、grid-row-start 和 grid-row-end，用于同时设置元素在网格中的列和行位置。

1

2

3

4

5

6

css 伪类和伪元素

伪类是对元素在特定状态下的一种描述。 例如：

:hover，鼠标移动到元素上时产生的效果。

:active，鼠标按下去但没有释放时的状态。

:focus，元素获取焦点时的状态。

:visited，链接被点击并访问过时的状态。

:nth-child(n)，选中元素的第 n 个 child 元素。

:first-child，选中第一个 child 元素。

:last-child，选中最后一个 child 元素。

伪元素是对元素局部样式的描述，允许我们对某个元素的特定部分进行样式设置。

::before，在元素内容前插入内容。

::after，在元素内容后插入内容。

::first-letter，选择元素的第一个字母。

::first-line，选择元素的第一行。

::selection，选择用户选中文本的部分。

区别与使用：

伪类的作用是改变元素在特定状态下的样式，而伪元素则充当一个元素的某一部分来做样式处理。 由于伪元素技术强大，可以为元素添加完全独立的内容而无需改变 HTML，因此在一些需要前端动态处理或给传统 HTML 元素嵌入样式的情况下，往往会用到伪元素技术。比如用 ::before 和 ::after 实现类似插画的效果。 伪类和伪元素在实际应用中搭配使用，可以产生更复杂和丰富的样式效果。因此在大量的开发工程中，两者的灵活应用至关重要。

如何防止 css 阻塞渲染

场景： 当浏览器遇到link标签会停止解析html去单独请求样式表文件，当样式文件很大或者网络速度很慢，它将阻止页面的渲染。

一些方法可以防止或减轻 CSS 阻塞渲染：

1. 内联样式：使用内联样式而不是外部样式表，将样式放在页面的顶部，这样 HTML 就能很快地被渲染出来。
2. 通过媒体查询加载符合指定媒体类型或条件的样式表。这样不会影响未满足条件的设备或屏幕渲染结果。
3. 使用 rel="preload" 或者 rel="prefetch" 预加载样式表，这有助于在页面渲染过程中尽早加载样式表，提高页面加载速度。
4. 通过使用 JavaScript 动态加载样式表，可以实现延迟加载和异步加载。这可以帮助查看者能够看到尽快的内容，然后在不影响查看体验的前提下加载样式表。
5. 考虑压缩和优化您的 CSS 文件，以使代码更加紧凑、加载更快。
6. 对已经被加载的字体和图片，使用 CSS Sprites 技术合并到一个文件或者减少 HTTP 请求数量。

画三角形

/* 使用边框 */
.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

/* 使用伪元素 */
.triangle {
  position: relative;
  width: 100px;
  height: 100px;
}
.triangle:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-width: 0 100px 100px 0;
  border-style: solid;
  border-color: red;
}

/* 使用旋转 */
.triangle {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotate(45deg);
}

css3 新特性

CSS3 引入了许多新特性和模块，以下是一些常见的 CSS3 新特性：

1. 选择器增强：

属性选择器：支持更多的属性选择器，如属性值前缀、后缀、包含等。 伪类选择器：引入了新的伪类选择器，如:nth-child()、:nth-of-type()等。

2. 盒子模型：

边框圆角（border-radius）：可以设置元素的边框圆角。 阴影效果（box-shadow）：可以为元素添加阴影效果。 盒子大小（box-sizing）：可以调整盒子模型的尺寸计算方式。

3. 背景和渐变：

线性渐变（linear-gradient）：可以创建水平或垂直方向的渐变背景。 径向渐变（radial-gradient）：可以创建从一个中心点向外扩散的渐变背景。

4. 文字和字体：

@font-face：允许在网页中引用自定义字体文件。 文字阴影（text-shadow）：可以为文字添加阴影效果。 多列文字（columns）：可以创建多列布局的文字。

5. 过渡和动画：

过渡效果（transition）：可以实现元素在不同状态之间的平滑过渡。 关键帧动画（@Keyframes）：可以定义动画的关键帧和动画效果。 动画属性（animation）：用于指定动画的持续时间、重复次数等属性。

6. 弹性布局（Flexbox）：

引入了弹性布局模型，使元素在容器中的布局更加灵活和自适应。

7. 响应式布局（Media Queries）：

可以根据不同的媒体查询条件应用不同的样式，实现响应式布局。

8. 变换和变形：

2D 变换（transform）：可以对元素进行平移、旋转、缩放等变换操作。 3D 变换（transform）：可以实现元素的三维空间变换效果。

9. 过滤器（Filter）：

可以应用各种视觉效果和图像处理效果，如模糊、亮度、对比度等。

10. 多列布局（Multicolumn Layout）：

可以将内容分为多列进行布局。

postCss

postcss github 官网 PostCSS 是一个用 JavaScript 编写的工具，用于对 CSS 进行转换和处理。它可以通过插件机制对 CSS 进行各种自定义的转换操作，从而扩展 CSS 的功能和语法。

PostCSS 的作用主要有以下几个方面：

1. CSS 预处理器：PostCSS 可以像 Sass 或 Less 一样用于编写更简洁、可维护的 CSS 代码。通过使用类似于变量、嵌套、Mixin 等功能，可以提高 CSS 开发的效率和灵活性。

2. 自动添加浏览器前缀：PostCSS 可以根据配置自动为 CSS 属性添加适应不同浏览器的前缀，解决浏览器兼容性问题。

3. CSS 模块化：PostCSS 可以使用类似于 CSS Modules 的功能，将 CSS 代码分割为独立的模块，避免样式冲突，提供更好的可维护性和代码复用性。

4. 代码优化和压缩：PostCSS 提供了一些插件，可以对 CSS 代码进行优化和压缩，减小文件大小，提高加载性能。

5. 编写自定义插件：PostCSS 的插件机制非常灵活，可以根据项目需求编写自定义的插件，进行各种 CSS 转换和处理操作，如自定义属性、自定义函数等。

可以用于增强 CSS 的能力，并提供更好的开发体验和效果优化。

html 元素有多个 class 名称，对于的渲染优先级

CSS 的渲染优先级遵循以下规则：

内联样式（Inline Styles）具有最高优先级。如果在元素节点的 style 属性中定义了内联样式，它将覆盖所有其他样式规则。

如果多个 class 名称对应的样式规则具有相同的优先级，将根据它们在 HTML 文档中出现的顺序进行应用。后面出现的样式规则将覆盖先前出现的规则。

如果不同 class 名称对应的样式规则具有不同的优先级，将根据选择器的权重来决定应用的样式规则。选择器的权重由选择器类型、选择器的组合和使用的选择器数量等因素确定。一般而言，ID 选择器的权重最高，然后是类选择器和属性选择器，最后是元素选择器和伪类选择器。

遵循：先根据规则定义和选择器优先级的权重影响。如果样式规则具有相同的优先级，则根据它们在 HTML 文档中的出现顺序进行应用。如果样式规则具有不同的优先级，则根据选择器的权重来决定应用的样式规则。

如何避免全局样式污染

全局样式命名冲突和样式覆盖问题怎么解决？

1. 使用命名约定：给不同组件、模块或页面的样式类名添加特定的前缀，以确保它们的作用范围只在对应的组件、模块或页面内生效。例如，使用 BEM（Block Element Modifier）命名约定可以将样式类名划分为块、元素和修饰符，以实现更明确的样式隔离。

2. 使用 CSS-in-JS：使用 CSS-in-JS 技术，将样式直接与组件绑定，可以避免全局样式的冲突。每个组件都有自己的样式定义，不会影响其他组件。

3. 使用 CSS Modules：CSS Modules 是一种 CSS 模块化的解决方案，它通过将 CSS 文件与组件绑定，生成唯一的类名，实现样式的局部作用域。这样可以避免全局样式冲突。

4. 使用作用域限定符：使用 CSS 预处理器（如 Sass 或 Less）的作用域限定符（如父选择器 &）来限制样式的作用范围。通过嵌套样式规则，并使用作用域限定符，可以确保样式仅应用于特定的父元素。

5. 使用样式重置/规范：使用样式重置或规范库，如 Normalize.css，可以消除浏览器默认样式的差异，以确保在不同浏览器下呈现一致的样式，并避免全局样式污染。

6. 使用模块化开发框架：使用诸如 React、Vue 或 Angular 等模块化开发框架，它们提供了组件化的开发模式，每个组件具有独立的样式作用域，可以避免全局样式的冲突。

常用的 css 库

1. CSS Modules：CSS Modules 是一种 CSS 模块化的解决方案，可以将样式文件与组件绑定，生成唯一的类名，实现样式的局部作用域。常见的 CSS Modules 实现包括 webpack 的 css-loader 和 vue-style-loader。

2. CSS-in-JS：CSS-in-JS 是一种将 CSS 样式直接写在 JavaScript 代码中的技术，通过将样式与组件绑定，可以实现样式的局部作用域。常见的 CSS-in-JS 工具库有 styled-components、Emotion、Vue 的 scoped CSS 等。

3. CSS Reset/Normalize：CSS Reset 或 Normalize.css 是一种重置或规范化浏览器默认样式的方法，通过统一浏览器样式差异，避免全局样式污染。

4. PostCSS 插件：PostCSS 是一个强大的 CSS 处理工具，可以通过使用各种插件来帮助避免全局样式污染。例如，postcss-modules 可以将样式文件转换为 CSS Modules 格式，postcss-preset-env 可以根据目标浏览器自动添加前缀。

5. CSS 预处理器：CSS 预处理器如 Sass 或 Less 提供了作用域限定符和嵌套样式规则的功能，可以帮助限制样式的作用范围，避免全局样式冲突。

实现顶部滚动进度条

1. 监听滚动事件
2. 计算滚动进度
3. 将滚动进度的样式设置为顶部进度条的进度

文本溢出隐藏

/* 单行文本溢出 */
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 多行文本溢出 */
.ellipsis-multiline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 设置显示的行数 */
  overflow: hidden;
  text-overflow: ellipsis;
}

css module 是什么

CSS Modules 是一种用于组织和管理 CSS 的技术。它通过在编译时为每个 CSS 类名生成唯一的标识符，并将它们作为 JavaScript 对象的属性导出。这样，可以确保每个类名在整个应用程序中的唯一性，避免样式冲突。

使用 CSS Modules，可以将 CSS 文件与组件文件绑定在一起，这样每个组件都有自己的 CSS 作用域，样式只会应用于特定的组件，不会影响其他组件。这种隔离性和局部作用域有助于降低样式冲突和维护 CSS 的复杂性。

CSS Modules 还提供了一些其他功能，例如:

1. 局部作用域: CSS Modules 允许在组件中定义局部样式，这些样式仅适用于该组件。这样，可以避免全局样式造成的副作用，并使组件更加可重用。

2. 类名和样式的映射: 使用 CSS Modules，可以通过导入生成的样式对象，将类名映射到组件中的类名，并将其应用于相应的元素。这样可以方便地将样式与组件关联起来，并跟踪样式的变化。

3. 继承和组合: CSS Modules 支持继承和组合样式。可以通过使用类名组合和继承规则，将多个样式应用于同一个元素或组件。

总结来说，CSS Modules 提供了一种更可靠和可维护的方式来管理 CSS，通过实现局部作用域和唯一类名标识符，帮助开发者避免样式冲突和提高样式的可重用性。

css 加载会阻塞 DOM 树渲染吗

css 加载不会阻塞 DOM 树的解析

css 加载会阻塞 DOM 树的渲染

css 加载会阻塞后面 js 语句的执行

因此，为了避免让用户看到长时间的白屏时间，我们应该尽可能的提高 css 加载速度，比如可以使用以下几种方法:

使用 CDN(因为 CDN 会根据你的网络状况，替你挑选最近的一个具有缓存内容的节点为你提供资源，因此可以减少加载时间) 对 css 进行压缩(可以用很多打包工具，比如 webpack,gulp 等，也可以通过开启 gzip 压缩) 合理的使用缓存(设置 cache-control,expires,以及 E-tag 都是不错的，不过要注意一个问题，就是文件更新后，你要避免缓存而带来的影响。其中一个解决防范是在文件名字后面加一个版本号) 减少 http 请求数，将多个 css 文件合并，或者是干脆直接写成内联样式(内联样式的一个缺点就是不能缓存)

display 的属性

以下是一些常见的 display 属性值及其含义：

none：元素不会被显示。

block：元素显示为块级元素，此类元素会新起一行。

inline：元素不会新起一行，其宽度只占据它的内容宽度。

inline-block：元素横排显示，但是同时具备块级元素的特性，比如可以设置宽高。

flex：元素会变成弹性容器（flex container），其子元素会成为弹性项（flex items）。这个值允许使用弹性盒子布局（flexbox）。

grid：元素会变成网格容器，其子元素会成为网格项。它开启了网格布局。

table、table-row、table-cell 等：这些值让元素表现得像表格元素一样。

list-item：元素会表现为列表项（像<li>元素一样）。

css 属性计算 calc

/* 基本运算 */
.element {
  width: calc(100% - 80px);
}

/* 混合单位 */
.element {
  margin-top: calc(50vh - 50px);
}

/* 嵌套 */
.element {
  width: calc(100% - calc(50px + 2em));
}

/* 环境变量 */
:root {
  --main-padding: 10px;
}

.element {
  padding: calc(var(--main-padding) * 2);
}

/* 动态值调整 */
.element {
  position: absolute;
  bottom: calc(50% - 20px);
}

当使用 calc() 时有一些规则需要注意，例如:

运算符之间需要有空格。calc(50% -50px) 是无效的，而 calc(50% - 50px) 是有效的。 不能进行 0 除运算，也就是说分母不能为 0。 在进行乘法和除法时，至少有一个值必须是数值（即不带单元的数字）。 总的来说，calc() 是一个强大的 CSS 工具，可以在响应式设计和复杂布局管理中提供极大的帮助。

css 设置渐变色

线性渐变：

.element {
  background: linear-gradient(direction, color-stop1, color-stop2, ...);
}

径向渐变：

.element {
  background: radial-gradient(shape size, color-stop1, color-stop2, ...);
}

重复渐变：

.gradient {
  background: repeating-linear-gradient(
    to bottom,
    blue,
    white 20px,
    white 40px
  );
}

样式隔离

1. CSS 模块（CSS Modules） CSS 模块是一种在构建时将 CSS 类名局部作用域化的技术。每个类名都是独一无二的，通常通过添加哈希值来实现。当你导入一个 CSS 模块，会得到一个包含生成的类名的对象。这样可以确保样式的唯一性，并防止样式冲突。

2. Shadow DOM Shadow DOM 是 Web 组件规范的一部分，它允许将一段不受外界影响的 DOM 附加到元素上。在 Shadow DOM 中的样式是局部的，不会影响外部的文档样式。

3. CSS-in-JS 库 CSS-in-JS 是一种技术，允许你用 JavaScript 编写 CSS，并在运行时生成唯一的类名。常见的库有 Styled-components、Emotion 等。这些库通常提供自动的样式隔离，并且还支持主题化和动态样式。

4. 使用 BEM（Block Element Modifier）命名约定 BEM 是一种 CSS 命名方法，通过使用严格的命名规则来保持样式的模块化。通过将样式绑定到特定的类名上，这种方法有助于防止样式泄露。

5. CSS Scoped 在 Vue.js 中，可以为<style>标签添加 scoped 属性，这将使用 Vue 的编译器来实现样式的作用域。虽然这不是一个标准的 Web 特性，但它在 Vue 生态系统中提供了很方便的样式隔离。

6. 使用 iframe 将组件或部分页面放在 iframe 中可以提供非常强的样式和脚本隔离。尽管如此，iframe 通常不是最佳选择，因为它们可能导致性能问题，而且使得组件间的沟通变得更加困难。

7. Web 组件 Web 组件利用了自定义元素和 Shadow DOM 来创建封装的、可复用的组件。在 Web 组件中，可以使用 Shadow DOM 实现真正的样式和脚本隔离。

8. 封装的 CSS 架构 准确使用 CSS 选择器，避免使用全局标签选择器或基础类，而是使用更具体的类选择器可以部分隔离样式。此外，可以设置严格的 CSS 命名策略，不同模块使用不同的命名前缀，以避免名称冲突。

9. PostCSS 插件 使用 PostCSS 插件来处理 CSS，可以自动添加前缀、变量等，从而实现隔离。例如，PostCSS 前缀插件可以自动为 CSS 类添加唯一的前缀。

各种方法有各自的优点和限制，选择哪种方法取决于项目的技术栈、团队的熟悉程度以及特定的项目需求。

vue 中 Scoped Styles 是如何实现样式隔离的

Scoped Styles 的工作原理： 当你为 <style> 标签添加 scoped 属性时，Vue 的加载器（比如 vue-loader）会处理你的组件文件。

vue-loader 使用 PostCSS 来处理 scoped 的 CSS。它为组件模板内的每个元素添加一个独特的属性（如 data-v-f3f3eg9）。这个属性是随机生成的，确保唯一性（是在 Vue 项目构建过程中的 hash 值）。

同时，所有的 CSS 规则都会被更新，以仅匹配带有相应属性选择器的元素。例如：如果你有一个 .button 类的样式规则，它会被转换成类似 .button[data-v-f3f3eg9] 的形式。这确保了样式只会被应用到拥有对应属性的 DOM 元素上。

css 变量声明和使用

声明 CSS 变量 CSS 变量的声明总是以 -- 开头，跟随变量名。你可以在 CSS 的任何范围内声明变量，包括 :root（相当于 HTML 的根），这样所有样式规则都可以访问到。

示例：

:root {
  --main-color: #3498db;
  --padding: 8px;
  --transition-speed: 0.3s;
}

使用 CSS 变量 在 CSS 中使用变量时，你需要使用 var() 函数，并在括号中提供变量名，可以包含在-- 前缀之后。

示例：

body {
  background-color: var(--main-color);
  padding: var(--padding);
  transition: all var(--transition-speed) ease-in-out;
}

less 函数如何用

flex 1 代表什么

在 CSS 的弹性盒模型（Flexbox）中，flex: 1 表示子项（flex 子项）的伸缩性。

具体来说，flex: 1 是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写。其默认值等同于 flex: 1 1 0%，分别代表以下含义：

• flex-grow: 1：定义项目的放大比例为 1。这意味着当弹性容器有剩余空间时，该子项将按照比例伸展以填充剩余空间。如果存在多个 flex-grow: 1 的子项，它们将等分剩余空间。
• flex-shrink: 1：定义项目的缩小比例为 1。即如果空间不足，该项目将缩小。
• flex-basis: 0%：在分配多余空间之前，计算项目是否有多余空间，这里的 0%表示不考虑项目本身的大小。 flex: 1 经常用于自适应布局。例如，将父容器的 display 设置为 flex，侧边栏大小固定后，将内容区设置为 flex: 1，内容区则会自动放大占满剩余空间。

css 实现翻牌效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .card {
        display: flex;
      }

      .flip-card {
        float: left;
        position: relative;
        height: 36vmin;
        width: calc(40vmin / 1.4);
        background-color: white;
        padding: 20px;
        border-radius: calc(40vmin / 20);
        box-shadow: 0 calc(40vmin / 40) calc(40vmin / 10) 0 rgba(0, 0, 0, 0.6);
        overflow: hidden;
        transition: transform 200ms linear, box-shadow 200ms linear,
          background-color 200ms linear;
        transform: rotateY(0deg);
      }

      .label:hover .flip-card {
        transform: rotateY(180deg);
        background-color: black;
        transition: transform 200ms linear, box-shadow 200ms linear,
          background-color 200ms linear;
      }

      .label:hover .flip-front {
        opacity: 0;
        display: none;
        transition: transform 200ms linear, box-shadow 200ms linear,
          background-color 200ms linear;
      }

      .label:hover .flip-end {
        opacity: 1;
        display: block;
        transform: rotateY(180deg);
        color: white;
        font-size: 20px;
        transition: transform 200ms linear, box-shadow 200ms linear,
          background-color 200ms linear;
      }

      .flip-front {
        width: 100%;
        height: 100%;
        opacity: 1;
        cursor: pointer;
      }

      .flip-end {
        width: 100%;
        height: 100%;
        opacity: 0;
        display: none;
        cursor: pointer;
      }

      .label {
        background-color: white;
        border-radius: calc(40vmin / 20);
      }
    </style>
  </head>
  <body>
    <div class="card">
      <div class="label">
        <div class="flip-card">
          <div class="flip-front">我是正面</div>
          <div class="flip-end">
            在上述代码中，我们创建了一个带有 card 类的容器，内部有一个
            card-inner 元素，它包含了 card-front（正面）和
            card-back（背面）两个元素。 当鼠标悬停在 card 元素上时，通过 :hover
            选择器将 card-inner 元素绕 Y 轴旋转 180 度，实现翻牌效果。
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

正面

背面

css 实现打字机效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .typewriter {
        width: 300px;
        border-right: 4px solid black;
        animation: typing 4s steps(30), blink 0.5s step-end infinite;
        white-space: nowrap;
        overflow: hidden;
      }

      @keyframes typing {
        from {
          width: 0;
        }
        to {
          width: 300px;
        }
      }

      @keyframes blink {
        50% {
          border-color: transparent;
        }
      }
    </style>
  </head>

  <body>
    <p class="typewriter">这是一个打字机效果的文本</p>
  </body>
</html>

这是一个打字机效果的演示文本

px 如何转为 rem

px（像素）转换为 rem（根元素字体大小的相对单位）需要先确定一个基准的根元素字体大小。

通常，我们将根元素（<html>）的字体大小设置为一个特定的值，比如 16px（这是常见的默认值，但您可以根据设计需求进行修改）。

假设根元素的字体大小为 16px，那么转换公式为：rem 值 = px 值 / 16 。

例如，如果有一个元素的宽度为 100px，转换为 rem 就是：100 / 16 = 6.25rem 。

在实际开发中，可以使用预处理器（如 Sass、Less）或者 JavaScript 来实现自动转换 可有什么办法让 px 自动转为 rem， 在开发中就直接使用 px

在前端开发中，要实现输入 px 但自动转换为 rem ，可以通过以下几种方式：

使用 CSS 预处理器（如 Sass、Less）

/* Sass： */
@function pxToRem($pxValue) {
  @return $pxValue / 16 + rem;
}

.element {
  width: pxToRem(100);
}
/* Less： */
.pxToRem(@pxValue) {
  @remValue: @pxValue / 16;
  @return @remValue + rem;
}

.element {
  width: pxToRem(100);
}

使用构建工具（如 Webpack）的插件

例如 postcss-pxtorem 插件，它可以在构建过程中自动将 px 转换为 rem 。您需要在配置中设置根元素的字体大小等相关参数。 自己编写脚本进行转换

可以在开发过程中使用 JavaScript 脚本来处理样式表中的 px 值，并将其转换为 rem 。但这种方式相对复杂，并且可能会影响开发效率。

盒子模型

box-sizeing: content-box 表示标准盒模型

盒子在网页中实际占用: 宽 = width + padding2 + border2 + margin2 高 = height + padding2 + border2 + margin2

盒模型实际大小: 宽 = width + padding2 + border2 高 = height + padding2 + border2

box-sizeing: border-box 表示 IE 盒模型 盒子在网页中实际占用: 宽 = width + margin2 高 = height + margin2

盒模型实际大小: 宽 = width 高 = height

内联加载样式和外联加载样式有啥区别

内联样式 定义方式：通过元素的 style 属性直接在 HTML 标签内定义 CSS 样式。 优先级：内联样式的优先级高于外联样式和嵌入样式（在<head>标签内的<style>标签中定义的样式），因为它是直接应用到元素上的。 应用场景：适合对单个元素进行样式定义，或者进行快速测试。但如果用于大量元素的样式定义，会使 HTML 文档变得非常臃肿，难以维护。 示例：

<div style="color: blue; font-size: 14px;">这是一段内联样式的文本。</div> 外联样式 定义方式：将 CSS 样式定义在一个外部的.css 文件中，然后通过<link>标签在 HTML 的<head>中引用。 优先级：一般情况下，外联样式的优先级低于内联样式。但在多个样式之间的优先级还取决于选择器的具体性、样式定义的顺序等因素。 应用场景：适合网站或应用的全局样式定义，能够实现样式的复用和统一管理，便于维护和更新。 示例：

<!--
  HTML文件中引用
  --
  > <link
  rel="stylesheet"
  href="style.css"
  /
  > /_
  style.css
  文件中定义样式
  _/
  div {
  color: red;
  font-size: 16px;
}

加载方式：内联样式直接写在 HTML 元素的 style 属性中，而外联样式则放在单独的 CSS 文件中，通过<link>标签引入。 复用性：外联样式可以被多个 HTML 页面共享，提高了样式的复用性；内联样式只作用于具体的元素，无法复用。 维护性：外联样式易于维护和更新，只需修改一个 CSS 文件即可影响引用该 CSS 文件的所有页面；内联样式则需要逐个元素修改，维护成本较高。 优先级：内联样式的优先级高于外联样式和嵌入式样式，因为它更"接近"元素。 性能影响：外联样式可利用浏览器缓存，有助于减少页面加载时间；而大量使用内联样式会增加 HTML 文档的大小，可能对性能产生不利影响。

flex 布局中子元素不压缩

.flex-container {
  display: flex;
  /* 添加其他需要的flex布局属性 */
}

.flex-item {
  flex-shrink: 0; /* 这使得该flex项目不会被压缩 */
  /* 设置宽度或其他样式 */
}

position sticky

特性

• 吸顶效果：最常见的用途之一是导航栏吸顶。当用户向下滚动页面时，导航栏到达视口顶部后就会固定在那里，直到用户向上滚动至原始位置。
• 滚动容器：sticky 元素将相对于离其最近的拥有滚动机制（例如，overflow: auto; 或 overflow: scroll;）的祖先元素进行定位。