CSS相关面试题

CSS相关面试题

1、标准盒子模型和IE怪异盒子模型？

• 标准盒子模型就是指的元素的宽度和高度仅包括的内容区域，不包括边框和内边距，也就是说，元素的实际宽度和高度等于内容区域的宽度和高度
• IE怪异盒子是指元素的高度和宽度，包括内容区域、内边距和边框，也就是说，元素的实际宽度和高度等于内容区域的宽度和高度加上内边距和边框的宽度。
• 在标准盒子模型中，可以通过设置元素的高度和宽度来控制内容区域的大小，而IE怪异盒子模型中，需要考虑到边框和内边距的影响，才能准确的控制内容区域的大小
• 为了避免浏览器兼容性的问题，可以在CSS中使用box-sizing属性来指定盒子模型的实现方式，默认值为content-box，表示标准盒子模型；而设置为border-box，则表示IE怪异盒子模型

1.1 box-sizing 是 CSS 盒模型属性的一部分，它有两个可选值：

1. content-box：默认属性，元素实际的宽度只包含内容(content)部分的宽度，在此基础上再为padding和border设置宽度。
2. border-box：元素实际宽度包括内边距(padding)、边框(border)和内容(content)的宽度总和。

设置该属性可以让盒模型中内边距、边框和内容的大小计算更加清晰和直观。由于设置border-box 属性时不用太关心 padding 和 border 的宽度，所以在某些情况下能够更容易地控制盒子大小。这两个属性都会影响到盒子自身的大小和位置，对盒子内子元素的大小和位置不会产生影响。

2、CSS选择器？

• id选择器：权重100
• 类选择器：权重10
• 标签选择器
• 后代选择器
• 伪类选择器
• 伪元素选择器
• 属性选择器
• 属性选择器
• 子选择器
• 相邻同胞选择器
• 群组选择器

选择器权重：内部大于外部样式，！iportant优先级永远最高，比内联还要高。

计算权重：id:100,class 10,元素标签1，通配符0，复合选择器：各个选择器的加和

2.1、优先级？

• !important>内联>ID选择器>类选择器>标签选择器
• !important > 内联样式 = 外联样式 > ID选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 元素选择器 = 伪元素选择器 > 通配选择器 = 后代选择器 = 兄弟选择器
• 计算层面：

3、BFC的理解？

• BFC是块级格式化上下文，是页面当中的一块渲染区域，有自己的一块渲染规则，display的所有属性都会触发BFC，overflow属性也会触发BFC，清浊浮动，
• BFC是CSS 中的一种重要的渲染方式，其主要作用在于创建一个独立的渲染环境，可以避免外部元素对内部元素的影响。
• 应用场景：垂直外边距合并，都是正值取较大的，一正一负取两者之和，都是负值取较大的

3.1、哪些情况可能涉及到BFC（应用场景）?

1. 清除浮动：使用 float 属性创建浮动元素时，可以通过给父元素添加 overflow: hidden 或 display: flow-root 属性来清除浮动。
2. 避免 margin 重叠：当相邻元素之间存在较大的 margin 值时，可以使用 BFC 来避免 margin 重叠问题。
3. 处理多栏布局：使用 CSS 的多栏布局技术实现的多列显示需要依赖于 BFC。
4. 处理定位元素：当经常使用绝对定位属性 (position: absolute) 时，可能会产生一些奇怪的效果。这个时候也可以考虑通过使用 BFC 来解决问题。
5. 防止文字环绕：在图像等其他块级元素旁边，防止文本环绕出现。如需将文本与图像分离，则可将图像放在 BFC 内，从而防止文字环绕出现。

3.2、哪些情况触发BFC？

1. 根元素或者包含根元素的元素
2. 浮动元素float不是none时候
3. 绝对定位元素position为absolute或fixed
4. 行内块元素display为inline-block
5. 表格单元格display为table-cell
6. overflow不是visible的块级元素

3.3、清除浮动的几种方法？

浮动元素通常会导致其父元素高度塌陷，为了避免这种情况，我们需要对浮动元素进行清除操作。以下是三种常用的清除浮动的方法：

1. 使用空标签清除浮动

在浮动元素后面添加一个空的

标签，并设置clear: both属性，即可清除浮动。

<div style="clear:both;"></div>

2.使用父元素添加overflow属性

给浮动元素的父元素添加overflow: hidden或overflow: auto属性，也可以清除浮动，但如果 overflow 属性被指定为 scroll 或 auto 并且有滚动条时，将出现一个可滚动菜单，这可能不是期望的。

.parent {
  overflow: hidden; /* 或者 overflow: auto; */
}

.使用伪元素清除浮动

在浮动元素的父元素上使用clearfix类，并在CSS中定义clearfix类的:after伪元素，然后添加clear: both属性，即可清除浮动。

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

<div class="clearfix">
  <div class="float-left"></div>
  <div class="float-right"></div>
</div>

注意，以上三种方式都有各自的优缺点和适用场景，应根据实际需求来选择最佳的清除浮动的方法。

4、元素垂直居中的方法？

1. 利用定位+margin：auto
2. 利用定位+margin：负值，top：50%；left：50%（已知宽高）
3. 利用定位+transform：（位置宽高）translate（-50%，-50%）可以使用 position 和 transform 属性将元素垂直居中。将元素的 position 属性设置为 absolute，然后使用 top 和 left 属性将元素定位到父元素的中心位置。最后使用 transform 属性将元素向上移动自身高度的一半
4. table布局：可以使用 table-cell 布局的 vertical-align 属性将元素垂直居中。将父元素的 display 属性设置为 table，子元素的 display 属性设置为 table-cell，然后设置 vertical-align 属性为 middle 即可。
5. flex布局：可以使用 flexbox 布局的 align-items 属性将元素垂直居中。将父元素的 display 属性设置为 flex，然后设置 align-items 属性为 center 即可。
6. grid布局

4.1、元素水平垂直居中的方法？

1、使用 flex 布局：将父容器设置为 display: flex; 并将其子元素通过 justify-content: center; align-items: center; 属性进行水平垂直居中。

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

2、绝对定位 + transform：通过将元素设置为绝对定位 position: absolute; ，并使用 transform 属性来进行水平垂直居中。需要注意的是，此方法需要明确指定元素的宽高，并设置父容器的相对定位 position: relative; 属性。

.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

3、使用 grid 布局：将父容器设置为 display: grid; ，并在其中将元素设为网格项，在网格容器中使用 place-items: center; 属性进行水平垂直居中。

.parent {
display: grid;
place-items: center;
}

4、使用表格布局：将父容器设置为 display: table; ，将内部元素设为表格单元格 (display: table-cell;) ，通过 text-align: center; vertical-align: middle; 属性进行水平垂直居中。

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

5、如何去实现一个双飞翼布局（两栏布局）？

• 利用flex布局，左边固定宽度，右边设置flex为1，右侧自适应

6、如何去实现一个三栏布局，中间自适应？

• 利用flex布局，左右两边设置为固定宽度，然后中间设置flex为1，就可以实现三栏布局，中间自适应

7、回流和重绘？

• 在html中，每个元素都可以理解成一个盒子，在浏览器的解析过程中，会涉及到回流和重绘
• 回流，当页面中的元素发生布局或者几何属性的变化时，浏览器需要重新计算元素的位置和大小，然后重新布局整个页面的过程，回流会导致页面的重新渲染，因此也比较耗费性能
• 重绘，指的是当页面中的元素的样式发生变化时候，浏览器会重新绘制这些元素的外观，但是不会改变他们的布局或几何属性，重绘的代价比回流小，但是仍然会消耗一定的性能
• 触发回流时机：
  • 页面的首次渲染
  • 浏览器窗口大小发生变化
  • 元素的位置、大小、内容发生变化
  • 添加或删除可见的DOM元素
  • 修改元素的样式，例如宽度、高度、字体大小等
• 触发重绘时机：
  • 修改元素的背景颜色，字体颜色等样式属性
  • 修改元素的不透明度
  • 修改元素的文本内容

8、绘制三角形

• 不带颜色三角形：css旋转特性，构建一个元素20px，border-top/border-right构成直角三角形，下三角为例，旋转45度而得到
• border实现，给元素设置border:50px，边框颜色透明，类似于正方形，上下左右四个border，将正方形分成四部分，上三角为例，border-bottom设置颜色

9、移动端的1px边框

• 利用响应式布局，监听当前设备的大小，通过缩放，缩放的值就是监听当前屏幕设备的尺寸，通过媒体查询查询尺寸，对于屏幕进行缩放，实现移动端的1px边框
• 移动端的1px边框问题是由于移动设备的像素密度比较高，导致CSS中的1px实际上在屏幕上显示的像素可能是2px或3px，从而导致边框变粗或者变模糊
• 解决办法;
  • 使用CSS3的border-image属性，将边框图案作为背景图片，可以避免边框变粗或者变模糊的问题。
  • 使用viewport单位，如vw、vh、vmin、vmax等，来设置边框的宽度，这样可以根据屏幕的大小自适应调整边框的宽度。
  • 使用transform:scale()属性，将元素缩小一定比例，然后再放大，这样可以使边框变得更加锐利。
  • 使用伪元素:before或:after来实现边框，这样可以避免边框变粗或者变模糊的问题。
• 涉及dpr问题，设备像素比问题

伪类+缩放

先设置伪类为空，给盒子宽高设置200%，使用transform:scaleY对元素进行缩放，50% ，调整元素中心点transform-origin，设置为左上，进行缩放

9.1、移动端如何去实现1像素边框?

1. 通过 CSS 的 border 属性，在元素的边框上设置 0.5px 的宽度即可只显示1像素宽度的边框，代码示例如下：

   .element {
       border: 0.5px solid #000;
   }
   

   在使用这种方法时，需要注意的是，并非所有的浏览器和手机设备都支持0.5像素的边框，因此建议在使用前先进行测试。

2. 使用 ::before 或 ::after 伪元素，并将其作为边框插入到目标元素中，再通过 CSS 对伪元素进行调整。

   首先，在CSS中定义通用类.border-1px，并声明position:relative，然后在内部使用一个::before或::after伪元素作为1像素边框，最后再通过相对定位将目标元素和伪元素定位到同一位置即可。代码示例如下：

   .border-1px {
       position: relative;
   }
   
   .border-1px::before { 
       content: '';
       position: absolute;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       border: 1px solid #000;
       transform-origin: 0 0;
       transform: scaleY(0.5);
   }
   
   /* 示例 */
   .element {
       width: 100px;
       height: 50px;
   }
   

   在这个例子中，通过将::before伪元素作为1像素宽度的边框，使用CSS的transform对其进行垂直缩放，从而得到了一个在移动端设备上也很好看的1像素边框。

10、响应式布局媒体查询三个关键字？

• and：且
• only：唯一的
• none：排除某个
• @media

11、CSS3新增的特性有哪些？

• 圆角属性 border-radius：可以使用 border-radius 属性创建圆角效果。
• 阴影属性 box-shadow：可以使用 box-shadow 属性为元素添加阴影。
• 线性渐变 linear-gradient()：可以使用 linear-gradient() 函数创建线性渐变背景色。
• 径向渐变 radial-gradient()：可以使用 radial-gradient() 函数创建径向渐变背景色。
• 文本阴影 text-shadow：可以使用 text-shadow 属性为文本添加阴影效果。
• 媒体查询 @media：可以使用 @media 查询根据设备导向或页面属性来应用不同的样式。
• 2D/3D 转换 transform：可以使用 transform 属性实现 2D 或 3D 的缩放、旋转、平移等效果。
• 过渡 transition：可以使用 transition 属性为元素属性添加过渡效果，如颜色、大小、位置等。
• 动画 animation：可以使用 animation 属性复合写法对元素进行动画效果控制，如循环、播放速度等。
• 弹性盒子布局 Flexbox：可以使用 Flexbox 布局来进行灵活的元素排列，使元素能够更容易地自适应不同大小的屏幕。

11.1、css3中的倒影属性？

CSS3 中可以使用 box-reflect 属性来为元素添加倒影效果。该属性用于创建元素的反射镜像（即倒影），并沿着元素底部呈现。

box-reflect 属性接受三个参数，分别用于指定反射镜像的方向、偏移量和渐变：

1. 第一个参数指定了反射的类型，它可以是 "above", "below" 或 "left", "right"。

• "above"：表示从元素上面映射反射镜像；
• "below"：表示从元素下面映射反射镜像；
• "left"：表示从元素左侧映射反射镜像；
• "right"：表示从元素右侧映射反射镜像。

1. 第二个参数用于设置反射距离，即集合表面与原始表面之间的距离。

• 默认值为 0，表示反射紧贴着元素底部显示；
• 值为正数时表示距离元素底部的距离增大，此时反射的长度也会相应放大。

1. 第三个参数用于设置反射镜像的颜色，可以使用 CSS 渐变来实现丰富的效果。

12、CSS动画都有哪些？

• css动画就是为层叠样式表建议的允许的可扩展性标记语言，元素使用css的动画模块
• 过渡：transform(translate位移、scale缩放、rotate旋转、skew倾斜)
• 动画：animation（设置关键帧，通过animation定义名字，属性了解）
• 渐变：transition

---

CSS动画是指使用CSS样式规则来实现的在网页上动态变化的效果。CSS3带来了一系列样式特性，使得我们可以编写出丰富、流畅的动画效果，具体的CSS动画效果如下：

1. @keyframes 规则：允许从一个CSS样式设置到另一个设置之间定义关键帧，这些关键帧用于创建复杂和流畅的动画。
2. transform 属性：通过修改位置、旋转、缩放等变换的方式来改变元素的外观，以达到动画的目的。
3. transition 属性：定义当HTML元素中的CSS属性值改变时发生的动画过渡。
4. animation 属性：定义一组关键帧，表示对象在遭受某些额外的过度或动作时该发生什么变化。可以控制动画的持续时间、速度曲线、延迟以及播放次数。
5. perspective 属性：为3D变换提供透视空间。配合 transform 和 animation 属性实现3D动画效果。
6. filter 属性：应用图形效果（如模糊、反转颜色、变亮或变暗等）到HTML元素上，并可以产生动画效果。

这些 CSS 动画技术是强大的工具，例如transition通过简单的改变元素的位置、大小或颜色来实现简单的效果，而新版transform可实现更加复杂的形状转换和3D效果。使用这些技术能够使网页动态性更强，增强用户体验，并且在视觉上引人注目。

13、3D动画中的perspective属性（3D动画景深）？

transform-style呈现3D样式效果

• 在3D动画中，perspective属性是值的场景的透视效果，也成为景深
• 指的是在3D场景中，物体离观察者越远，他们的大小和位置就会变得更小，这种效果可以让场景看起来更加的真实。
• perspective属性可以通过调整相机的位置和角度来进行实现，通常通过设置相机的视角、远近平面和近裁剪等参数来控制景深的效果
• 在3D动画中，透视效果可以让观众更好的感受到场景的深度和立体感，从而提高动画的真实感和沉浸感

14、可视视口和理想视口？

• 可视视口：设备的真实大小，可以看见的屏幕大小区域，可以随着浏览器窗口的大小来进行页面的调整
• 理想视口：网页的理想显示区域，是一个固定的值，不会随着浏览器窗口的大小而改变
• 布局视口：在浏览器中，是固定的，960px，浏览器网页的布局区域，包括可见和不可见的部分
• dpr：设备像素比，它是物理设备和css像素之间的比率
• ppi：每英寸像素比，是衡量显示器、手机屏幕等设备分辨率的常用单位，表示在每英寸的区域内有多少个像素点，ppi越高，显示的图像就越清晰
• viewport：指的是浏览器窗口中用于显示网页的区域，在网页开发中，viewport通常指的是网页的可视区域，也就是浏览器窗口中实际用于显示网页内容的区域

15、css样式哪些可以继承？哪些不可以继承？

可以继承：

• font-size、font-family、font-weight等
• color颜色
• line-height行高
• text-align文本位置
• visibility
• cursor

不可以继承：

• 定位相关属性（position、left、top、right、bottom、z-index等）
• 背景相关属性（background-color、background-image等）
• 表格布局属性（table-layout、border-collapse、caption-side等）
• 盒模型相关属性（width、height、padding、border、margin等）
• 浮动相关属性（float、clear等）
• 其他一些属性（display、vertical-align、overflow、clip等）

16、vw/vh、em、rem、px的区别？

1rem=10px、1.2rem=12px、1.4rem=14px、1.6rem=16px;

我们需要在css中的 body 选择器中声明font-size= 62.5%，这就使 em 值变为 16px*62.5% = 10px

• px：px表示像素，就是呈现在我们显示器上的一个小点，每个像素点都是等同大小的
• em：em是相对长度单位，相当于当前对象内文本的字体尺寸，12px=1.2em 10px = 1em
• rem：rem相对单位，相对于只是HTML根元素font-size的值，1rem=10px、1.2rem=12px、1.4rem=14px、1.6rem=16px;
• vw/vh：根据窗口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽度，vw/vh始终针对的是窗口的宽高，pc端中指的是浏览器的可视区域，移动端指的就是布局视口

17、css中隐藏元素的方式以及区别？

• display: none: 这个属性可以让元素完全不可见，同时也不占用页面布局空间。相当于该元素已经被移除了一样，但是会影响 HTML 结构。
• visibility: hidden: 这个属性仅仅将元素隐藏，但其占据着其在文档流中的位置，而且依然会响应事件（即点击等行为），且在屏幕阅读器中也能访问到该元素。使用此属性可以使元素不消失并占据位置，但该元素仍然影响文档流。
• opacity: 0: 这个属性将元素透明度设置为零，使其完全不可见，但它占据着页面空间，也响应事件。该技术可以过渡动画配合使用，创造出逐渐消失或显示的效果。
• height: 0; width: 0; overflow: hidden;: 这个属性可以隐藏元素，并且不占用页面空间。该技术通常用于隐藏不希望用户看到的元素，例如触发某些功能所需的输入框。
• position：absolute；将元素移除可视区域，元素不可见，不影响页面的布局

18、css预编译器有哪些？

CSS预编译器是一种能够将类似于Sass、Less、Stylus等语言的源代码转化为标准CSS代码的工具。以下是一些常见的CSS预编译器：

1. Sass: Sass是比较流行的CSS预处理器之一，它支持变量、嵌套规则、Mixin及继承等功能，并且可以通过命令行或者Gulp、Grunt等构建工具进行编译。使用$来定义变量
2. Less: Less是一种比较简洁的CSS预处理器，与Sass相比，它提供了更少的功能和更加灵活的API。同时，Less也可以通过命令行或者构建工具进行编译。使用@来定义变量
3. Stylus: Stylus是另外一种比较先进的CSS预处理器，与Sass和Less不同的地方，在于它使用的是缩进式语法。同时，Stylus也支持变量、mixin等功能，并且可以通过命令行或者构建工具进行编译。
4. PostCSS: PostCSS是一款以插件为基础的CSS处理工具，它并不像其他CSS预处理器那样提供自己独特的语法，而是允许开发者通过插件来对CSS进行处理。PostCSS可以用于自动添加浏览器前缀、优化代码结构等操作，同时还可以支持类似于Sass和Less的一些特性，比如变量、嵌套规则等。

19、如何让chrome浏览器支持小于12px的文字,方式有哪些？

Chrome浏览器默认情况下不支持小于12px的字体大小，这是因为浏览器默认的最小字体大小为12px。但是，我们可以通过以下几种方式来解决这个问题：

1. 使用像素单位的小数值：可以使用小数值来设置字体大小，例如font-size: 11.5px;。这种方式可以在Chrome浏览器中正常显示小于12px的字体大小，但是在其他浏览器中可能会出现问题。
2. 使用em或rem单位：使用em或rem单位来设置字体大小，例如font-size: 0.8em;。这种方式可以在Chrome浏览器中正常显示小于12px的字体大小，并且在其他浏览器中也可以正常显示。
3. 使用transform属性：使用transform属性来缩小字体大小，例如transform: scale(0.8);。这种方式可以在Chrome浏览器中正常显示小于12px的字体大小，但是可能会影响字体的清晰度。

20、HTML中行内标签、行内块标签、块标签分别有哪些？

HTML中的标签可以分为行级元素、行内块元素和块级元素。

行级元素：

1. a（超链接）
2. b（文本加粗）
3. i（斜体）
4. img（图像）
5. input（表单输入）
6. label（表单标签）
7. select（下拉列表框）
8. span（行内文本容器）
9. textarea（文本输入控件）

行内块元素：

1. button（按钮）
2. img（图像）
3. input（表单输入）
4. label（表单标签）
5. select（下拉列表框）
6. textarea（文本输入控件）

块级元素：

1. div（通用块容器）
2. form（表单）
3. h1~h6（标题）
4. hr（水平线）
5. ol（有序列表）
6. p（段落）
7. pre（预定义文本格式）
8. table（表格）
9. ul（无序列表）

21、什么是css精灵图（css sprite）？

CSS精灵图（CSS Sprites）是一种在网页上加载图片的优化技术，它将多个小图标或背景图像合并成一张大图片，然后通过CSS的background-position来控制显示的位置。使用CSS精灵图可以减少HTTP请求次数，提高页面性能和加载速度。

具体实现步骤如下：

1. 将所有用到的小图标或背景图像都合并成一张大图。
2. 在CSS中为每个小图片设置background-position属性，使其对应到精灵图的相应位置。
3. 在需要使用小图片或背景图像的地方设置对应的CSS类名，以及height、width、background-image和background-position等属性。

使用CSS精灵图还可以防止图像重复下载、减少服务器负担，提高用户访问速度，并且有助于网站制作SEO友好型。

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

sass通过$定义变量 less通过@定义变量，less中没有继承、混合层、mixin概念，sass有继承的关系，sass功能强大。stylus语法不同，通过严格缩进来控制代码格式，没有花括号，也没有冒号。

23、什么是渐进增强和优雅降级？

• 优雅降级是指在“先设计完整，在逐步取消”的思想基础上，使用先进技术实现某些网站的效果，同时增加对低版本浏览器或错误显示的容错处理，使旧式的浏览器用户仍然能够得到基本的页面内容与访问体验。
• 优雅降级的目的是确保最终呈现的结果是完整可用的，在高级的浏览器中可以展示更多的特性，而在低级的浏览器中则可以通过降低效果来优化用户体验
• 渐进增强是指从基本到高级，从低版本的浏览器到更先进的浏览器，从功能最基础的要求到大众需求实现网页功能的一个前进策略，也就是说，渐进增强的设计模式是以底部-支持所有浏览器为基础，不断添加新的样式与交互特性，这样就是可以确保网站在任何情况下都可以具有基本的可用性，并且尽可能的利用浏览器所提供的先进功能，使得用户在使用较高级浏览器时，可以得到额外的增强体验

24、normalize.css和reset.css有什么区别？

normalize.css和reset.css都是用于网页样式重置的CSS文件，它们的目的是解决不同浏览器之间的渲染差异，并提供一致性预设值。虽然它们都具有相似的功能，但是它们的实现方式和适用范围存在一些区别：

1. 目标不同：

• normalize.css 考虑修复跨浏览器兼容性问题，提供了一些合理的默认样式，并保持了一些常见元素的一致性。
• reset.css 倾向于彻底清除所有浏览器的默认样式，并使样式重新从基本值开始编写，以确保最大的自定义和控制。

1. 样式范围不同：

• normalize.css 细化了标签样式和文本排版的一些细节。它并没有尝试覆盖所有类型的HTML元素，默认并不解决每个 element 的样式问题。
• reset.css 完全覆盖了大多数html标签的样式，包括表格、表单等。

1. 依赖关系不同：

• normalize.css 旨在与您的现有CSS代码集成。要使用normalize.css，您需要将它作为其他CSS文件的前缀引入。
• reset.css 可以独立使用，因为它包含所有必需的 CSS 代码，以将样式设置为基本值。

需要注意的是，虽然 normalize.css 有其默认的样式设置，但这并不意味着它会将所有 element 都变成相同的外观。而 reset.css 会严格统一所有 element 的 display 属性及默认值。因此根据具体的应用场景和需求，选择使用哪一个 CSS 文件应该斟酌清楚。

25、css中定位的方式以及应用场景？

在CSS中，常用的定位方式有以下三种：

1. 静态定位（position: static） 静态定位是默认的定位方式，元素会根据文档流进行排列。无法通过top、bottom、left、right来进行重新定位。
2. 相对定位（position: relative） 相对定位不会改变文档流，但是可以通过top、bottom、left、right的值进行位置上的微调。相对定位可以用于实现图片的微调，以及给不同层叠等级的元素设置基准位置。
3. 绝对定位（position: absolute） 绝对定位元素不会占用文档流空间，而是相对于最近的已定位祖先元素（如果没有已定位祖先元素，则相对于body）进行定位。绝对定位主要适用于元素需要脱离文档流并进行精确定位的场景，比如弹出框、下拉菜单等。

此外还有一种定位方式——固定定位，它和绝对定位类似，但是它的定位不随着页面滚动而改变，通常用于实现固定的导航栏和其他元素。

26、当使用一个div（块元素）去包裹一个图片时候，会产生什么问题？

• 会产生1px间隙
• 比实际需要多增加一层HTML标签的嵌套，使得HTML结构不够简洁明了。
• 由于div是一个块级元素，它默认会占据一整行的空间，因此，如果没有设置合适的宽度属性，这个div可能会比图片本身更宽一些，从而导致页面显示出现一些不必要的空白区域。
• 如果想要让被包裹的图片与其他元素的对齐方式（如文字基线、顶部或底部）保持一致，则还需要显式地为div设置 vertical-align 属性。否则，可能会导致该图片在垂直方向上无法准确对齐，造成页面布局上的不美观。

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

• rgba() 是一种CSS颜色值表示方法，可以在其中指定红、绿、蓝三个通道的颜色值以及透明度。通过调整透明度值来实现元素的透明效果，仅影响元素的颜色或背景色，不影响元素内的其他内容的透明度。
• opacity 是CSS属性，用于设置元素的整体透明度。它会影响元素以及元素内的所有内容的透明度，包括文本、图像等。设置元素的透明度会影响整个元素及其内容的可见性。
• rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，
• 而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

28、什么是设备像素？什么是设备独立像素？

设备像素（Device Pixel）是由显示器或屏幕物理像素产生的点，它是组成设备屏幕显示内容的最小单位，实际上是显示器中能发光的一个个小点。

设备独立像素（Device Independent Pixel），也称为逻辑像素或密度无关像素，是一个抽象的单位，用来描述在不同分辨率的显示设备上所呈现的图形元素大小，与具体的设备硬件或像素密度无关。

通俗地讲，在设计页面时，一般会以设备独立像素作为基础单位进行设计，即基于 CSS 的像素来设置页面元素的大小和位置，这样可以使得元素在各种设备屏幕上保持相应的尺寸比例。而对于不同分辨率和像素密度的设备，浏览器通过计算出每个设备像素包含多少个设备独立像素，并将CSS像素缩放到合适的大小进行页面渲染。

29、image标签得title和alt属性有什么区别？

在HTML的<img>标签中，title和alt属性都是用于提供关于图像的文字说明，但它们有不同的作用和用途。

1、alt属性（替代文本）：alt属性是标签中应当提供的必需属性之一。它用于指定在图像无法加载时显示的替代文本。alt属性对于以下情况非常重要：

• 当图像无法加载时，屏幕阅读器或其他辅助技术可以读出alt属性中的文本，使用户了解图像的内容和意义；
• 搜索引擎可以根据alt属性中的文本来理解图像的内容，并将其纳入搜索结果；
• 它还可以帮助视觉障碍用户了解页面中的图像信息，提高可访问性。

示例：<img src="image.jpg" alt="一只狗的照片">

2、title属性（提示文本）：title属性是一个可选属性，用于提供当用户将鼠标悬停在图像上时显示的工具提示文本。它主要用于提供附加的补充信息或描述，而不是代替文本。

• 当用户将鼠标悬停在图像上时，浏览器会显示title属性的内容，为用户提供更多的图像信息或解释；
• 它可以用于增强用户体验，为用户提供与图像相关的附加说明。

示例：<img src="image.jpg" alt="一只狗的照片" title="这是我家的可爱狗狗">

总结：

• alt属性是必需的、用于指定替代文本，当图像无法加载时会显示。它对于可访问性和搜索引擎优化非常重要。
• title属性是可选的、用于提供悬停提示文本，提供附加的补充信息或描述，以增加用户体验。

30、浏览器的内核有哪些？

以下是一些常见的浏览器内核：

1. Trident（IE 内核）：由微软开发，用于 Internet Explorer 浏览器。
2. Gecko：由 Mozilla 基金会开发，用于 Firefox 浏览器和其他 Mozilla 产品。
3. WebKit：最初由苹果公司开发，现已成为开源项目。多个浏览器使用了 WebKit 内核，例如 Safari、Google Chrome 的早期版本等。
4. Blink：由 Google 开发，基于 WebKit 内核进行优化，并在其后续版本中取代了 WebKit 内核。目前主要用于 Google Chrome 和 Opera 浏览器。
5. Chromium：也是由 Google 开发，是一个开源项目，是 Google Chrome 浏览器的基础。它基于 Blink 内核，并具有与 Chrome 相似的特性。

需要注意的是，此列表只列出了一些常见的浏览器内核，而且随着技术的发展和浏览器的更新迭代，内核的名称和版本也可能有所变动。

31、五大浏览器所对应的内核？

1. Internet Explorer（IE）：Trident 内核
   • Trident 是由微软开发的浏览器内核，用于 Internet Explorer 浏览器。
2. Mozilla Firefox：Gecko 内核
   • Gecko 是由 Mozilla 基金会开发的浏览器内核，用于 Firefox 浏览器和其他基于 Mozilla 的浏览器。
3. Google Chrome：Blink 内核（前身为 WebKit）
   • Blink 是由 Google 开发的浏览器内核，最初基于 WebKit 内核，后来分离出来成为独立的内核，目前用于 Google Chrome 和 Opera 浏览器。
4. Safari：WebKit 内核
   • WebKit 是由苹果公司开发的浏览器内核，用于 Safari 浏览器以及 iOS 上的浏览器。
5. Microsoft Edge（新版）：Blink 内核（前身为 EdgeHTML）
   • 最新版的 Microsoft Edge 采用了 Blink 内核，而旧版 Microsoft Edge 使用的是自有的 EdgeHTML 内核。