二、CSS相关（1/2）

二、CSS相关

1 css sprite是什么,有什么优缺点

CSS Sprite（CSS精灵）是一种将多个小图片合并到一张大图中的技术。通过在页面中引用这张大图，并设置合适的background- position和尺寸，可以显示出所需的小图标或背景图案。

优点：

减少HTTP请求数：将多个小图片合并成一张大图，减少了浏览器与服务器之间的请求次数，提高了页面加载速度。
提高性能：由于减少了请求数，减少了网络传输时间和延迟，加快了页面加载速度，提升了用户体验。
减小图片大小：合并后的大图可以使用更高效的压缩算法进行压缩，减小了图片的文件大小。
方便更换风格：只需要替换或修改一张大图中的小图标或背景图案，就可以改变整个页面的样式，维护和更换风格更加方便。

缺点：

图片合并麻烦：合并图片需要手动调整和拼接小图标或背景图案，需要一定的工作量。
维护麻烦：如果需要修改其中一个小图标或背景图案，可能需要重新布局整个大图，并且需要更新相应的CSS样式。

总结：CSS Sprite通过将多个小图片合并成一张大图，减少了HTTP请求，提高了页面加载速度和性能。它的优点包括减少请求数、提高性能、减小图片大小和方便更换风格。然而，它的缺点在于图片合并和维护的麻烦。

2 `display: none;`与`visibility: hidden;`的区别

display: none;和visibility: hidden;都可以使元素不可见，但它们在实现上有一些区别。

区别：

display: none;会使元素完全从渲染树中消失，不占据任何空间，而visibility: hidden;不会使元素从渲染树中消失，仍然占据空间，只是内容不可见。
display: none;是非继承属性，子孙节点消失是因为元素本身从渲染树中消失，修改子孙节点的属性无法使其显示。而visibility: hidden;是继承属性，子孙节点消失是因为继承了hidden属性，通过设置visibility: visible;可以使子孙节点显示。
修改具有常规流的元素的display属性通常会导致文档重排（重新计算元素的位置和大小）。而修改visibility属性只会导致本元素的重绘（重新绘制元素的可见部分）。
读屏器（屏幕阅读软件）不会读取display: none;元素的内容，但会读取visibility: hidden;元素的内容。

综上所述，display: none;和visibility: hidden;虽然都可以使元素不可见，但在元素在渲染树中的位置、对子孙节点的影响、性能方面有所不同。选择使用哪种方式取决于具体的需求和场景。

3 `link`与`@import`的区别

<link>是HTML方式，@import是CSS方式。<link>标签在HTML文档的<head>部分中使用，用于引入外部CSS文件；@import是在CSS文件中使用，用于引入其他CSS文件。
<link>标签最大限度地支持并行下载，浏览器会同时下载多个外部CSS文件；而@import引入的CSS文件会导致串行下载，浏览器会按照顺序逐个下载CSS文件，这可能导致页面加载速度变慢，出现FOUC（Flash of Unstyled Content）问题。
<link>标签可以通过rel="alternate stylesheet"指定候选样式表，用户可以在浏览器中切换样式；而@import不支持rel属性，无法提供候选样式表功能。
浏览器对<link>标签的支持早于@import，一些古老的浏览器可能不支持@import方式引入CSS文件，而可以正确解析<link>标签。
@import必须出现在样式规则之前，而且只能在CSS文件的顶部引用其他文件；而<link>标签可以放置在文档的任何位置。
总体来说，<link>标签在性能、兼容性和灵活性方面优于@import。

因此，在实际使用中，推荐使用<link>标签来引入外部CSS文件。

4 什么是FOUC?如何避免

FOUC（Flash Of Unstyled Content）指的是在页面加载过程中，由于外部样式表（CSS）加载较慢或延迟，导致页面先以无样式的方式显示，然后突然闪烁出样式的现象。

为了避免FOUC，可以采取以下方法：

将样式表放置在文档的<head>标签中：通过将样式表放在文档头部，确保浏览器在渲染页面内容之前先加载和解析样式表，从而避免了页面一开始的无样式状态。
使用内联样式：将关键的样式直接写在HTML标签的style属性中，这样即使外部样式表加载延迟，页面仍然可以有基本的样式展示，避免出现完全无样式的情况。
使用样式预加载：在HTML的<head>中使用<link rel="preload">标签，将样式表提前预加载，以确保在页面渲染之前样式表已经下载完毕。
避免过多的样式表和样式文件：减少页面中使用的样式表数量和样式文件大小，优化样式表的结构和规则，从而加快样式表的加载速度。
使用媒体查询避免不必要的样式加载：通过媒体查询（@media）在适当的条件下加载特定的样式，避免在不需要的情况下加载不必要的样式。

综上所述，通过优化样式加载顺序、使用内联样式、样式预加载和合理使用媒体查询等方法，可以有效避免FOUC的出现，提供更好的用户体验。

5 如何创建块级格式化上下文(block formatting context),BFC有什么用

BFC(Block Formatting Context)，块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响

要创建一个块级格式化上下文（BFC），可以应用以下方法：

使用float属性：将元素的float属性设置为除none以外的值，可以创建一个BFC。
使用overflow属性：将元素的overflow属性设置为除visible以外的值，例如auto或hidden，可以创建一个BFC。
使用display属性：将元素的display属性设置为inline-block、table-cell、table-caption等特定的值，可以创建一个BFC。
使用position属性：将元素的position属性设置为absolute、fixed、relative或sticky，可以创建一个BFC。
使用contain属性：将元素的contain属性设置为layout，可以创建一个BFC（仅适用于部分浏览器）。

在IE下, Layout,可通过zoom:1 触发

BFC布局与普通文档流布局区别普通文档流布局:

浮动的元素是不会被父级计算高度
非浮动元素会覆盖浮动元素的位置
margin会传递给父级元素
两个相邻元素上下的margin会重叠

BFC布局规则:

浮动的元素会被父级计算高度(父级元素触发了BFC)
非浮动元素不会覆盖浮动元素的位置(非浮动元素触发了BFC)
margin不会传递给父级(父级触发BFC)
属于同一个BFC的两个相邻元素上下margin会重叠

开发中的应用

阻止margin重叠
可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个 div都位于同一个 BFC 区域之中)
自适应两栏布局
可以阻止元素被浮动元素覆盖

6 display、float、position的关系

如果display取值为none，那么position和float都不起作用，这种情况下元素不产生框
否则，如果position取值为absolute或者fixed，框就是绝对定位的，float的计算值为none，display根据下面的表格进行调整。
否则，如果float不是none，框是浮动的，display根据下表进行调整
否则，如果元素是根元素，display根据下表进行调整
其他情况下display的值为指定值
总结起来：绝对定位、浮动、根元素都需要调整display

综上所述，display、float和position之间存在一定的关系，它们的取值会相互影响元素的布局和显示方式。根据不同的取值组合，元素的display值可能会被调整。

7 清除浮动的几种方式，各自的优缺点

以下是清除浮动的几种常见方式以及它们的优缺点：

父级div 定义 height： 将父级容器的高度设置为已浮动元素的高度。优点是简单易实现，缺点是需要提前知道浮动元素的高度，如果高度发生变化，需要手动调整。
结尾处加空div 标签 clear:both： 在浮动元素后面添加一个空的 div 标签，并设置 clear:both。优点是简单易实现，缺点是需要添加多余的空标签，不符合语义化。
父级div 定义伪类 :after 和 zoom： 父级容器使用伪元素 :after 清除浮动，并设置 zoom:1 触发 hasLayout。优点是不需要额外添加多余的标签，清除浮动效果好，缺点是对老版本浏览器的兼容性需要考虑。
父级div 定义 overflow:hidden： 将父级容器的 overflow 属性设置为 hidden。优点是简单易实现，不需要添加额外的标签，缺点是可能会造成内容溢出隐藏。
父级div 也浮动，需要定义宽度： 将父级容器也设置为浮动，并定义宽度。优点是清除浮动效果好，缺点是需要定义宽度，不够灵活。
结尾处加br 标签 clear:both： 在浮动元素后面添加 br 标签，并设置 clear:both。和第2种方式类似，优缺点也相似。
使用 clearfix 类： 在父级容器上应用 clearfix 类，该类包含伪元素清除浮动。优点是代码简洁易懂，不需要额外添加标签，缺点是需要定义并引用 clearfix 类。

总体而言，使用伪类 :after 和 zoom 的方式是较为常见和推荐的清除浮动的方法，它可以避免添加多余的标签，并具有较好的兼容性。然而，不同场景下适合使用不同的清除浮动方式，需要根据实际情况选择合适的方法。

8 为什么要初始化CSS样式?

初始化 CSS 样式的目的主要有以下几点：

浏览器兼容性： 不同浏览器对于 HTML 元素的默认样式存在差异，通过初始化 CSS 样式，可以尽量消除不同浏览器之间的显示差异，使页面在各个浏览器中更加一致。
统一样式： 通过初始化 CSS 样式，可以为各个元素提供一个统一的基础样式，避免默认样式的影响。这有助于开发者在项目中构建一致的界面风格，提高开发效率。
提高可维护性： 初始化 CSS 样式可以避免在编写具体样式时受到浏览器默认样式的干扰，减少不必要的样式覆盖和调整，从而提高代码的可维护性和可读性。
优化性能： 通过初始化 CSS 样式，可以避免不必要的样式计算和渲染，减少浏览器的工作量，提升页面加载和渲染性能。

需要注意的是，在进行 CSS 样式初始化时，应该注意选择合适的方式和范围，避免过度初始化造成不必要的代码冗余和性能损耗。同时，针对具体项目和需求，可以选择使用已有的 CSS 初始化库或者自定义初始化样式。

9 css3有哪些新特性

CSS3引入了许多新特性，以下是其中一些常见的新特性：

新增选择器 ：例如:nth-child()、:first-of-type、:last-of-type等，可以根据元素在父元素中的位置进行选择。
弹性盒模型 ：通过display: flex;可以创建弹性布局，简化了元素的排列和对齐方式。
多列布局 ：使用column-count和column-width等属性可以实现将内容分为多列显示。
媒体查询 ：通过@media可以根据设备的特性和屏幕大小应用不同的样式规则。
个性化字体 ：使用@font-face可以引入自定义字体，并在网页中使用。
颜色透明度 ：通过rgba()可以设置颜色的透明度。
圆角：使用border-radius可以给元素添加圆角效果。
渐变：使用linear-gradient()可以创建线性渐变背景效果。
阴影：使用box-shadow可以为元素添加阴影效果。
倒影：使用box-reflect可以为元素添加倒影效果。
文字装饰 ：使用text-stroke-color可以设置文字描边的颜色。
文字溢出 ：使用text-overflow可以处理文字溢出的情况。
背景效果 ：使用background-size可以控制背景图片的大小。
边框效果 ：使用border-image可以为边框使用图片来创建特殊效果。
转换：使用transform可以实现元素的旋转、倾斜、位移和缩放等变换效果。
平滑过渡 ：使用transition可以为元素的属性变化添加过渡效果。
动画：通过@keyframes和animation可以创建元素的动画效果。

CSS3引入了许多新的伪类，以下是一些常见的新增伪类：

:nth-child(n)：选择父元素下的第n个子元素。
:first-child：选择父元素下的第一个子元素。
:last-child：选择父元素下的最后一个子元素。
:nth-of-type(n)：选择父元素下特定类型的第n个子元素。
:first-of-type：选择父元素下特定类型的第一个子元素。
:last-of-type：选择父元素下特定类型的最后一个子元素。
:only-child：选择父元素下仅有的一个子元素。
:only-of-type：选择父元素下特定类型的唯一一个子元素。
:empty：选择没有任何子元素或者文本内容的元素。
:target：选择当前活动的目标元素。
:enabled：选择可用的表单元素。
:disabled：选择禁用的表单元素。
:checked：选择被选中的单选框或复选框。
:focus：选择当前获取焦点的元素。
:hover：选择鼠标悬停在上方的元素。
:visited：选择已访问过的链接。
:not(selector)：选择不符合给定选择器的元素。

这些新增的伪类为选择元素提供了更多的灵活性和精确性，使得开发者能够更好地控制和样式化文档中的元素。

10 display有哪些值？说明他们的作用

display属性用于定义元素应该生成的框类型。以下是常见的display属性值及其作用：

block：将元素转换为块状元素，独占一行，可设置宽度、高度、边距等属性。
inline：将元素转换为行内元素，不独占一行，只占据内容所需的空间，无法设置宽度、高度等块级属性。
none：设置元素不可见，在渲染时将其完全隐藏，不占据任何空间。
inline-block：使元素既具有行内元素的特性（不独占一行），又具有块级元素的特性（可设置宽度、高度等属性），可以看作是行内块状元素。
list-item：将元素作为列表项显示，常用于有序列表（<ol>）和无序列表（<ul>）中，会添加列表标记。
table：将元素作为块级表格显示，常用于构建表格布局，类似于<table>元素。
inherit：规定应从父元素继承display属性的值，使元素继承父元素的框类型。

这些display属性值用于控制元素的外观和布局，通过选择适当的值可以实现不同的布局效果。

11 介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

有两种，IE盒子模型、W3C盒子模型；
盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)；
区别： IE的content部分把border和padding`计算了进去;

盒子模型构成：内容(content)、内填充(padding)、边框(border)、外边距(margin)
IE8及其以下版本浏览器，未声明 DOCTYPE，内容宽高会包含内填充和边框，称为怪异盒模型(IE盒模型)
标准(W3C)盒模型：元素宽度 = width + padding + border + margin
怪异(IE)盒模型：元素宽度 = width + margin
标准浏览器通过设置 css3 的 box-sizing: border-box 属性，触发“怪异模式”解析计算宽高

box-sizing 常用的属性有哪些？分别有什么作用

box-sizing属性用于控制元素的盒模型类型，常用的属性值有：

content-box：默认值，使用标准的W3C盒模型，元素的宽度和高度仅包括内容区域（content），不包括填充、边框和外边距。
border-box：使用怪异的IE盒模型，元素的宽度和高度包括内容区域（content）、填充（padding）和边框（border），但不包括外边距（margin）。即元素的宽度和高度指定的是内容区域加上填充和边框的总宽度和高度。
inherit：继承父元素的box-sizing属性值。

通过设置不同的box-sizing属性值，可以控制元素的盒模型类型，进而影响元素的布局和尺寸计算。使用border- box可以更方便地处理元素的宽度和高度，特别适合响应式布局和网格系统的设计。

12 CSS优先级算法如何计算？

CSS优先级是用于确定当多个样式规则应用到同一个元素时，哪个样式规则会被应用的一种规则。优先级的计算基于选择器的权重。

以下是CSS优先级计算的一般规则：

!important：样式规则使用了!important标记，具有最高优先级，无论其位置在哪里。
内联样式：直接应用在元素上的style属性具有较高的优先级。
ID选择器：使用ID选择器的样式规则具有较高的优先级。例如，#myElement。
类选择器、属性选择器和伪类选择器：使用类选择器（例如.myClass）、属性选择器（例如[type="text"]）和伪类选择器（例如:hover）的样式规则的优先级较低于ID选择器。
元素选择器和伪元素选择器：使用元素选择器（例如div）和伪元素选择器（例如::before）的样式规则的优先级较低于类选择器、属性选择器和伪类选择器。

当存在多个样式规则具有相同的优先级时，会根据以下规则进行决定：

就近原则：当同一元素上存在多个具有相同优先级的样式规则时，最后出现的样式规则将被应用。
继承：某些样式属性可以被子元素继承，如果父元素具有样式规则，子元素将继承该样式。

需要注意的是，以上规则仅适用于一般情况，有些情况下可能存在更复杂的优先级计算。同时，使用!important应该谨慎，过度使用!important可能导致样式管理困难和维护问题。

13 对BFC规范的理解？

一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型
不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响

BFC（Block Formatting Context）是CSS中的一种渲染规范，用于决定和控制元素在文档中的布局和渲染方式。BFC定义了一个独立的渲染区域，使得处于不同BFC内部的元素相互隔离，互不影响。

以下是对BFC规范的一些理解：

BFC的创建条件：触发BFC的条件包括元素的float属性不为none、position属性为absolute或fixed、display属性为inline-block、table-cell、table-caption等，以及通过特定的CSS属性（如overflow）进行触发。
BFC的特性：
- 内部的块级盒子会在垂直方向上一个接一个地放置。
- 相邻的两个块级盒子的垂直外边距会发生合并。
- BFC的区域不会与浮动元素重叠。
- BFC在页面布局时会考虑浮动元素。
- BFC可以包含浮动元素，并计算其高度。
- BFC的边界会阻止边距重叠。
BFC的应用：
- 清除浮动：创建一个父级元素成为BFC，可以清除其内部浮动的影响，避免父元素塌陷。
- 创建自适应的两栏布局：通过将两个列容器设置为BFC，可以避免它们相互影响。
- 阻止边距重叠：当两个相邻元素的边距发生重叠时，将其中一个元素设置为BFC，可以解决边距重叠问题。

总的来说，BFC规范通过创建独立的渲染上下文，使得元素的布局和渲染更加可控，避免了一些常见的布局问题和冲突。它在清除浮动、解决边距重叠等方面具有重要的应用价值。

14 谈谈浮动和清除浮动

浮动（float）是CSS中的一种布局方式，它允许元素向左或向右浮动并脱离文档的正常流，其他元素会围绕浮动元素进行布局。

浮动的特点和应用：

元素浮动后，其原位置会被其他元素填充，不再占据文档流中的空间。
浮动元素会尽可能地靠近其包含块的左侧或右侧，直到遇到另一个浮动元素或包含块的边界。
浮动元素可以通过设置float属性为left或right进行左浮动或右浮动。
常见应用包括实现多列布局、文字环绕图片等。

清除浮动（clear float）是为了解决浮动元素带来的影响和布局问题而采取的措施。

浮动元素会导致其父元素的高度塌陷（父元素无法检测到浮动元素的高度），以及其他元素可能与浮动元素重叠。为了解决这些问题，可以使用清除浮动的方法：

空元素清除浮动：在浮动元素后面添加一个空的块级元素，并设置其clear属性为both，使其在浮动元素下方换行，达到清除浮动的效果。
父级元素使用overflow属性：给包含浮动元素的父元素设置overflow属性为auto或hidden，可以触发BFC（块格式化上下文），从而包含浮动元素。
使用伪元素清除浮动：使用::after伪元素给包含浮动元素的父元素添加一个清除浮动的样式，例如设置content为空字符串、display为table等。
使用clearfix类：给包含浮动元素的父元素添加一个clearfix类，该类定义了清除浮动的样式，例如设置clearfix类的::after伪元素清除浮动。

需要注意的是，清除浮动的方法应当适用于具体的布局需求和兼容性考虑。同时，清除浮动可能会影响到其他样式的布局，因此需要综合考虑和测试。

15 position的值， relative和absolute定位原点是

position 属性用于控制元素的定位方式，常用的取值包括：

static：默认值，表示元素在文档流中正常定位，不会受到 top、right、bottom、left 属性的影响。
relative：生成相对定位的元素，相对于其正常位置进行定位，通过设置 top、right、bottom、left 属性来调整元素的位置，不会脱离文档流，周围的元素仍然会按照正常布局进行排列。
absolute：生成绝对定位的元素，相对于最近的非 static 定位的父元素进行定位，如果没有非 static 定位的父元素，则相对于文档根元素（即浏览器窗口）进行定位。绝对定位的元素会脱离文档流，不占据空间，可以通过设置 top、right、bottom、left 属性来精确控制元素的位置。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位，不会随着页面的滚动而改变位置。可以通过设置 top、right、bottom、left 属性来指定元素的位置。
inherit：规定从父元素继承 position 属性的值。

对于 relative 和 absolute 定位，其原点（坐标基准点）是元素在正常文档流中的位置。通过调整 top、right、bottom、left 属性，可以相对于原点在水平和垂直方向上进行偏移，实现元素的精确定位。

16 display:inline-block 什么时候不会显示间隙？

display: inline-block 元素在默认情况下会产生间隙，这是因为它们被视为行内元素，会保留默认的行框高度和基线对齐。然而，可以采取一些方法来消除这些间隙，使元素紧密排列，例如在携程网站中的布局。

以下是一些消除间隙的常见方法：

移除空格：在 HTML 代码中，将 inline-block 元素之间的空格删除，以消除间隙。
使用负值 margin：通过设置负值的左右外边距（margin）来抵消间隙。例如，可以使用 margin-right: -4px; 来消除间隙。
使用 font-size: 0;：将 inline-block 元素的父元素的字体大小设置为 0，然后在 inline-block 元素上重新设置所需的字体大小。这样可以消除间隙，因为元素内部没有文字导致的间隙。
使用 letter-spacing：在 inline-block 元素的父元素上设置负值的 letter-spacing，例如 letter-spacing: -4px;，可以消除间隙。
使用 word-spacing：在 inline-block 元素的父元素上设置负值的 word-spacing，例如 word-spacing: -4px;，可以消除间隙。

这些方法都是通过调整元素的布局或字体属性来实现消除间隙的效果。具体的方法选择取决于实际需求和布局要求。

17 PNG\GIF\JPG的区别及如何选

PNG, GIF, 和 JPG 是常见的图像文件格式，它们在以下方面有所区别：

GIF (Graphics Interchange Format)
- 使用 8 位像素，最多支持 256 种颜色。
- 采用无损压缩算法，不会损失图像质量。
- 支持简单的动画功能，可以创建循环播放的图像。
- 支持二进制透明和索引透明，可以实现简单的透明效果。
- 适用于图标、简单的动画和带有透明背景的图像。
JPEG (Joint Photographic Experts Group)
- 支持高达 16.7 百万种颜色，适合存储照片和复杂图像。
- 使用有损压缩算法，可以调整压缩质量以平衡图像质量和文件大小。
- 不支持透明效果，背景会被默认填充为白色。
- 适合摄影、艺术作品等需要保留高质量细节的图像。
PNG (Portable Network Graphics)
- 有两种类型：PNG-8 和真彩色 PNG。
- PNG-8 类似于 GIF，支持最多 256 种颜色，文件较小，可以实现透明效果。
- 真彩色 PNG 支持高分辨率的真彩色图像，文件较大，支持完全的 alpha 透明度。
- 不支持动画功能。
- 适合图标、背景、按钮等需要透明度的图像。

选择使用哪种图像格式取决于图像的特点和用途：

如果需要动画效果，可以选择GIF格式。
如果是照片或复杂图像，需要高质量和丰富的颜色，可以选择 JPG 格式。
如果需要透明背景或简单的透明效果，可以选择 PNG 格式，根据图像的复杂性选择 PNG-8 或真彩色 PNG。

18 行内元素float:left后是否变为块级元素？

当行内元素设置了 float: left; 后，并非直接变为块级元素，而是表现出类似行内块级元素 (inline-block) 的特性。

行内元素设置了float: left; 后会产生以下效果：

行内元素会脱离文档流，并根据设置的浮动方向向左浮动。
其宽度不再受到文本内容的限制，而是根据内容的宽度来确定。
可以设置 padding-top、padding-bottom、width、height 等属性，并产生相应的效果。
相邻的行内元素会环绕在其周围，形成类似于文本环绕的效果。

需要注意的是，设置了浮动的行内元素不会自动填充父元素的宽度，而是根据内容的宽度进行布局。如果希望行内元素具有块级元素的宽度特性，可以设置 width: 100%;

总结：行内元素设置了 float: left; 后，它的表现类似于行内块级元素，但仍然属于行内元素的性质，只是在布局和尺寸上有所改变。

19 在网页中的应该使用奇数还是偶数的字体？为什么呢？

在网页中，通常建议使用偶数字号的字体，即字号为偶数（如 12px、14px、16px 等）。这是因为偶数字号相对更容易与网页设计的其他部分构成比例关系，具有更好的视觉平衡和一致性。

以下是一些原因和考虑因素：

整数像素对齐： 偶数字号的字体大小通常是整数像素，而在网页渲染中，整数像素对齐可以提供更锐利和清晰的显示效果。当字号为奇数时，可能需要进行半像素渲染，这可能会导致字体显示模糊或模糊。
比例和对称： 使用偶数字号的字体可以更容易与其他设计元素形成比例和对称。网页设计通常依赖于一致的比例和对称性，而使用偶数字号的字体可以更好地与网页中的其他元素（如标题、段落、间距等）形成和谐的视觉关系。
浏览器兼容性： 一些浏览器对于奇数字号字体的渲染效果可能与偶数字号字体略有不同，可能会导致细微的差异。使用偶数字号字体可以减少在不同浏览器上的显示差异。

需要注意的是，这只是一些建议，并不意味着绝对规定。在实际设计中，根据具体情况和个人审美偏好，也可以使用奇数字号字体。最重要的是确保字体大小与整体设计风格和一致性相匹配。

20 ::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用

在 CSS 中，单冒号(:)和双冒号(::)有不同的含义和用途。

单冒号(:)： 单冒号用于表示伪类。伪类是用于选择元素的特定状态或动作的关键字，例如 :hover、:active、:focus 等。伪类表示元素的某种状态或行为，它们通常用于选择元素的特定状态并应用相应的样式。
双冒号(::)： 双冒号用于表示伪元素。伪元素是用于在文档中生成或插入特定内容的关键字，例如 ::before、::after、::first-line、::first-letter 等。伪元素可以创建或修改元素的一部分内容，它们允许开发人员在元素的特定位置添加样式或内容，而无需在文档中实际插入额外的 HTML 元素。

关于::before 和 ::after 伪元素的作用：

::before： ::before 伪元素用于在选中元素的内容前插入生成的内容。通过设置 content 属性和应用样式，可以在元素的开始位置插入额外的内容，这样就可以实现一些装饰性效果或添加额外的元素内容。
::after： ::after 伪元素用于在选中元素的内容后插入生成的内容。与 ::before 类似，通过设置 content 属性和应用样式，可以在元素的结束位置插入额外的内容，从而实现装饰性效果或添加其他元素内容。

这两个伪元素可以通过 CSS 属性进行定位、设置样式、添加内容等，使开发人员可以在不修改实际 HTML 结构的情况下，实现一些额外的视觉效果或功能。

21 如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60*1000ms ＝ 16.7ms
如果需要手动编写动画，建议将最小时间间隔设置为 16.7ms，即每帧动画的时间间隔。这是因为大多数显示器的默认刷新频率是 60Hz，也就是每秒刷新 60 次。在这种情况下，将动画的时间间隔设置为 16.7ms 可以确保每帧动画都能够在显示器刷新之前完成。
如果时间间隔小于 16.7ms，则会导致某些帧在显示器刷新之后才能呈现，造成不连续的动画效果，也称为"跳帧"现象。因此，将时间间隔设置为 16.7ms 是一个相对较小的值，可以保证较平滑的动画效果，并且适应大多数显示器的刷新频率。

需要注意的是，由于设备和浏览器的差异，实际的刷新频率和性能可能会有所不同。因此，在编写动画时，还应该进行实际测试和优化，确保动画在各种设备和浏览器上都能够获得良好的表现。

22 CSS合并方法

正确合并 CSS 的方法可以包括以下几点：

内联 CSS : 将 CSS 直接写在 HTML 文件的 <style> 标签中或者通过 style 属性添加到具体元素中。这样可以减少 HTTP 请求并提高页面加载速度，但可维护性较差。
CSS 预处理器 : 使用 CSS 预处理器如 Sass、Less 或 Stylus，它们提供了更灵活和可维护的方式来编写 CSS，并且可以将多个 CSS 文件合并为一个。
合并工具 : 使用构建工具如 Grunt、Gulp 或 Webpack，通过配置任务来合并 CSS 文件。这些工具提供了任务运行、文件合并、压缩等功能，可以自动化合并 CSS，并在开发过程中或上线前进行处理。
HTTP 请求合并 : 如果使用多个 CSS 文件，可以通过服务器端配置将它们合并成一个文件，并通过单个 HTTP 请求加载。这样可以减少请求的数量，提高页面加载速度。
压缩 : 对合并后的 CSS 文件进行压缩，去除空格、注释等无关字符，以减小文件大小，提高加载速度。

需要根据具体的项目和需求选择适合的合并方法，以提高页面性能和开发效率。

23 CSS不同选择器的权重(CSS层叠的规则)

CSS选择器的权重规则可以总结如下：

!important规则：具有最高的优先级，优先级为最大。
行内样式：通过 style 属性直接定义的样式具有较高的权重，优先级为 1000。
ID 选择器：每个 ID 选择器的权重为 100。
类选择器、属性选择器和伪类选择器：每个类选择器、属性选择器或伪类选择器的权重为 10。
元素选择器：每个元素选择器的权重为 1。

当应用多个选择器到同一个元素时，根据上述规则计算各个选择器的权重，具有较高权重的样式将被应用。如果存在权重相同的情况，则根据样式规则的先后顺序来决定哪个样式生效，后声明的样式会覆盖先声明的样式。

下面是一个权重计算的示例：

    /* 权重为 1 */
    div {
    }
    
    /* 权重为 10 */
    .class1 {
    }
    
    /* 权重为 100 */
    #id1 {
    }
    
    /* 权重为 101 (100 + 1) */
    #id1 div {
    }
    
    /* 权重为 11 (10 + 1) */
    .class1 div {
    }
    
    /* 权重为 21 (10 + 10 + 1) */
    .class1 .class2 div {
    }

根据权重的计算规则，选择器的权重越高，其样式优先级越高，将更有可能应用到对应的元素上。

24 列出你所知道可以改变页面布局的属性

以下是一些可以改变页面布局的常用属性：

position：控制元素的定位方式，如static、relative、absolute、fixed等。
display：指定元素的显示方式，如block、inline、inline-block、flex、grid等。
float：使元素浮动到指定的位置，常用于创建多列布局。
width和height：控制元素的宽度和高度。
margin和padding：调整元素的外边距和内边距。
top、left、right和bottom：设置元素相对于其定位父元素的偏移位置。
z-index：控制元素的层叠顺序。
overflow：控制元素内容溢出时的处理方式。
box-sizing：指定元素的盒模型类型，如content-box和border-box。
flexbox和grid：强大的布局模型，用于创建复杂的网格布局和灵活的盒模型布局。

这些属性可以结合使用，通过调整它们的值和组合，可以实现各种不同的页面布局和排列方式。

25 CSS在性能优化方面的实践

在性能优化方面，以下是一些CSS的实践方法：

压缩和合并CSS：使用CSS压缩工具将CSS文件压缩，并将多个CSS文件合并为一个文件，减少网络请求次数和文件大小。
使用Gzip压缩：配置服务器开启Gzip压缩，可以减小CSS文件的大小，加快文件传输速度。
将CSS文件放在<head>标签中：将CSS文件的引用放在HTML文档的<head>标签中，以便在页面渲染前加载CSS样式。
避免使用@import：避免在CSS中使用@import导入其他CSS文件，因为@import会增加额外的请求延迟，推荐使用<link>标签引入CSS文件。
使用缩写属性：尽量使用CSS的缩写属性，如margin、padding、font等，可以减少CSS文件的大小。
避免使用滤镜：某些CSS滤镜效果会导致性能下降，特别是在大型页面中使用，尽量避免滤镜的使用。
合理使用选择器：选择器的复杂性会影响CSS选择器的匹配速度，尽量避免使用过于复杂的选择器，减少选择器的层级和嵌套。
避免使用CSS表达式：CSS表达式会在每次页面重绘时重新计算，影响性能，尽量避免使用。
使用缓存：通过设置适当的HTTP响应头，将CSS文件缓存到浏览器中，减少重复请求。
使用媒体查询：针对不同设备和屏幕尺寸，使用媒体查询来加载不同的CSS样式，提高响应性能。

这些实践方法可以帮助优化CSS在网页加载和渲染过程中的性能，减少加载时间，提升用户体验。

26 CSS3动画（简单动画的实现，如旋转等）

依靠CSS3中提出的三个属性：transition、transform、animation
transition：定义了元素在变化过程中是怎么样的，包含transition-property、transition-duration、transition-timing-function、transition-delay。
transform：定义元素的变化结果，包含rotate、scale、skew、translate。
animation：动画定义了动作的每一帧（@keyframes）有什么效果，包括animation-name，animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction

以下是一个使用CSS3动画实现旋转的示例：

    /* 定义动画关键帧 */
    @keyframes rotate {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    
    /* 应用动画到元素 */
    .element {
      animation-name: rotate; /* 指定动画名称 */
      animation-duration: 3s; /* 动画持续时间 */
      animation-timing-function: linear; /* 动画速度曲线 */
      animation-delay: 0s; /* 动画延迟时间 */
      animation-iteration-count: infinite; /* 动画重复次数，这里设置为无限循环 */
      animation-direction: normal; /* 动画播放方向 */
    }

27 base64的原理及优缺点

Base64是一种将二进制数据编码为ASCII字符的方法，通过将二进制数据转换为由64个字符组成的可打印字符序列，实现二进制数据的传输和存储。

Base64编码的原理如下：

将待编码的数据按照每3个字节一组进行分组。
将每组3个字节转换为4个6位的Base64字符。
如果最后一组不足3个字节，根据需要进行填充。
将转换后的Base64字符拼接在一起，形成最终的Base64编码结果。

优点：

可以将二进制数据转换为文本数据，方便在文本环境中传输和存储。
减少了HTTP请求，可以将小的图片或其他资源直接嵌入到HTML、CSS或JavaScript代码中，减少了对服务器的请求次数。

缺点：

Base64编码会使数据的大小增加，因为每3个字节的原始数据会转换为4个字节的Base64编码数据。
Base64编码是一种可逆的编码方法，虽然可以加密数据，但并不提供真正的安全性。
编码和解码过程涉及到字符转换和处理，消耗了一定的CPU资源。

总的来说，Base64编码适用于在文本环境中传输和存储二进制数据，并且可以减少HTTP请求。但在需要考虑数据大小和性能的情况下，需要权衡使用Base64编码的优缺点。

28 几种常见的CSS布局

流体布局

    	.left {
    		float: left;
    		width: 100px;
    		height: 200px;
    		background: red;
    	}
    	.right {
    		float: right;
    		width: 200px;
    		height: 200px;
    		background: blue;
    	}
    	.main {
    		margin-left: 120px;
    		margin-right: 220px;
    		height: 200px;
    		background: green;
    	}

    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"></div>
    </div>

上述代码实现了一个基本的流体布局，其中左侧(.left)和右侧(.right)是固定宽度和高度的浮动元素，中间部分(.main)是流动的内容区域。

.left和.right都使用了浮动(float)属性，分别向左和向右浮动，使它们脱离正常的文档流并排在一起。
.left的宽度为100px，高度为200px，背景颜色为红色。
.right的宽度为200px，高度为200px，背景颜色为蓝色。
.main使用了左右的外边距(margin-left和margin-right)，使其在左右两侧留出空白区域，与左侧和右侧元素不重叠。
.main的高度为200px，背景颜色为绿色。

这样设置后，左侧和右侧的浮动元素会占据固定的宽度和高度，并排在一起。中间的内容区域会流动到浮动元素的下方，填充剩余的空间。这样就实现了一个基本的流体布局，可以根据容器的大小自动适应屏幕或容器的宽度。

需要注意的是，浮动元素可能会导致父容器的高度塌陷，可以通过在父容器上添加清除浮动的样式来解决这个问题，例如在容器上添加clearfix类：

    .container::after {
      content: "";
      display: table;
      clear: both;
    }

以上是一个简单的流体布局的示例，实际应用中可能会结合其他CSS属性和技巧来实现更复杂的布局效果。

圣杯布局

要求：三列布局；中间主体内容前置，且宽度自适应；两边内容定宽
好处：重要的内容放在文档流前面可以优先渲染
原理：利用相对定位、浮动、负边距布局，而不添加额外标签

      .container {
          padding-left: 150px;
          padding-right: 190px;
      }
      .main {
          float: left;
          width: 100%;
      }
      .left {
          float: left;
          width: 190px;
          margin-left: -100%;
          position: relative;
          left: -150px;
      }
      .right {
          float: left;
          width: 190px;
          margin-left: -190px;
          position: relative;
          right: -190px;
      }

    <div class="container">
    	<div class="main"></div>
    	<div class="left"></div>
    	<div class="right"></div>
    </div>

上述代码实现了一个圣杯布局，具有三列布局，其中中间的主体内容前置且宽度自适应，两侧内容具有固定宽度。

.container是包含整个布局的容器，通过设置左右内边距来给中间主体内容留出空间。
.main是中间的主体内容区域，使用浮动(float: left;)和宽度为100%(width: 100%;)来使其占据剩余的宽度，并自适应容器的宽度。
.left是左侧内容区域，使用相对定位(position: relative;)和负边距(margin-left: -100%;)来将其向左偏移，并利用相对定位的left属性(left: -150px;)将其定位到容器的左侧。
.right是右侧内容区域，同样使用相对定位和负边距来将其向左偏移，并利用相对定位的right属性(right: -190px;)将其定位到容器的右侧。

这样设置后，左侧和右侧的内容区域会以负偏移的方式覆盖在主体内容区域上方，而主体内容区域则会自适应剩余的宽度。这样就实现了一个圣杯布局，能够将重要的内容放在文档流的前面，优先渲染。

需要注意的是，由于使用了负边距和相对定位，可能会导致布局上的一些特殊情况和问题，需要在具体应用中进行测试和调整。

以上是一个简单的圣杯布局的示例，通过相对定位、浮动和负边距等CSS属性和技巧，实现了一个具有三列布局、自适应宽度和前置主体内容的布局效果。

双飞翼布局

双飞翼布局：对圣杯布局（使用相对定位，对以后布局有局限性）的改进，消除相对定位布局
原理：主体元素上设置左右边距，预留两翼位置。左右两栏使用浮动和负边距归位，消除相对定位。

    .container {
        /*padding-left:150px;*/
        /*padding-right:190px;*/
    }
    .main-wrap {
        width: 100%;
        float: left;
    }
    .main {
        margin-left: 150px;
        margin-right: 190px;
    }
    .left {
        float: left;
        width: 150px;
        margin-left: -100%;
        /*position: relative;*/
        /*left:-150px;*/
    }
    .right {
        float: left;
        width: 190px;
        margin-left: -190px;
        /*position:relative;*/
        /*right:-190px;*/
    }

    <div class="content">
        <div class="main"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>

上述代码实现了一个双飞翼布局，与圣杯布局相比，双飞翼布局消除了相对定位，使布局更加简洁。

.container是包含整个布局的容器，可以设置其左右内边距来给中间主体内容留出空间。在双飞翼布局中，我们可以选择是否为容器设置内边距，取决于具体的设计需求。
.main-wrap是一个包裹着主体内容的容器，设置宽度为100%和浮动，使其占据一行并自适应宽度。
.main是中间的主体内容区域，设置左右外边距来预留出左右两翼的位置，使其不会被左右两边的内容覆盖。
.left是左侧内容区域，使用浮动和负边距(margin-left: -100%;)将其向左偏移，使其脱离文档流并覆盖在主体内容的左侧。
.right是右侧内容区域，同样使用浮动和负边距(margin-left: -190px;)将其向左偏移，使其脱离文档流并覆盖在主体内容的右侧。

这样设置后，左侧和右侧的内容区域会以浮动和负偏移的方式覆盖在主体内容区域的两侧，而主体内容区域则会自适应剩余的宽度。双飞翼布局相较于圣杯布局，去除了相对定位，使布局结构更加简洁。

需要注意的是，双飞翼布局同样可能出现一些特殊情况和问题，如内容溢出、高度不平等等，需要在具体应用中进行测试和调整。

29 stylus/sass/less区别

Sass, Less, 和 Stylus 是三种常用的 CSS 预处理器，它们在功能和语法上有一些区别：

语法差异 ：Sass 使用类似 Ruby 的缩进语法，而 Less 和 Stylus 使用类似 CSS 的语法。Sass 使用严格的缩进表示层次与嵌套关系，而 Less 和 Stylus 可以使用大括号 {} 表示层次和嵌套关系。
变量：Sass、Less 和 Stylus 都支持变量，用于存储和复用值。在 Sass 和 Less 中，变量以 $ 符号开头，而在 Stylus 中，变量以 $ 或者 @ 符号开头。
混合：混合（Mixins）允许将一组 CSS 规则集合存储为一个可重用的样式块。Sass 和 Less 使用 @mixin 定义混合，而 Stylus 使用 mixin 关键字定义混合。
嵌套：Sass、Less 和 Stylus 都支持嵌套规则，可以在父级规则内部定义子级规则。Sass 使用缩进表示嵌套关系，Less 和 Stylus 使用大括号 {} 表示嵌套关系。
继承：继承（Inheritance）允许一个选择器继承另一个选择器的样式。在 Sass 中，使用 @extend 实现继承，而在 Less 和 Stylus 中，使用 & 符号实现继承。
颜色混合 ：颜色混合（Color blending）允许将两个颜色混合生成一个新的颜色。Sass 使用 mix() 函数实现颜色混合，Less 使用 blend() 函数，而 Stylus 使用 mix() 函数。
环境和工具支持 ：Sass 是基于 Ruby 的，需要安装 Ruby 环境来编译，而 Less 和 Stylus 可以通过 Node.js 的 NPM 安装相应的库来编译。

总的来说，Sass、Less 和 Stylus 在功能上大致相似，它们都提供了类似的特性，如变量、混合、嵌套、继承等，但在语法和一些细节上有一些差异。选择哪种预处理器取决于个人偏好、团队需求和项目要求。

30 postcss的作用

可以直观的理解为：它就是一个平台。为什么说它是一个平台呢？因为我们直接用它，感觉不能干什么事情，但是如果让一些插件在它上面跑，那么将会很强大
PostCSS 提供了一个解析器，它能够将 CSS 解析成抽象语法树
通过在 PostCSS 这个平台上，我们能够开发一些插件，来处理我们的CSS，比如热门的：autoprefixer
postcss可以对sass处理过后的css再处理最常见的就是autoprefixer

PostCSS 是一个用于转换 CSS 的工具，它提供了一个插件化的架构，可以通过加载各种插件来处理 CSS。主要作用包括：

转换 CSS ：PostCSS 可以将 CSS 解析成抽象语法树（AST），并允许开发者编写插件来修改和转换 CSS。这使得开发者可以自定义和扩展 CSS 的功能，从而提供更灵活的编写样式的能力。
自动添加浏览器前缀 ：PostCSS 的插件生态系统中最常用的插件之一是 autoprefixer。它可以根据配置和浏览器兼容性自动为样式属性添加浏览器前缀，以确保在不同浏览器中正确显示样式。
代码优化和压缩 ：PostCSS 的插件可以用于优化和压缩 CSS 代码，删除不必要的空格、注释、重复规则等，以减小文件大小并提高加载速度。
使用未来的 CSS 语法 ：PostCSS 可以支持使用未来的 CSS 语法和功能，例如使用 CSS Variables、CSS Modules、CSS Grid 等。通过一些插件，可以在现有浏览器中使用这些新特性，而无需等待浏览器的更新。

总之，PostCSS 提供了一个灵活的平台和插件生态系统，可以对 CSS 进行各种转换和优化，使开发者能够更好地编写和管理样式代码，并兼容不同的浏览器和未来的 CSS 标准。

31 css样式（选择器）的优先级

CSS 样式的优先级可以根据以下规则进行计算：

内联样式 （Inline Styles）具有最高的优先级。通过在 HTML 元素的 style 属性中直接定义的样式将覆盖其他样式规则。
权重（Specificity）是确定样式优先级的重要因素。每个选择器都有一个权重，权重由选择器的组成部分决定，通常根据选择器的类型、类、ID 和内联样式等进行计算。选择器的权重值越高，其样式优先级越高。
重要性 （Importance）可以通过 !important 关键字来设置。使用 !important 的样式具有最高的优先级，将覆盖任何其他样式规则。然而，滥用 !important 可能导致样式管理的困难，应该慎用。
层叠顺序 （Cascade Order）也会影响样式的优先级。当存在多个具有相同权重和重要性的样式规则时，后写的样式规则将覆盖先写的样式规则。

综上所述，通过计算选择器的权重、考虑重要性以及根据样式规则的层叠顺序，可以确定 CSS 样式的优先级，并最终确定应用在元素上的样式。

小结

计算权重确定
!important
内联样式
后写的优先级高

32 自定义字体的使用场景

自定义字体可以在以下场景中使用：

宣传和品牌 ：使用自定义字体可以增加品牌的独特性和识别度。品牌标语、宣传资料、广告等场合可以使用自定义字体来传达品牌的风格和形象。
Banner 设计 ：在网站或移动应用的横幅广告（Banner）设计中，自定义字体可以使文字内容更加吸引人，与整体设计风格相匹配，并帮助吸引用户的注意力。
固定文案 ：如果有一些特定的文案需要在网站或应用中固定展示，如标题、标语、特殊提示等，使用自定义字体可以使这些文案与其他普通文本区分开来，突出其重要性或特殊性。
字体图标 ：自定义字体可以用于创建字体图标集合，如使用字体图标库（如Font Awesome）来代替传统的图标文件。这样可以提供灵活性和可扩展性，通过CSS样式来控制图标的颜色、大小和样式，而无需使用单独的图像文件。

总之，自定义字体在需要强调品牌形象、设计吸引人的文案或创建字体图标集合等场景中非常有用。它们为设计师和开发人员提供了更多的创意和自定义选项，以满足特定的设计需求。

33 如何美化CheckBox

<label> 属性 for 和 id
隐藏原生的 <input>
:checked + <label>

要美化复选框（CheckBox），可以按照以下步骤进行操作：

使用 <label> 标签和关联的 <input> 元素：将复选框包裹在 <label> 标签中，并使用 for 属性与对应的 <input> 元素的 id 进行关联，确保点击标签时也可以触发复选框的选择状态。

    <label for="myCheckbox">Checkbox Label</label>
    <input type="checkbox" id="myCheckbox">

隐藏原生的 <input> 元素：使用 CSS 样式将原生的 <input> 元素隐藏起来，使其不可见。

    input[type="checkbox"] {
      display: none;
    }

使用 CSS 样式美化复选框：利用 CSS 样式为复选框创建自定义的外观效果。

    input[type="checkbox"] + label {
      /* 定义复选框的样式 */
    }
    
    input[type="checkbox"]:checked + label {
      /* 定义选中时复选框的样式 */
    }

在上述样式中，:checked 选择器用于选中状态下的样式，+ 选择器用于选择紧接在 <input> 元素后的兄弟 <label> 元素。

通过调整这些样式，您可以改变复选框的外观，如更改背景颜色、添加边框、改变图标等。可以使用 CSS 属性如 background- color、border、color、content 等来设置样式。

例如，以下示例将复选框的背景颜色设置为蓝色，并在选中时添加一个打勾的图标：

    input[type="checkbox"] + label {
      display: inline-block;
      padding-left: 25px;
      position: relative;
      cursor: pointer;
    }
    
    input[type="checkbox"] + label:before {
      content: "";
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 2px solid #999;
      border-radius: 3px;
      margin-right: 10px;
      position: absolute;
      left: 0;
      top: 2px;
    }
    
    input[type="checkbox"]:checked + label:before {
      background-color: blue;
      border-color: blue;
      content: "\2713";
      text-align: center;
      font-size: 14px;
      line-height: 16px;
      color: #fff;
    }

通过使用类似上述的 CSS 样式，您可以根据需要定制复选框的外观和样式，以实现美化效果。

34 伪类和伪元素的区别

伪类表状态
伪元素是真的有元素
前者单冒号，后者双冒号

以下是对伪类和伪元素的更详细解释：

伪类（Pseudo-classes）是用于选择元素的特定状态或条件的关键词。它们以单冒号（:）作为前缀，并应用于选择器的末尾。伪类选择器可以选择处于特定状态的元素，例如鼠标悬停、被点击、被选中等。常见的伪类包括 :hover、:active、:visited、:nth-child 等。
伪元素（Pseudo-elements）则是用于在文档中创建虚拟的元素，这些元素可以在选中的元素中添加额外的样式和内容。伪元素以双冒号（::）作为前缀，并应用于选择器的末尾。伪元素可以在选中的元素中插入新的内容或样式，如在元素前、后插入内容或改变选中元素的某个部分的样式。常见的伪元素包括 ::before、::after、::first-line、::first-letter 等。

总结来说，伪类用于选择特定状态的元素，而伪元素则用于在选中的元素中创建虚拟的元素。伪类以单冒号（:）作为前缀，伪元素以双冒号（::）作为前缀。在实际使用中，由于历史原因，有些伪元素也可以使用单冒号（:）来表示，但为了遵循最新的规范，推荐使用双冒号（::）表示伪元素。

35 `base64`的使用

用于减少 HTTP 请求
适用于小图片
base64的体积约为原图的3/4

base64 是一种将二进制数据编码为 ASCII 字符串的方法，它常被用于将小文件（如图片、字体文件等）嵌入到 HTML、CSS 或 JavaScript 中，从而减少对服务器的请求次数。

使用 base64 编码可以将二进制文件转换为文本字符串，这样可以直接将字符串嵌入到代码中，而无需单独请求文件。这样做的好处是可以减少 HTTP 请求的数量，提升页面加载速度，尤其适用于小图片或者一些图标字体等。

然而，使用 base64 编码也有一些注意事项。由于 base64 编码后的文本字符串比原始二进制数据体积大约增加了 1/3，因此对于大文件来说，使用 base64 会导致数据传输量增加，可能会影响网页的加载速度。此外，由于嵌入了文件内容，导致代码体积增大，也会对可维护性产生一定的影响。

因此，通常建议将 base64 使用在小文件上，如小图标、小图片等，而对于大文件，仍然应该以原始文件的形式进行请求和传输，以获得更好的性能和可维护性。

36 自适应布局

思路：

左侧浮动或者绝对定位，然后右侧margin撑开
使用<div>包含，然后靠负margin形成bfc
使用flex

自适应布局是指能够根据不同设备或窗口尺寸自动调整布局的一种设计方式。下面是几种常见的自适应布局方法：

使用浮动或绝对定位：左侧元素使用浮动或绝对定位，右侧元素通过设置左侧元素的margin来撑开布局。这种方法需要手动计算和设置宽度和间距，适用于简单的布局需求。

    .left {
      float: left;
      width: 200px;
    }
    
    .right {
      margin-left: 220px;
    }

使用包含元素和负边距：将左右两个元素放在一个容器内，设置容器的overflow属性为hidden，然后通过负边距将左侧元素向左移动，右侧元素则会自动占据剩余空间。这种方法需要使用负边距，适用于复杂布局需求。

    .container {
      overflow: hidden;
    }
    
    .left {
      float: left;
      width: 200px;
      margin-left: -100%;
    }
    
    .right {
      float: left;
    }

使用 Flexbox 布局：使用 Flexbox 弹性布局可以轻松实现自适应布局。通过设置容器的display属性为flex，并使用flex-grow属性来控制元素的伸缩性，可以自动调整元素的宽度和布局。

    .container {
      display: flex;
    }
    
    .left {
      flex-grow: 0;
      flex-shrink: 0;
      width: 200px;
    }
    
    .right {
      flex-grow: 1;
    }

以上是一些常见的自适应布局方法，根据具体的需求和场景，可以选择合适的方法来实现自适应布局。

37 请用CSS写一个简单的幻灯片效果页面

知道是要用CSS3。使用animation动画实现一个简单的幻灯片效果

    /**css**/
    .ani{
      width:480px;
      height:320px;
      margin:50px auto;
      overflow: hidden;
      box-shadow:0 0 5px rgba(0,0,0,1);
      background-size: cover;
      background-position: center;
      -webkit-animation-name: "loops";
      -webkit-animation-duration: 20s;
      -webkit-animation-iteration-count: infinite;
    }
    @-webkit-keyframes "loops" {
        0% {
            background:url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg) no-repeat;             
        }
        25% {
            background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) no-repeat;
        }
        50% {
            background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) no-repeat;
        }
        75% {
            background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) no-repeat;
        }
        100% {
            background:url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) no-repeat;
        }
    }

38 什么是外边距重叠？重叠的结果是什么？

外边距重叠就是margin-collapse

在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

折叠结果遵循下列计算规则 ：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。

下面是详细分析

外边距重叠（margin collapse）指的是在某些情况下，相邻的两个元素之间的外边距会发生合并，并且取两者之间的较大值作为最终的外边距值。外边距重叠主要发生在垂直方向上，而水平方向上的外边距不会发生重叠。

外边距重叠的结果是两个相邻元素的外边距被合并成一个单独的外边距，这可能会导致布局上的一些意外效果，比如元素之间的间距变得比预期的要大。

下面是一些常见情况下外边距重叠的例子：

相邻的兄弟元素的外边距重叠：

    <div class="box"></div>
    <div class="box"></div>

    .box {
      margin-top: 20px;
      margin-bottom: 30px;
    }

在这个例子中，两个相邻的兄弟元素之间的上下外边距会发生重叠，最终的外边距值为30px，而不是预期的50px。

父元素与第一个/最后一个子元素的外边距重叠：

    <div class="parent">
      <div class="child"></div>
    </div>

    .parent {
      margin-bottom: 20px;
    }
    
    .child {
      margin-top: 30px;
    }

在这个例子中，父元素的下外边距和子元素的上外边距发生重叠，最终的外边距值为30px，而不是预期的50px。

了解外边距重叠的规则可以帮助我们更好地控制元素的布局，避免意外的外边距重叠效果。在需要避免外边距重叠的情况下，可以使用一些方法，如使用内边距（padding）或边框（border）来隔离外边距、使用浮动（float）或绝对定位（position）等。

39 rgba()和opacity的透明效果有什么不同？

rgba() 是一种CSS颜色值表示方法，可以在其中指定红、绿、蓝三个通道的颜色值以及透明度。通过调整透明度值来实现元素的透明效果，仅影响元素的颜色或背景色，不影响元素内的其他内容的透明度。

    .element {
      background-color: rgba(255, 0, 0, 0.5); /* 半透明红色背景 */
    }

opacity 是CSS属性，用于设置元素的整体透明度。它会影响元素以及元素内的所有内容的透明度，包括文本、图像等。设置元素的透明度会影响整个元素及其内容的可见性。

    .element {
      opacity: 0.5; /* 元素及其内容半透明 */
    }

需要注意的是，opacity 的值是一个0到1之间的数字，0表示完全透明，1表示完全不透明。而 rgba() 中的透明度值是一个介于0到1之间的数字，0表示完全透明，1表示完全不透明。

另外，需要注意的是，opacity 的透明度是继承的，子元素会继承父元素的透明度效果，而 rgba() 设置的透明度不会继承给子元素。

综上所述，rgba() 和 opacity 在实现透明效果上有一些不同，需要根据具体的需求和效果来选择使用哪种方式。

小结

rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，
而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

40 css中可以让文字在垂直和水平方向上重叠的两个属性是什么？

垂直方向：line-height
水平方向：letter-spacing

在CSS中，可以使用以下两个属性实现文字在垂直和水平方向上的重叠：

垂直方向：line-height
- 通过设置 line-height 属性，可以控制行高，从而实现文字在垂直方向上的重叠。将 line-height 的值设置为大于文字大小的值，可以使文字垂直居中或与其他文字重叠。

        .text {
      line-height: 1.5; /* 行高为文字大小的1.5倍 */
    }

水平方向：letter-spacing
- 通过设置 letter-spacing 属性，可以控制字符之间的间距，从而实现文字在水平方向上的重叠。将 letter-spacing 的值设置为负数，可以让字符紧密排列，产生重叠效果。

        .text {
      letter-spacing: -2px; /* 字符间距为负数，产生重叠效果 */
    }

这两个属性可以根据具体的需求来调整，实现文字的垂直和水平方向上的重叠效果。

41 如何垂直居中一个浮动元素？

垂直居中一个浮动元素可以使用以下两种方法：

方法一（已知元素的高宽）：

    #div1 {
      background-color: #6699FF;
      width: 200px;
      height: 200px;
      position: absolute; /* 父元素需要相对定位 */
      top: 50%;
      left: 50%;
      margin-top: -100px; /* 二分之一的height */
      margin-left: -100px; /* 二分之一的width */
    }

方法二：

    #div1 {
      width: 200px;
      height: 200px;
      background-color: #6699FF;
      margin: auto;
      position: absolute; /* 父元素需要相对定位 */
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
    }

对于垂直居中一个 <img>，可以使用更简便的方法：

    #container {
      display: flex;
      justify-content: center;
      align-items: center;
    }

上述代码将 <img> 元素放置在一个容器中（#container），通过使用 Flex 布局的 justify-content: center; 和 align-items: center; 属性，实现了图片在容器中的垂直居中效果。

42 px和em的区别

px和em是两种不同的长度单位，它们的区别如下：

px（像素）是一个绝对单位，表示固定的像素大小。无论父元素的字体大小如何，px的值都不会改变，它是一个固定的长度单位。
em（倍数）是一个相对单位，它相对于父元素的字体大小来确定自身的大小。如果没有设置字体大小，则1em等于浏览器默认的字体大小（通常是16px）。如果父元素的字体大小是16px，那么1em就等于16px，2em就等于32px，以此类推。

由于em是相对单位，它具有一定的灵活性和可扩展性。当需要调整整个页面的字体大小时，只需更改根元素的字体大小，其他使用em作为单位的元素会自动按比例调整大小，从而实现页面的整体缩放效果。

相对于px来说，em更适用于实现弹性布局、响应式设计以及根据用户偏好进行字体大小调整等场景。

小结

px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

px 相对于显示器屏幕分辨率，无法用浏览器字体放大功能
em 值并不是固定的，会继承父级的字体大小： em = 像素值 / 父级font-size

43 Sass、LESS是什么？大家为什么要使用他们？

他们是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。
例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算，函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)

以下是为什么人们选择使用Sass和Less的一些原因：

变量和计算 ：Sass和Less都支持变量，可以定义和重用各种值，如颜色、字体、边距等。它们还允许进行数学计算，简化了样式表的编写和维护。
嵌套规则 ：Sass和Less允许在样式规则中嵌套其他规则，提高了样式表的可读性和可维护性。通过嵌套，可以更清晰地表示元素的层次结构，减少了样式选择器的重复。
混合（Mixins） ：混合是一种可以在多个选择器中重复使用的样式块。通过定义和调用混合，可以避免样式的重复编写，并且使样式表更加模块化和可复用。
继承：继承允许一个选择器继承另一个选择器的样式规则，减少了样式的冗余。当多个选择器具有相同的样式时，可以通过继承来避免重复编写样式。
模块化和导入 ：Sass和Less支持将样式表拆分为多个模块，并通过导入机制进行组合。这使得样式表的组织和管理更加灵活和可扩展。
自定义函数 ：Sass和Less都允许定义自定义函数，可以用于处理样式值，进行复杂的计算和操作。
强大的工具和生态系统 ：Sass和Less都有丰富的工具和插件生态系统，提供了许多辅助工具、编译器和构建工具，如预处理器编译器、自动刷新、自动前缀添加等，极大地提升了前端开发的效率。

总而言之，Sass和Less使得CSS的编写更加简洁、模块化和可维护，提供了一些高级功能和工具，使前端开发更加高效和灵活。

44 知道css有个content属性吗？有什么作用？有什么应用？

css的content属性专门应用在 before/after伪元素上，用于来插入生成内容。最常见的应用是利用伪类清除浮动。

    /**一种常见利用伪类清除浮动的代码**/
    .clearfix:after {
        content:".";       //这里利用到了content属性
        display:block;
        height:0;
        visibility:hidden;
        clear:both; 
     }
    .clearfix {
        *zoom:1;
    }

content属性主要用于在::before和::after伪元素中插入生成的内容。它通常与伪元素一起使用，以在文档中插入额外的内容或修饰样式。
content属性可以接受多种类型的值，包括文本字符串、URL、计数器、计数器符号和引用标签等。通过设置不同的content值，可以实现一些常见的效果，例如：

插入文本内容 ：可以在伪元素中使用content属性插入自定义的文本内容，用于装饰样式或添加额外的标识。
插入图标和符号 ：通过设置content属性为某个图标字体或Unicode编码，可以在伪元素中插入图标和特殊符号。
计数器 ：结合使用content属性和counter函数，可以在伪元素中显示自动生成的计数器，用于标记序号或计数。
引用标签 ：通过设置content属性为attr()函数，可以在伪元素中引用元素的属性值，用于显示元素的属性内容。

上述代码示例中，通过设置content属性为一个点字符.，在::after伪元素中插入一个看不见的点，配合其他样式属性实现了清除浮动的效果。这是一种常见的清除浮动的技巧之一。

需要注意的是，content属性只对::before和::after伪元素起作用，对于其他元素并没有效果。此外，content属性必须与display属性一起使用，通常为block或inline- block，以确保生成的内容具有正确的布局。

45 水平居中的方法

元素为行内元素，设置父元素text-align:center
如果元素宽度固定，可以设置左右margin为auto;
绝对定位和移动: absolute + transform
使用flex-box布局，指定justify-content属性为center
display设置为tabel-cell

下面进行详细说明：

文本居中 ：如果元素为行内元素，可以将父元素的text-align属性设置为center，这样子元素就会水平居中对齐。

    .parent {
      text-align: center;
    }

固定宽度的居中 ：如果元素宽度已知并固定，可以通过将左右margin设置为auto来实现水平居中。

    .element {
      margin-left: auto;
      margin-right: auto;
    }

绝对定位和移动 ：可以使用绝对定位和transform来实现水平居中。首先将元素的左边距和右边距都设置为auto，然后使用transform属性将元素向左平移50%。

    .element {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

Flexbox布局 ：使用display: flex将父元素设置为弹性容器，然后使用justify-content属性将子元素水平居中。

    .parent {
      display: flex;
      justify-content: center;
    }

表格布局 ：将父元素的display属性设置为table-cell，并将text-align属性设置为center。

    .parent {
      display: table-cell;
      text-align: center;
    }

这些方法可以根据具体的布局需求和浏览器兼容性进行选择和使用。

46 垂直居中的方法

将显示方式设置为表格，display:table-cell,同时设置vertial-align：middle
使用flex布局，设置为align-item：center
绝对定位中设置bottom:0,top:0,并设置margin:auto
绝对定位中固定高度时设置top:50%，margin-top值为高度一半的负值
文本垂直居中设置line-height为height值
inline-block兄弟元素：通过在父元素中插入一个inline-block元素，并设置其垂直对齐方式为middle来实现垂直居中

表格布局：将父元素的display属性设置为table，并将子元素的display属性设置为table-cell，然后使用vertical-align属性将子元素垂直居中

未知高度的块级父子元素居中，模拟表格布局
缺点：IE67不兼容，父级 overflow：hidden 失效

    .parent {
      display: table;
    }
    
    .child {
      display: table-cell;
      vertical-align: middle;
    }

Flexbox布局：将父元素的display属性设置为flex，并使用align-items属性将子元素垂直居中。

    .parent {
      display: flex;
      align-items: center;
    }

绝对定位和负边距：对于已知高度的子元素，将父元素设置为相对定位，子元素设置为绝对定位，并使用top: 50%将其垂直居中，然后通过负边距的方式将子元素向上移动一半的高度

    .parent {
      position: relative;
    }
    
    .child {
      position: absolute;
      top: 50%;
      margin-top: -50px; /* 假设子元素高度为100px的一半 */
    }

文本垂直居中：对于单行文本，可以设置父元素的line-height属性和高度相等，从而实现文本的垂直居中

    .parent {
      height: 100px;
      line-height: 100px;
    }

CSS3位移：使用CSS3的transform属性的translateY函数将子元素向上位移一半的高度实现垂直居中

    .child {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }

inline-block兄弟元素：通过在父元素中插入一个inline-block元素，并设置其垂直对齐方式为middle来实现垂直居中

    .parent {
      height: 100%;
    }
    
    .extra {
      display: inline-block;
      vertical-align: middle;
    }
    
    .child {
      display: inline-block;
      vertical-align: middle;
    }

47 如何使用CSS实现硬件加速？

硬件加速是指通过创建独立的复合图层，让GPU来渲染这个图层，从而提高性能，

一般触发硬件加速的CSS属性有transform、opacity、filter，为了避免2D动画在开始和结束的时候的repaint操作，一般使用tranform:translateZ(0)

使用CSS实现硬件加速可以通过以下方法：

使用3D变换 ：通过应用3D变换，如translateZ(0)，来触发硬件加速。这会将元素视为3D空间中的一个对象，使浏览器使用GPU进行渲染。

    .element {
      transform: translateZ(0);
    }

使用CSS动画 ：使用CSS动画属性（如transform、opacity、filter）来触发硬件加速。这可以通过创建一个动画并将其应用于元素来实现。

    .element {
      animation: myAnimation 1s linear infinite;
    }
    
    @keyframes myAnimation {
      0% {
        transform: translateZ(0);
      }
      100% {
        transform: translateZ(0);
      }
    }

使用CSS过渡 ：通过使用CSS过渡属性（如transform、opacity、filter）来触发硬件加速。这可以通过设置过渡效果来实现。

    .element {
      transition: transform 0.3s ease;
    }
    
    .element:hover {
      transform: translateZ(0);
    }

请注意，硬件加速并不是适用于所有情况的解决方案，它对于涉及大量动画或复杂渲染的元素特别有效。但是，在某些情况下，过多地使用硬件加速可能会导致性能问题，因此需要在实际使用时进行评估和测试。

48 重绘和回流（重排）是什么，如何避免？

重绘（Repaint）和回流（Reflow）是浏览器在渲染页面时的两个关键过程。

重绘（Repaint） 是指当元素的外观属性（如颜色、背景等）发生改变，但不影响布局时的重新绘制过程。重绘不会影响元素的几何尺寸和位置。
回流（Reflow） 是指当元素的布局属性（如尺寸、位置、隐藏/显示等）发生改变，导致浏览器重新计算元素的几何属性，重新构建渲染树的过程。回流会导致其他相关元素的回流和重绘。
回流必将引起重绘，而重绘不一定会引起回流

避免重绘和回流对于提高页面性能和响应速度至关重要。以下是一些减少重绘和回流的方法：

使用 CSS3 动画 ：使用 CSS3 的 transform 和 opacity 等属性来创建动画效果，因为它们会触发硬件加速，减少重绘和回流的影响。
批量修改样式 ：避免频繁修改单个元素的样式，尽可能将修改合并为一次操作，可以使用 class 或修改 style 属性的方式。
使用文档片段 ：当需要添加多个 DOM 元素到文档中时，可以先创建一个文档片段（DocumentFragment），将元素添加到片段中，然后再将片段一次性添加到文档中，减少回流次数。
使用离线 DOM ：将元素从文档中移除（display: none），进行复杂的操作（如修改样式、添加子元素等），完成后再将元素放回文档，以减少回流和重绘的影响。
缓存布局属性值 ：如果需要多次访问某个元素的布局属性（如位置、尺寸等），可以将其值缓存起来，避免多次触发回流计算。
避免强制同步布局 ：避免在 JavaScript 中获取布局属性（如使用 offsetTop、clientWidth 等），因为它会强制同步计算布局信息，触发回流。如果需要获取布局信息，最好将获取操作放在一起，或使用 getBoundingClientRect() 方法。

通过合理的设计和优化，可以最小化重绘和回流的次数，提高页面性能和用户体验。

49 说一说css3的animation

CSS3的animation属性是用于创建动画效果的一种方式。它可以通过关键帧（@keyframes）来定义动画的每一帧，以实现元素的平滑过渡和动态效果。

使用animation属性时，需要设置以下几个关键的子属性：

animation-name ：定义动画的名称，对应@keyframes中的动画名。
animation-duration ：定义动画的持续时间，可以设置为具体的时间值，如2s表示2秒，或者使用关键词infinite表示无限循环。
animation-timing-function ：定义动画的时间函数，控制动画在不同时间点的速度变化，常见的取值有linear（线性）、ease（缓入缓出）、ease-in（缓入）、ease-out（缓出）、ease-in-out（缓入缓出）等。
animation-delay ：定义动画的延迟时间，即动画开始之前的等待时间。
animation-iteration-count ：定义动画的循环次数，可以设置为具体的次数，或者使用关键词infinite表示无限循环。
animation-direction ：定义动画的播放方向，包括正常播放（normal）、反向播放（reverse）、交替反向播放（alternate）等。
animation-fill-mode ：定义动画播放之前和之后的样式状态，包括保持初始状态（none）、保持最后状态（forwards）、保持初始和最后状态（both）等。
animation-play-state ：定义动画的播放状态，可以控制动画的暂停和继续播放，包括paused（暂停）和running（运行）。

通过调整这些子属性的取值，可以创建各种不同的动画效果，使元素在页面上实现平滑的过渡和动态的效果。CSS3的animation提供了一种简洁、易用且高性能的方式来实现动画效果，减少了对JavaScript的依赖。

50 左边宽度固定，右边自适应

左侧固定宽度，右侧自适应宽度的两列布局实现

html结构

    <div class="outer">
        <div class="left">固定宽度</div>
        <div class="right">自适应宽度</div>
    </div>

在外层div（类名为outer）的div中，有两个子div，类名分别为left和right，其中left为固定宽度，而right为自适应宽度

方法1：左侧div设置成浮动：float: left，右侧div宽度会自动适应

    .outer {
        width: 100%;
        height: 500px;
        background-color: yellow;
    }
    .left {
        width: 200px;
        height: 200px;
        background-color: red;
        float: left;
    }
    .right {
        height: 200px;
        background-color: blue;
    }

方法2：对右侧:div进行绝对定位，然后再设置right=0，即可以实现宽度自适应

绝对定位元素的第一个高级特性就是其具有自动伸缩的功能，当我们将 width设置为 auto 的时候（或者不设置，默认为 auto ），绝对定位元素会根据其 left 和 right 自动伸缩其大小

    .outer {
        width: 100%;
        height: 500px;
        background-color: yellow;
        position: relative;
    }
    .left {
        width: 200px;
        height: 200px;
        background-color: red;
    }
    .right {
        height: 200px;
        background-color: blue;
        position: absolute;
        left: 200px;
        top:0;          
        right: 0;
    }

方法3：将左侧div进行绝对定位，然后右侧div设置margin-left: 200px

    .outer {
        width: 100%;
        height: 500px;
        background-color: yellow;
        position: relative;
    }
    .left {
        width: 200px;
        height: 200px;
        background-color: red;
        position: absolute;
    }
    .right {
        height: 200px;
        background-color: blue;
        margin-left: 200px;
    }

方法4：使用flex布局

    .outer {
        width: 100%;
        height: 500px;
        background-color: yellow;
        display: flex;
        flex-direction: row;
    }
    .left {
        width: 200px;
        height: 200px;
        background-color: red;
    }
    .right {
        height: 200px;
        background-color: blue;
        flex: 1;
    }

51 两种以上方式实现已知或者未知宽度的垂直水平居中

    /** 1 **/
    .wraper {
      position: relative;
      .box {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        margin: -50px 0 0 -50px;
      }
    }
    
    /** 2 **/
    .wraper {
      position: relative;
      .box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
    
    /** 3 **/
    .wraper {
      .box {
        display: flex;
        justify-content:center;
        align-items: center;
        height: 100px;
      }
    }
    
    /** 4 **/
    .wraper {
      display: table;
      .box {
        display: table-cell;
        vertical-align: middle;
      }
    }

52 如何实现小于12px的字体效果

实现小于12px的字体效果可以使用CSS的transform: scale()属性。但需要注意的是，该属性只能应用于具有宽度和高度的元素，而行内元素默认是没有宽度和高度的。

为了在行内元素上应用缩放效果，可以将其转换为具有宽度和高度的块级元素，例如使用display: inline-block。

下面是一个示例代码：

    .small-text {
      display: inline-block;
      transform: scale(0.7);
      transform-origin: left top;
    }

在上述代码中，我们将目标元素的display属性设置为inline-block，然后应用了transform: scale(0.7)来缩小元素的大小，并通过transform-origin: left top设置缩放的基准点为左上角。

使用以上代码，可以实现小于12px的字体效果，但需要注意，缩放可能会导致文本的清晰度下降，因此在使用此技术时需要谨慎权衡效果和可读性。

53 css hack原理及常用hack

原理：利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器样式。
常见的hack有
- 属性hack
- 选择器hack
- IE条件注释

CSS hack是一种技术手段，用于在不同的浏览器或特定的浏览器版本上应用不同的样式规则。它通过利用浏览器对CSS解析的差异来实现。

以下是一些常见的CSS hack及其应用：

属性hack：针对特定浏览器或浏览器版本设置不同的属性值。

    /* 仅适用于IE10及以下版本 */
    .element {
      color: red\9;
    }

选择器hack：使用特定的选择器来针对特定浏览器或浏览器版本。

    /* 仅适用于IE6 */
    * html .element {
      color: red;
    }

IE条件注释：通过IE条件注释来针对不同的IE版本应用不同的样式。

    <!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7.css" />
    <![endif]-->

上述代码中，之间的样式表链接只会在IE7浏览器中生效。

需要注意的是，CSS hack是一种针对特定浏览器或浏览器版本的解决方案，但它可能存在以下问题：

可能会导致代码的可读性和维护性降低。
在不同的浏览器更新版本或新的浏览器出现时，需要更新和调整hack。
可能会导致一些意外的副作用或兼容性问题。

因此，在使用CSS hack时，需要权衡利弊，并尽量考虑更加稳定和标准的解决方案，例如使用CSS前缀、特性检测和渐进增强等方法来实现跨浏览器兼容性。

54 CSS有哪些继承属性

CSS中有一些属性是可以继承的，这意味着父元素的某些样式属性会自动应用到子元素上。以下是一些常见的继承属性：

字体相关属性：
- font
- font-family
- font-size
- font-weight
- font-style
文本排版属性：
- word-break
- letter-spacing
- text-align
- text-rendering
- word-spacing
- white-space
- text-indent
- text-transform
- text-shadow
行高属性：
- line-height
颜色相关属性：
- color
可见性属性：
- visibility
光标属性：
- cursor

这些属性在父元素上设置后，会自动应用到其子元素上，除非子元素有自己的特定样式覆盖了继承的属性。

需要注意的是，并非所有的CSS属性都是可继承的，有些属性是不会传递给子元素的。在使用CSS样式时，需要注意属性的继承特性，以便正确地应用样式到子元素。

55 外边距折叠(collapsing margins)

外边距折叠（collapsing margins）是 CSS 中一种特定的行为，它会导致一些相邻元素的外边距合并成一个更大的外边距。以下是关于外边距折叠的几个规则：

相邻的普通流中的块级元素的垂直外边距会折叠。只有垂直方向上的外边距才会发生折叠，水平方向上的外边距不会折叠。
浮动元素、绝对定位元素以及行内块元素的外边距不会和其他元素的外边距折叠。
创建了块级格式化上下文（BFC）的元素的外边距不会和其子元素的外边距折叠。常见的创建 BFC 的方式包括设置overflow为除visible之外的值、使用float属性、使用position: absolute等。
相邻元素自身的margin-bottom和margin-top会折叠。当一个元素的margin-bottom和下一个元素的margin-top相邻时，它们会合并成一个外边距。

外边距折叠在布局中可能会导致一些意外的效果，因此在需要避免外边距折叠的情况下，可以采用以下方法：

设置padding、border或者使用inline-block等方式来阻止外边距折叠。
使用浮动（float）或绝对定位（position: absolute）等方式创建块级格式化上下文（BFC），从而阻止外边距折叠。

了解和掌握外边距折叠的规则可以帮助我们更好地处理布局和样式相关的问题。

56 CSS选择符有哪些？哪些属性可以继承

你列举的CSS选择器是正确的，以下是它们的详细说明：

id选择器（#myid）：通过元素的id属性选择元素，id应该是唯一的。
类选择器（.myclassname）：通过元素的class属性选择元素，一个元素可以有多个类名。
标签选择器（div、h1、p等）：通过元素的标签名选择元素。
相邻选择器（h1 + p）：选择紧接在指定元素后面的兄弟元素。
子选择器（ul > li）：选择指定元素的直接子元素。
后代选择器（li a）：选择指定元素的后代元素，可以是子元素、孙子元素等。
通配符选择器（*）：匹配所有元素。
属性选择器（a[rel="external"]）：通过元素的属性值选择元素。
伪类选择器（a:hover、li:nth-child等）：选择特定状态或位置的元素。

这些选择器可以单独使用，也可以组合使用，以选择特定的元素或元素组。通过选择器，可以实现对页面中的不同元素进行样式控制和操作。

CSS哪些属性可以继承？哪些属性不可以继承

实际上，继承性并不是根据某个属性是可继承属性还是不可继承属性来决定的。继承性是根据具体的属性规定来决定的。以下是一些常见的可继承属性和不可继承属性的示例：

可继承属性：

文本相关属性：font-family、font-size、font-weight、font-style、line-height、color
链接相关属性：text-decoration、cursor
盒模型相关属性：margin、padding
列表相关属性：list-style-type、list-style-image、list-style-position
表格相关属性：border-collapse、border-spacing

不可继承属性：

盒模型相关属性：width、height、border、border-radius、padding、margin
定位属性：position、top、right、bottom、left、float
背景相关属性：background-color、background-image、background-repeat、background-position、background-size

需要注意的是，即使某个属性是可继承属性，但也可以通过显式设置子元素的样式来覆盖继承的值。另外，有些属性可以通过使用inherit关键字来强制继承父元素的值，即使它本身不具备继承性。

需要注意的是，以上列举的可继承属性和不可继承属性并非全部，具体的属性是否具有继承性需要查阅相关文档进行确认。

57 CSS3新增伪类有那些

你列举的是CSS3新增的一些伪类，它们可以用于选择特定的元素状态或位置。以下是它们的详细说明：

:root：选择文档的根元素，等同于html元素。
:empty：选择没有子元素的元素。
:target：选取当前活动的目标元素。
:not(selector)：选择除selector元素以外的元素。
:enabled：选择可用的表单元素。
:disabled：选择禁用的表单元素。
:checked：选择被选中的表单元素。
:after：在元素内部最前添加内容。
:before：在元素内部最后添加内容。
:nth-child(n)：匹配父元素下指定子元素中排序第n个的元素。
:nth-last-child(n)：匹配父元素下指定子元素中从后向前数排序第n个的元素。
:nth-child(odd)：匹配父元素下指定子元素中奇数位置的元素。
:nth-child(even)：匹配父元素下指定子元素中偶数位置的元素。
:nth-child(3n+1)：匹配父元素下指定子元素中满足3n+1位置的元素。
:first-child：选择父元素下的第一个子元素。
:last-child：选择父元素下的最后一个子元素。
:only-child：选择父元素下唯一的子元素。
:nth-of-type(n)：匹配父元素下指定类型的子元素中排序第n个的元素。
:nth-last-of-type(n)：匹配父元素下指定类型的子元素中从后向前数排序第n个的元素。
:nth-of-type(odd)：匹配父元素下指定类型的子元素中奇数位置的元素。
:nth-of-type(even)：匹配父元素下指定类型的子元素中偶数位置的元素。
:nth-of-type(3n+1)：匹配父元素下指定类型的子元素中满足3n+1位置的元素。
:first-of-type：选择父元素下指定类型的第一个子元素。
:last-of-type：选择父元素下指定类型的最后一个子元素。
:only-of-type：选择父元素下指定类型的唯一子元素。
::selection：选择被用户选取的元素部分。
:first-line：选择元素中的第一行。
:first-letter：选择元素中的第一个字符

58 如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中

要居中一个div，可以使用以下方法：

使用margin: 0 auto;将div水平居中。前提是给div设置一个固定的宽度。

    div {
      width: 200px;
      margin: 0 auto;
    }

对于浮动元素，可以使用相对定位和负边距的方式进行居中。

    .container {
      position: relative;
    }
    
    .float-element {
      float: left;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
    }

对于绝对定位的div，可以通过设置top, left, right, bottom 属性为 0，并将margin设置为auto来实现居中。

    .absolute-element {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }

以上是一些常用的居中方法，具体选择哪种方法取决于你的布局需求和元素的类型。

59 用纯CSS创建一个三角形的原理是什么

使用纯CSS创建三角形的原理是利用元素的边框属性来实现。

具体步骤如下：

创建一个具有宽度和高度为0的元素。
设置元素的边框宽度为一个较大的值，例如 20px。
设置元素的边框样式为 solid，表示实线边框。
通过调整元素的边框颜色，使得三条边中的一条边有颜色，其余两条边颜色为透明，从而形成三角形的形状。

在给定的示例中，#demo元素的宽度和高度为0，边框宽度为20px，边框颜色设置为透明、透明、红色和透明，从而形成一个红色的等腰三角形。

    /* 把上、右、左、三条边隐藏掉（颜色设为 transparent） */
    #demo {
      width: 0;
      height: 0;
      border-width: 20px;
      border-style: solid;
      border-color: transparent transparent red transparent;
    }

60 一个满屏品字布局如何设计?

要实现一个满屏的"品"字布局，可以采用以下方法：

HTML 结构：

    <div class="container">
      <div class="top"></div>
      <div class="middle"></div>
      <div class="bottom"></div>
    </div>

CSS 样式：

    .container {
      width: 100%;
      height: 100vh; /* 或者使用 height: 100% */
    }
    
    .top, .middle, .bottom {
      width: 50%;
      height: 50vh; /* 或者使用 height: 50% */
      float: left; /* 或者使用 display: inline-block; */
    }
    
    .top {
      background-color: red; /* 设置上方区域的背景色 */
    }
    
    .middle {
      background-color: white; /* 设置中间区域的背景色 */
    }
    
    .bottom {
      background-color: blue; /* 设置下方区域的背景色 */
    }

这样设置后，上方区域（红色）占据整个屏幕宽度的一半，中间区域（白色）和下方区域（蓝色）各占据屏幕宽度的一半。可以使用 float: left; 或者 display: inline-block; 来让它们在同一行显示，不换行。

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

li 与 li 之间的看不见的空白间隔是由于 HTML 中的换行符和空格字符造成的。这些空白字符会被解析为文本节点，而文本节点默认会应用一定的样式，导致 li 之间产生间隔。

解决这个问题的方法有多种，以下是一些常见的解决办法：

使用负 margin：可以将 li 的 margin 设置为负值，例如 margin-right: -4px;。这样可以抵消掉 li 之间的间隔。

    ul {
      margin: 0;
      padding: 0;
    }
    
    li {
      margin-right: -4px;
      padding-right: 4px;
      list-style: none;
    }

使用浮动：给 li 添加 float: left; 属性，使其浮动在一行内，消除间隔。

    ul {
      margin: 0;
      padding: 0;
      overflow: auto;
    }
    
    li {
      float: left;
      list-style: none;
    }

使用 Flexbox 布局：将 ul 设置为 Flex 容器，使 li 自动排列在一行内，间隔消失。

    ul {
      margin: 0;
      padding: 0;
      display: flex;
    }
    
    li {
      list-style: none;
    }

这些方法可以根据具体情况选择使用，根据不同的布局需求选择最合适的解决办法。

62 请列举几种隐藏元素的方法

visibility: hidden;: 设置元素为隐藏状态，但仍然占据空间。
opacity: 0;: 将元素的透明度设置为0，使其完全透明。
position: absolute;或left: -9999px;: 将元素定位到屏幕可见区域之外，实现隐藏效果。
display: none;: 将元素设为不可见，并且不占据页面布局空间。
transform: scale(0);: 将元素的缩放比例设置为0，元素将不可见，但原始位置仍保留。
<div hidden="hidden">: 使用hidden属性来隐藏元素，与display: none;效果相同，但用于记录元素的状态。
height: 0;: 将元素的高度设为0，消除边框，使其不可见。
filter: blur(0);: 使用filter属性将元素的模糊度设置为0，从视觉上使元素“消失”。

这些方法可以根据实际需求选择适合的隐藏方式，以达到隐藏元素的效果。

63 rgba() 和 opacity 的透明效果有什么不同

opacity 作用于元素以及元素内的所有内容（包括文字）的透明度
rgba() 只作用于元素自身的颜色或其背景色，子元素不会继承透明效果

opacity 和 rgba() 在透明效果上有以下不同：

opacity：设置元素及其内容的透明度。透明度值范围为 0（完全透明）到 1（完全不透明）。透明度会应用于元素及其内部所有内容，包括文本、图像等。这意味着如果将一个元素的透明度设置为 0.5，那么元素及其内容都会以半透明的形式显示。

    .element {
      opacity: 0.5;
    }

rgba()：用于设置元素自身的颜色或背景色的透明度。这个函数接受四个参数，前三个参数表示颜色的红、绿、蓝通道的数值（取值范围 0-255），第四个参数表示透明度（取值范围 0-1）。透明度值为 0 表示完全透明，为 1 表示完全不透明。这意味着只有元素自身的颜色或背景色会受到透明度的影响，而元素内部的内容不会继承透明效果。

    .element {
      background-color: rgba(255, 0, 0, 0.5); /* 红色背景，透明度为 0.5 */
    }

总结来说，opacity 会影响元素及其内部所有内容的透明度，而 rgba() 只会影响元素自身的颜色或背景色的透明度，不会影响元素内部的内容。

64 css 属性 content 有什么作用

content 属性主要用于在 ::before 和 ::after 伪元素中插入额外的内容或样式。

通过设置 content 属性，可以在元素的前面或后面插入指定的内容，包括文本、图标、计数等。它可以接受各种值，如字符串、引用、计数器等。

例如，可以使用 content 属性在元素前面插入一个文本字符：

    .element::before {
      content: "→";
    }

上述代码将在 .element 元素的前面插入一个箭头字符。

此外，content 属性还可以与其他 CSS 属性一起使用，例如结合 attr() 函数来获取元素的属性值并插入到内容中：

    .element::before {
      content: attr(data-text);
    }

上述代码会将元素的 data-text 属性值插入到 .element 元素的前面作为内容。

需要注意的是，content 属性只能用于 ::before 和 ::after 伪元素中，并且必须配合 display 属性设置为 inline 或 inline-block 才能生效。

65 请解释一下 CSS3 的 Flexbox（弹性盒布局模型）以及适用场景

Flexbox 是 CSS3 中引入的一种弹性盒布局模型，用于在容器内创建灵活的、自适应的布局。它提供了一种强大的方式来对齐、分布和调整容器中的项目。

Flexbox 的适用场景包括但不限于以下情况：

等高布局：Flexbox 可以轻松实现容器内多个项目等高的布局，无论项目的内容多少。
自适应布局：Flexbox 可以根据容器的可用空间自动调整项目的大小，以适应不同尺寸的屏幕或容器。
项目排序：Flexbox 可以通过改变项目的顺序来实现在不同屏幕尺寸下的布局调整。
对齐和分布：Flexbox 提供了多种对齐和分布项目的方式，如水平居中、垂直居中、平均分布等。
响应式设计：Flexbox 可以与媒体查询结合使用，根据屏幕尺寸调整容器中项目的布局方式。

Flexbox 的特点包括：

父容器具有弹性，可以自动调整项目的大小和顺序。
子项目可以具有灵活的宽度、高度和顺序。
可以轻松实现响应式设计，适应不同的屏幕尺寸和设备。
提供了多种对齐和分布项目的属性和方法，使布局更加灵活和易于控制。

总而言之，Flexbox 提供了一种简单、直观且强大的布局方式，适用于构建各种自适应和灵活的布局，特别适合用于构建响应式设计和移动端布局。

66 经常遇到的浏览器的JS兼容性有哪些？解决方法是什么

经常遇到的浏览器的 JavaScript 兼容性问题及解决方法如下：

当前样式：获取元素的当前样式属性值

解决方法：使用 getComputedStyle(el, null) 方法获取当前样式属性值，或者使用 el.currentStyle 属性（仅适用于 IE 浏览器）。

事件对象：处理事件时获取事件对象

解决方法：使用 e 参数获取事件对象，或者使用 window.event（仅适用于 IE 浏览器）。

鼠标坐标：获取鼠标在页面上的坐标位置

解决方法：使用 e.pageX 和 e.pageY 获取鼠标坐标位置，或者使用 window.event.x 和 window.event.y（仅适用于 IE 浏览器）。

按键码：处理键盘事件时获取按下的键盘按键码

解决方法：使用 e.which 获取按键码，或者使用 event.keyCode（仅适用于 IE 浏览器）。

文本节点：获取元素中的文本内容

解决方法：使用 el.textContent 获取文本内容，或者使用 el.innerText（仅适用于 IE 浏览器）。

为了解决浏览器的兼容性问题，可以采取以下方法：

特性检测：通过检测浏览器是否支持某个特定的方法或属性，从而决定使用哪种方式来处理。
浏览器嗅探：根据浏览器的用户代理字符串来识别浏览器类型，从而采取相应的处理方式。
使用兼容性库：如 Modernizr、jQuery 等，它们封装了许多兼容性处理的方法，可以简化开发过程。
编写跨浏览器的代码：使用一致的标准和通用的 JavaScript 方法，避免依赖特定浏览器的特性。

综上所述，通过特性检测、浏览器嗅探、使用兼容性库以及编写跨浏览器的代码，可以解决常见的浏览器 JavaScript 兼容性问题。

以下是对每个兼容性问题的示例代码：

1. 当前样式：

    var el = document.getElementById('myElement');
    
    // 获取当前样式属性值
    var currentStyle;
    if (window.getComputedStyle) {
      currentStyle = window.getComputedStyle(el, null).getPropertyValue('color');
    } else if (el.currentStyle) {
      currentStyle = el.currentStyle.color;
    }
    console.log(currentStyle);

2. 事件对象：

    // 处理点击事件
    function handleClick(e) {
      // 获取事件对象
      var event = e || window.event;
      console.log(event);
    }
    
    // 绑定点击事件
    var element = document.getElementById('myElement');
    if (element.addEventListener) {
      element.addEventListener('click', handleClick, false);
    } else if (element.attachEvent) {
      element.attachEvent('onclick', handleClick);
    }

3. 鼠标坐标：

    // 处理鼠标移动事件
    function handleMouseMove(e) {
      // 获取鼠标坐标位置
      var mouseX, mouseY;
      if (e.pageX || e.pageY) {
        mouseX = e.pageX;
        mouseY = e.pageY;
      } else if (e.clientX || e.clientY) {
        mouseX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        mouseY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
      }
      console.log('Mouse position: ' + mouseX + ', ' + mouseY);
    }
    
    // 绑定鼠标移动事件
    var element = document.getElementById('myElement');
    if (element.addEventListener) {
      element.addEventListener('mousemove', handleMouseMove, false);
    } else if (element.attachEvent) {
      element.attachEvent('onmousemove', handleMouseMove);
    }

4. 按键码：

    // 处理键盘按下事件
    function handleKeyDown(e) {
      // 获取按键码
      var keyCode = e.which || e.keyCode;
      console.log('Key pressed: ' + keyCode);
    }
    
    // 绑定键盘按下事件
    var element = document.getElementById('myElement');
    if (element.addEventListener) {
      element.addEventListener('keydown', handleKeyDown, false);
    } else if (element.attachEvent) {
      element.attachEvent('onkeydown', handleKeyDown);
    }

5. 文本节点：

    var el = document.getElementById('myElement');
    
    // 获取元素中的文本内容
    var textContent;
    if ('textContent' in el) {
      textContent = el.textContent;
    } else if ('innerText' in el) {
      textContent = el.innerText;
    }
    console.log(textContent);

请根据实际情况修改示例代码，并结合特性检测、浏览器嗅探、使用兼容性库以及编写跨浏览器的代码的方法来解决兼容性问题。

67 请写出多种等高布局

使用 JavaScript/jQuery：通过脚本计算元素高度，并将最大高度应用于其他元素。
使用伪元素和绝对定位：在容器元素中添加一个伪元素，使用绝对定位将其拉伸到与最高元素相同的高度。
使用表格布局：将容器元素设置为display: table，将子元素设置为display: table-cell，然后使用vertical-align: top或其他对齐方式来实现等高效果。
使用网格布局（CSS Grid）：使用grid-template-rows属性将所有行设置为相同的高度。
使用flexbox嵌套：将容器元素设置为display: flex，然后在每个子元素中再嵌套一个flexbox容器，将子元素的高度设置为100%，从而实现等高布局。
css3 flexbox 布局： .container{display: flex; align-items: stretch;}

需要根据具体情况选择适合的等高布局方法，考虑兼容性、布局需求和代码复杂度等因素。

详情