前端开发面试题——CSS部分

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

标准的 CSS 盒子模型是用来描述 HTML 元素在页面布局中的尺寸和定位的模型。它包含内容区域、内边距、边框和外边距四个部分，这些部分构成了一个矩形盒子。

标准的 CSS 盒子模型的各个部分如下：

1. 内容区域（Content）：指元素的实际内容，例如文本、图像等。
2. 内边距（Padding）：指内容区域与边框之间的空白区域。可以通过设置 padding 属性来调整内边距的大小。
3. 边框（Border）：指围绕内容和内边距的线条。可以通过设置 border 属性来定义边框的样式、宽度和颜色。
4. 外边距（Margin）：指盒子与其他元素之间的空白区域。可以通过设置 margin 属性来调整外边距的大小。

低版本的 Internet Explorer（IE）使用的是 IE 盒子模型，它在标准的 CSS 盒子模型上有一些不同之处：

• IE 盒子模型将元素的宽度和高度计算为内容区域、内边距和边框的总和。也就是说，指定的宽度和高度不包括内边距和边框。
• 在 IE 盒子模型中，设置的宽度和高度属性值只包含内容区域的大小，并不包括内边距和边框。而在标准盒子模型中，设置的宽度和高度属性值包括了内容区域、内边距和边框的总和。

为了解决低版本 IE 盒子模型的问题，可以通过使用 CSS 的 box-sizing 属性来指定元素的盒子模型类型。将 box-sizing 属性设置为 border-box 可以使元素的宽度和高度包括内边距和边框，与标准盒子模型一致。例如：

.box { box-sizing: border-box; }

上述代码将 .box 元素的盒子模型类型设置为 border-box，使其在所有浏览器中采用标准的 CSS 盒子模型，从而统一尺寸计算方式。

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

CSS 选择符用于选择要样式化的 HTML 元素，常见的 CSS 选择符包括：

1. 元素选择符（Element Selector）：通过元素的标签名称进行选择，例如 p 选择所有 <p> 段落元素。
2. 类选择符（Class Selector）：通过类名选择元素，以 . 开头，例如 .my-class 选择所有具有 my-class 类的元素。
3. ID 选择符（ID Selector）：通过元素的 ID 进行选择，以 # 开头，例如 #my-id 选择具有 my-id ID 的元素。
4. 后代选择符（Descendant Selector）：选择某个元素的后代元素，用空格分隔，例如 div p 选择 <div> 元素内的所有 <p> 元素。
5. 子元素选择符（Child Selector）：选择某个元素的直接子元素，使用 > 符号，例如 ul > li 选择 <ul> 元素内的所有直接子 <li> 元素。
6. 相邻兄弟选择符（Adjacent Sibling Selector）：选择紧接在另一个元素后的元素，使用 + 符号，例如 h2 + p 选择紧跟在 <h2> 标题后的 <p> 段落元素。
7. 通用选择符（Universal Selector）：使用 * 表示选择所有元素。
8. 属性选择符（Attribute Selector）：通过元素的属性值进行选择，例如 [type="text"] 选择所有 type 属性为 text 的元素。
9. 伪类选择符（Pseudo-Class Selector）：表示元素的特殊状态，例如 :hover 表示鼠标悬停状态。

有些 CSS 属性可以被继承到子元素中，从而使子元素继承父元素的样式。常见可以继承的 CSS 属性包括：

1. 字体相关属性：如 font-family、font-size、font-weight 等。
2. 文本相关属性：如 color、line-height、text-align 等。
3. 列表相关属性：如 list-style-type、list-style-image 等。
4. 链接相关属性：如 text-decoration、color 等。
5. 表格相关属性：如 border-collapse、border-spacing 等。
6. 一些布局属性：如 display、visibility 等。

并非所有 CSS 属性都可以被继承，例如 background、border、margin、padding 等属性通常不会被继承。

三、CSS优先级算法如何计算？

在 CSS 样式表中，当多个规则应用到同一个元素时，需要根据优先级算法来确定最终应用的样式。CSS 优先级算法是根据规则的特定性和重要性来计算的，通常是通过以下方式确定优先级：

1. !important 优先级：具有 !important 声明的样式具有最高优先级，将会覆盖其他所有规则。
2. 行内样式优先级：在 HTML 元素的 style 属性中直接定义的样式具有更高的优先级。
3. ID 选择符优先级：ID 选择符的特定性比较高，比类选择符和元素选择符的优先级要高。
4. 类选择符、属性选择符、伪类选择符优先级：这些选择符的特定性逐渐降低。
5. 元素选择符、伪元素选择符优先级：元素选择符的特定性最低。

根据上述规则，如果有多个规则应用到同一个元素，系统会按照上述顺序逐步比较它们的特定性，以确定最终应用的样式。

具体的计算方法为：将每个规则的特定性表示为一个四位数（a, b, c, d），其中各位数分别代表 !important、ID 选择符、类选择符、元素选择符等的数量。然后将这些数字连接起来，形成一个十进制数，特定性值越高的规则优先级越高。在特定性相同的情况下，后面定义的规则会覆盖先前定义的规则。

CSS 样式的优先级顺序是：!important > 行内样式 > ID 选择符 > 类选择符、属性选择符、伪类选择符 > 元素选择符、伪元素选择符。在实际应用中，了解和正确使用 CSS 的优先级规则可以帮助开发者有效地控制样式的应用顺序，避免样式冲突和提高开发效率。

四、CSS3新增伪类有那些？

CSS3 引入了许多新的伪类，用于选择元素的特定状态或位置。以下是一些 CSS3 新增的常见伪类：

1. :nth-child(n)：选择父元素的第 n 个子元素，可以使用公式、关键字或者数字来指定匹配的子元素。
2. :nth-last-child(n)：选择父元素的倒数第 n 个子元素。
3. :nth-of-type(n)：选择父元素中指定类型的第 n 个子元素。
4. :nth-last-of-type(n)：选择父元素中指定类型的倒数第 n 个子元素。
5. :first-child：选择作为其父元素的第一个子元素的元素。
6. :last-child：选择作为其父元素的最后一个子元素的元素。
7. :first-of-type：选择父元素中的第一个指定类型的子元素。
8. :last-of-type：选择父元素中的最后一个指定类型的子元素。
9. :only-child：选择作为其父元素中唯一的子元素的元素。
10. :only-of-type：选择父元素中唯一的指定类型的子元素。
11. :empty：选择没有任何子元素的元素。
12. :not(selector)：选择不匹配给定选择器的元素。
13. :target：选择当前活动的目标元素，通常与锚点链接（<a> 标签的 href 属性）一起使用。
14. :checked：选择被选中的表单元素，如复选框和单选按钮。
15. :enabled：选择可用的表单元素。
16. :disabled：选择禁用的表单元素。
17. :hover：选择鼠标悬停的元素。
18. :focus：选择获取焦点的元素。

这些伪类可以根据元素的状态或位置进行选择，使得开发者能够更精确地应用样式或实现交互效果。需要注意的是，不同的伪类适用于不同类型的元素，具体的使用方式可以参考 CSS3 规范或相关文档。

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

可以使用不同的方法来实现不同类型元素的居中效果：

1. 居中一个块级元素（div）：

   • 使用 margin: 0 auto; 来水平居中一个具有固定宽度的块级元素。
   • 设置父元素的 text-align: center;，并将子元素设置为 display: inline-block;，以实现水平居中。

2. 居中一个浮动元素：

   • 可以使用 Flexbox 布局，将父元素设置为 display: flex; justify-content: center; align-items: center; 来实现水平和垂直居中。
   • 使用绝对定位，并结合 top: 50%; left: 50%; transform: translate(-50%, -50%); 来使浮动元素相对于父元素水平垂直居中。

3. 居中一个绝对定位的元素：

   • 使用绝对定位，结合 top: 50%; left: 50%; transform: translate(-50%, -50%); 来使绝对定位的元素相对于其包含块水平垂直居中。
   • 如果知道绝对定位元素的宽度和高度，也可以通过设置 top: 50%; left: 50%; margin-top: -元素高度的一半; margin-left: -元素宽度的一半; 来实现居中效果。

具体选择哪种方法取决于布局需求和兼容性要求。在实际应用中，可以根据具体情况选择最适合的居中方式来实现页面元素的居中效果。

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

display 属性决定了元素如何在页面中进行布局和显示。以下是常见的 display 属性取值及其作用：

1. block：

   • 元素呈块级显示，会独占一行，并且可以设置宽度、高度、内外边距。
   • 常用于 <div>、<p>、<h1>-<h6> 等元素。

2. inline：

   • 元素呈行内显示，不会独占一行，只占据内容所需的空间。
   • 不能设置宽度、高度，但可以设置水平内外边距。
   • 常用于 <span>、<a>、<strong> 等元素。

3. inline-block：

   • 元素呈行内块级显示，不会独占一行，但可以设置宽度、高度、内外边距。
   • 可以看作是行内元素和块级元素的结合。
   • 常用于创建水平排列的块级元素。

4. none：

   • 元素不显示，即隐藏元素并且不占据页面布局空间。
   • 元素被隐藏，但仍然存在于文档中。

5. flex：

   • 使用 Flexbox 布局，允许灵活的盒子模型排列布局。
   • 可通过设置子元素的 flex 属性来控制子元素的伸缩性和排列方式。

6. grid：

   • 使用 Grid 布局，允许将页面划分为行和列，实现复杂的布局。
   • 可以通过设置网格容器和网格项来创建灵活的布局。

7. table、table-cell、table-row：

   • 模拟表格布局，将元素呈现为表格的单元格、行或者表格本身。

8. list-item：

   • 将元素呈现为列表项。

9. inherit：

   • 继承父元素的 display 属性值。

这些 display 属性取值可以根据需要来选择，用于控制元素在页面中的布局方式和显示效果，帮助开发者实现各种不同的布局需求。

七、position的值relative和absolute定位原点是？

position 属性的取值包括 relative 和 absolute，它们分别对应不同的定位方式和原点：

1. relative 定位：

   • 当元素设置为 position: relative; 时，它相对于其自身在文档流中的初始位置进行定位。
   • 元素保持其文档流中的位置，并且可以通过 top、right、bottom、left 属性来调整元素相对于其初始位置的偏移量。
   • 这意味着即使使用了 position: relative;，元素仍然会占据其原本在文档流中的空间，只是在视觉上发生偏移。

2. absolute 定位：

   • 当元素设置为 position: absolute; 时，它相对于最近的已定位祖先元素（父级元素或更高层级的祖先元素）进行定位。
   • 如果没有已定位的祖先元素，则会相对于 <html> 元素进行定位。
   • 绝对定位的元素脱离了文档流，不再占据原本位置的空间，并且可以通过 top、right、bottom、left 属性来精确地指定元素相对于其包含块的偏移位置。

position: relative; 会相对于元素在文档流中的初始位置进行定位，而 position: absolute; 则会相对于最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于 <html> 元素进行定位。

八、CSS3有哪些新特性？

CSS3 引入了许多新特性，包括但不限于以下内容：

1. 选择器：CSS3 引入了一些新的选择器，例如属性选择器（Attribute Selectors）、通用兄弟选择器（General Sibling Selectors）、子结构伪类选择器（Structural Pseudo-classes）等，使得选择元素更加灵活和精确。

2. 盒模型：引入了 box-sizing 属性，可以更好地控制盒模型的尺寸计算方式。

3. 边框：引入了圆角边框（Border Radius）、阴影效果（Box Shadow）、边框图片（Border Image）、多重边框（Multiple Borders）等新特性，使得边框样式更加丰富多彩。

4. 颜色：引入了 RGBA 颜色表示法、HSL 和 HSLA 颜色表示法，使得颜色的表达更加灵活，并且支持透明度设置。

5. 背景：新增了多背景图层（Multiple Backgrounds）、背景大小调整（Background Size）、渐变背景（Gradients）等功能，丰富了对元素背景的控制。

6. 文字：新增了文字阴影（Text Shadow）、文字描边（Text Stroke）、换行处理（Word-wrap、Overflow-wrap）、文字溢出省略号（Text Overflow）等特性。

7. 布局：引入了弹性盒子布局（Flexbox Layout）、网格布局（Grid Layout），使得页面布局更加灵活和便捷。

8. 动画和过渡：引入了 CSS 动画（CSS Animations）和 CSS 过渡（CSS Transitions），实现元素的动态效果更加简单和高效。

9. 媒体查询：引入了响应式设计的基础，可以根据不同的媒体类型和特性来应用不同的样式。

10. 多列布局：新增了多列布局（Multiple Column Layout），使得页面内容可以更灵活地以多列方式呈现。

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

CSS3 的 Flexbox 是一种用于页面布局的新模型，它旨在提供一种更加灵活的方式来排列、对齐和分布元素，特别适用于响应式设计和构建灵活的页面布局。

Flexbox 的核心概念包括以下几个部分：

1. 容器与项目：使用 Flexbox 进行布局时，需要将布局的父元素设置为弹性容器（flex container），而其内部的子元素则成为弹性项目（flex items）。

2. 主轴与交叉轴：在 Flexbox 布局中，有一个主轴（main axis）和一个交叉轴（cross axis），它们决定了元素的排列和对齐方式。主轴通常是水平方向或者垂直方向，而交叉轴则是与主轴垂直的方向。

3. 弹性布局属性：通过设置弹性容器和弹性项目的属性，可以控制元素在主轴和交叉轴上的排列、对齐和调整空间分配。

适用场景：

• 响应式设计：Flexbox 可以很好地应用于响应式设计，使得页面布局能够根据不同设备和屏幕尺寸进行灵活调整。
• 导航菜单：用于创建水平或垂直导航菜单，实现菜单项的自动伸缩和自适应布局。
• 网格系统：可以用 Flexbox 来构建灵活的网格系统，实现网页内容的等分布局和自适应调整。
• 居中对齐：Flexbox 提供了简单而强大的方法来实现元素在容器中的水平居中和垂直居中对齐。
• 流式布局：用于创建流式布局，实现内容的自动换行和自适应调整，特别适合移动端页面设计。

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

使用纯 CSS 创建一个三角形的原理是利用 CSS 的边框特性和透明度。下面是一种常见的方法：

.triangle { 
   width: 0; 
   height: 0; 
   border-left: 50px solid transparent; 
   border-right: 50px solid transparent; 
   border-bottom: 100px solid #000; 
}

解释如下：

1. 设置元素的宽度和高度为 0，确保元素不占据任何实际空间。
2. 使用 border-left 和 border-right 设置两个透明的边框，使得左右两侧不显示边框。
3. 使用 border-bottom 设置一个有颜色的边框，作为三角形的底边。

通过调整 border-left 和 border-right 的宽度，以及 border-bottom 的颜色和高度，可以创建不同大小和颜色的三角形。

这种方法的原理是利用 CSS 的边框绘制功能，将元素的边框样式设置为三角形的形状，并通过调整边框的宽度和颜色来控制三角形的大小和颜色。

十一、css多列等高如何实现？

要实现 CSS 中多列等高的效果，可以借助 Flexbox 或者 Grid 布局来实现。以下是两种常见的方法：

使用 Flexbox 布局

.container { display: flex; } 
.column { 
    flex: 1; 
    margin: 0 10px; /* 可选：添加列之间的间距 */ 
    background-color: #f2f2f2; 
}

在这个例子中，.container 是包裹所有列的容器，设置为 display: flex，并且每个 .column 元素都被设置为 flex: 1，这样它们会平均地占据剩余空间，从而实现等高效果。

使用 Grid 布局

.container { 
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr; /* 可根据需要调整列数和宽度 */ 
    grid-gap: 10px; /* 可选：添加列之间的间距 */ 
} 
.column { background-color: #f2f2f2; }

在这个例子中，.container 使用了 Grid 布局，通过 grid-template-columns 来定义列数和宽度，然后使用 grid-gap 可以添加列之间的间距。由于 Grid 布局自动会使得列等高，所以无需额外操作。

无论是使用 Flexbox 还是 Grid 布局，都能够很方便地实现多列等高的效果，而且在响应式设计中也非常有用。

十二、一个满屏 品 字布局 如何设计?

要设计一个满屏的品字布局，可以使用绝对定位和百分比来实现。下面是一种实现方式：

HTML 结构：

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

CSS 样式：

.container { 
    position: relative; 
    height: 100vh; /* 设置容器高度为视口高度 */ 
} 
.top, .middle, .bottom { 
    position: absolute; 
    left: 0; 
    right: 0; 
} 
.top, .bottom { 
    height: 25%; /* 设置顶部和底部区域高度为容器高度的 25% */ 
} 
.middle { 
    top: 25%; /* 设置中间区域的上边距为容器高度的 25% */ 
    bottom: 25%; /* 设置中间区域的下边距为容器高度的 25% */ 
}

解释如下：

1. .container 容器使用相对定位，并设置高度为视口高度（100vh）。
2. .top, .middle, .bottom 三个区域都使用绝对定位，并占据整个容器的宽度（通过 left: 0; right: 0; 实现）。
3. .top, .bottom 区域的高度设置为容器高度的 25%，以保持等高布局。
4. .middle 区域通过设置上边距和下边距为容器高度的 25%，来保持等高布局。

这样设计的布局就是一个满屏的品字布局，顶部和底部区域的高度是固定的，中间区域会自动适应剩余空间。你可以根据实际需求调整高度和样式。

十三、经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？

常见的浏览器兼容性问题包括：

1. CSS 兼容性：不同浏览器对 CSS 属性的支持存在差异，可能导致样式显示不一致。
2. JavaScript 兼容性：不同浏览器对 JavaScript 的解释和实现也有差异，可能导致功能无法正常运行。
3. 布局兼容性：不同浏览器对盒模型、定位等布局属性的解释和渲染方式不同，可能导致布局错乱。
4. 事件兼容性：不同浏览器对事件模型的支持有所不同，可能导致事件处理出现问题。

针对这些兼容性问题，可以采取以下解决方法和常用技巧：

1. 使用 CSS Reset 或 Normalize：通过重置或规范化默认样式，使得不同浏览器的样式表现更一致。
2. 使用 Autoprefixer：自动添加 CSS3 前缀，确保不同浏览器对新特性的支持。
3. Feature Detection：使用 Modernizr 等工具进行特性检测，根据浏览器支持情况加载对应的 polyfill 或替代方案。
4. Flexbox 和 Grid 布局：使用 Flexbox 和 Grid 布局来替代传统的布局方法，能更好地处理不同浏览器的布局兼容性问题。
5. 事件绑定：优先使用事件委托（event delegation）而非直接绑定事件，确保跨浏览器兼容性。
6. IE Hack：针对老版本的 Internet Explorer 浏览器，可以使用特定的 CSS Hack 或条件注释进行兼容性处理，比如 <!--[if IE]> ... <![endif]-->。
7. 兼容性表格：参考 Can I Use 网站或 MDN 网站提供的兼容性表格，了解各个属性或方法在不同浏览器中的支持情况。

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

列表项（<li>）与列表项之间出现看不见的空白间隔通常是由 HTML 和 CSS 的布局方式引起的。这种间隔通常被称为“空白间隔 bug”或“空白间隔问题”。

这个问题的主要原因是 HTML 中的换行和空格符会被解释为文本内容，在一些情况下会导致浏览器渲染时产生额外的间隔。解决这个问题的方法包括：

1. 消除空格：将 <li> 标签直接连在一起，确保它们之间没有空格。

   <ul> <li>Item 1</li><li>Item 2</li><li>Item 3</li> </ul>

2. 使用负边距：通过设置负边距来抵消额外的间隔。

   li { margin-right: -4px; /* 通过负边距抵消间隔 */ }

3. 使用浮动：将 <li> 设置为浮动以消除间隔。

   li { float: left; /* 浮动列表项 */ }

4. 使用 Flexbox 布局：通过 Flexbox 布局来控制列表项之间的间隔。

   ul { display: flex; } li { margin-right: 0; /* 重置默认的间隔 */ }

5. 使用 Flexbox 或 Grid 布局的间隔属性：在 Flexbox 或 Grid 布局中，可以使用 gap 属性来控制子元素之间的间隔。

   ul { display: flex; gap: 0; /* 设置子元素之间的间隔为 0 */ }

以上方法中，使用负边距或浮动可能会引入其他布局问题，而使用 Flexbox 或 Grid 布局则是更加现代化和可靠的解决方案。选择合适的方法取决于具体的布局需求和兼容性考虑。

十五、为什么要初始化CSS样式?

初始化 CSS 样式是为了在不同的浏览器中保持一致的样式表现，避免一些默认样式对网页的影响。

每个浏览器都有自己的默认样式，这些样式可能会导致不同浏览器渲染同一个页面时出现差异，这也是为什么在开发 Web 应用程序时需要重置或标准化 CSS 样式的原因。通过初始化 CSS 样式可以确保所有浏览器都以相同的基础样式作为起点开始渲染页面。

CSS 初始化技术通常包括以下内容：

1. 设置元素盒模型的默认值：不同浏览器的元素盒模型默认值可能不同，通过设置所有元素的默认边距、内边距和边框为 0，以及宽度和高度为 auto，可以确保所有浏览器的元素盒模型行为一致。
2. 重置默认样式：不同浏览器可能会有自己的默认样式，比如链接、字体、列表等，通过重置这些默认样式，可以确保所有浏览器的样式表现一致。
3. 标准化样式：使用一些标准化样式，比如 Normalize.css 或 Reset.css，可以确保所有浏览器的样式表现更加一致，并且能够修复一些常见的浏览器兼容性问题。

初始化 CSS 样式应该在所有自定义样式之前进行，这样可以确保自定义样式不会被默认样式所影响。同时，在实际应用中，需要根据具体的项目情况进行选择和调整，以达到最佳的兼容性和效果。

十六、absolute的containing block计算方式跟正常流有什么不同？

绝对定位（absolute）元素的包含块（containing block）计算方式在某些情况下与正常流（normal flow）中元素的包含块计算方式有所不同。下面是它们之间的主要区别：

1. 正常流中元素的包含块：

   • 对于正常流（static、relative 定位）中的元素，其包含块通常是距离最近的块级祖先元素。
   • 如果没有块级祖先元素，则包含块是初始包含块（initial containing block），即视口（viewport）本身。

2. 绝对定位元素的包含块：

   • 对于绝对定位（absolute、fixed 定位）元素，其包含块的计算方式更加复杂。
   • 如果该元素的定位父级具有 position: relative、position: absolute 或 position: fixed 属性，则该父级元素就是该绝对定位元素的包含块。
   • 如果没有找到具有定位属性的父级元素，则绝对定位元素的包含块是初始包含块（initial containing block），即视口（viewport）本身。

绝对定位元素的包含块计算方式会根据其父级元素的定位属性而变化，而不像正常流元素那样简单地由距离最近的块级祖先元素确定。这种差异导致在处理绝对定位元素时需要更加注意其包含块的确定，以确保布局的正确性和一致性。

十七、CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？

visibility 属性用于控制元素的可见性，常见的属性值有 visible（默认值，元素可见）和 hidden（元素不可见但仍占据空间）。另外，visibility 属性还有一个不常见的属性值 collapse，主要用于表格元素中。

visibility: collapse 主要用于表格行（<tr>）或表格行组（<colgroup>）上，将其视为“折叠”（collapsed），即隐藏该行或行组，并且不占据任何空间。这个属性值在表格中主要用于隐藏表格中的某些行而不破坏表格结构。

然而，需要注意的是，visibility: collapse 在不同浏览器中的实现可能会有一些差异，尤其是在早期版本的浏览器中存在兼容性问题。具体的差异包括：

1. 在旧版本的 Internet Explorer 中：visibility: collapse 可能不会按照预期工作，可能会导致显示问题或布局错乱。

2. 在不同浏览器中：对于非表格元素（例如 <div>、<span> 等），visibility: collapse 可能会被忽略或表现不一致。

在使用 visibility: collapse 属性时，最好在目标浏览器中进行测试，以确保所需的效果能够正确显示。如果需要更广泛的兼容性，可以考虑使用其他方法来隐藏和展示元素，比如设置 display: none 来完全隐藏元素，或者使用 JavaScript 来动态控制元素的显示和隐藏状态。

十八、position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？

当 CSS 中的 position 属性与 display、margin collapse、overflow、float 等其他特性相互叠加时，它们会共同影响元素的定位、显示和布局。以下是它们相互叠加后可能产生的效果：

1. position 与 display 叠加：

   • 例如，当一个元素的 position 属性为 absolute 或 fixed 时，同时设置 display: inline 或 display: inline-block，这样会使元素以块级元素的方式进行定位，但仍保留行内元素的特性。

2. position 与 margin collapse 叠加：

   • 绝对定位（position: absolute、position: fixed）的元素不会参与垂直方向的 margin 折叠，因为它们脱离了文档流。
   • 浮动元素（float）也会破坏 margin 折叠，因此与浮动元素相邻的元素的 margin 不会与其相叠加。

3. position 与 overflow 叠加：

   • 当一个元素的 position 属性为 absolute 或 fixed 时，父元素如果设置了 overflow: hidden 或 overflow: auto，会创建一个新的包含块，限制绝对定位元素的显示范围。这可以用于创建一些特殊效果，比如模态框等。

4. position 与 float 叠加：

   • 当一个元素的 position 属性为 absolute 或 fixed 时，可以与浮动元素共存，但要注意可能需要手动控制元素的位置，避免重叠或覆盖问题。

当 position 与其他 CSS 特性叠加使用时，需要谨慎考虑各个属性之间的影响，以确保页面布局和显示效果符合设计要求。在开发过程中，通过实际测试和调试，可以更好地理解它们之间的相互作用，以达到预期的效果。

十九、对BFC规范(块级格式化上下文：block formatting context)的理解？

块级格式化上下文（Block Formatting Context，BFC）是 CSS 中一个重要的概念，它是用来描述页面上的块级盒子布局及其相互关系的一种机制。BFC 决定了块级盒子如何放置其子元素以及与其他元素的关系，它对于页面布局和元素定位起着重要的作用。

一个块级格式化上下文具有以下特点和行为：

1. 内部盒子的垂直布局：在同一个 BFC 中，盒子会根据标准的流动布局规则进行垂直摆放，不会发生重叠现象。

2. 边距重叠：在同一个 BFC 中，相邻盒子的垂直外边距可能会发生重叠。但是，不同 BFC 中的盒子的外边距不会发生重叠。

3. 包含浮动：BFC 可以包含浮动元素，在 BFC 内部，浮动元素的高度会被计算在内，不会导致父元素塌陷。

4. 清除浮动：当父元素创建 BFC 时，可以通过触发 BFC 的清除浮动机制来解决父元素高度塌陷的问题。

5. 阻止文字环绕：在 BFC 中，文本不会围绕浮动元素，而是会从浮动元素的下方开始排列。

创建 BFC 的方式包括：

• 根元素
• 浮动（float 不是 none）
• 绝对定位（position 为 absolute 或 fixed）
• 行内块（display 为 inline-block）
• 表格单元格（display 为 table-cell）
• 表格标题（display 为 table-caption）
• 匿名表格单元格（display 为 table, table-row, table-row-group, table-header-group, table-footer-group）
• 弹性盒子（display 为 flex 或 inline-flex）
• 网格布局容器（display 为 grid 或 inline-grid）

理解 BFC 对于掌握 CSS 布局和解决页面布局中的一些常见问题非常重要，比如外边距重叠、清除浮动、避免文字环绕等。通过合理地创建和利用 BFC，可以更好地控制页面布局，并解决一些常见的布局问题。

二十、CSS权重优先级是如何计算的？

当多个选择器作用于同一个元素时，它们的样式规则会根据特定的优先级顺序来确定最终生效的样式。CSS 的权重优先级是通过计算来确定的，通常以 "specificity"（具体性）和 "importance"（重要性）来衡量。

CSS 权重优先级的计算规则如下：

1. !important：具有 !important 声明的样式规则拥有最高优先级，无论其出现在样式表中的位置，都会覆盖其他规则。

2. 内联样式：直接在 HTML 元素的 style 属性中指定的样式拥有更高的优先级。

3. ID 选择器：ID 选择器的权重较高，每个 ID 选择器的权重为 100。

4. 类选择器、属性选择器和伪类：类选择器（如 .classname）、属性选择器（如 [type="text"]）和伪类（如 :hover）的权重相同，每个选择器的权重为 10。

5. 元素选择器和伪元素：元素选择器（如 div、p）和伪元素（如 ::before、::after）的权重最低，每个选择器的权重为 1。

当多个样式规则作用于同一个元素时，根据上述规则计算它们的权重，然后比较它们的权重值，权重值越高的规则优先级越高，将会被应用到元素上。

如果两个规则的权重值相同，则根据它们在样式表中的出现顺序来确定哪个规则生效，后定义的规则会覆盖先定义的规则。

理解 CSS 权重优先级的计算规则对于编写具有可维护性和可预测性的样式表非常重要。通过合理地使用选择器和权重，可以更好地控制样式的应用顺序，避免样式冲突，确保页面呈现出所期望的效果。

二十一、请解释一下为什么需要清除浮动？清除浮动的方式

浮动（float）是一种 CSS 布局技术，它可以让元素脱离标准文档流并向左或向右移动，直到碰到其容器边缘或另一个浮动元素。

在使用浮动布局时，可能会出现一些问题，例如父元素高度塌陷（被子元素撑开的高度不再适用于父元素）、元素位置错乱等。这时就需要使用清除浮动来解决问题。

清除浮动的主要作用是防止浮动元素对其他非浮动元素造成影响，从而达到页面布局的稳定和一致性。清除浮动可以通过多种方式实现，包括：

        1.使用 clear 属性：在浮动元素之后添加一个空元素，并将其设置为 clear:both，这样就可以强制该元素换行，并清除前面元素的浮动效果。

<div class="container"> 
    <div class="float-left">浮动内容</div> 
    <div class="clear-float"></div> 
</div>
.clear-float { clear: both; }

        2.使用 overflow 属性：将浮动元素的父元素设置为 overflow:hidden 或 overflow:auto，这样就可以触发 BFC 的机制，从而清除浮动效果。

<div class="container"> 
   <div class="float-left">浮动内容</div> 
</div> 
.container { overflow: hidden; }

        3.使用 BFC：将浮动元素的父元素设置为 BFC，可以通过添加 display: inline-block、display: table 或 display: flow-root 等样式来实现。

<div class="container"> 
    <div class="float-left">浮动内容</div> 
</div> 
.container { display: flow-root; }

清除浮动是 CSS 布局中非常重要的一部分，它可以保证页面布局的稳定性和一致性。在实际开发中，我们需要根据具体情况选择合适的清除浮动方式，并注意避免过度使用浮动布局，以免出现不必要的问题。

二十二、zoom:1的清楚浮动原理?

zoom: 1 是一种清除浮动的 hack 方式，它的原理是利用 IE 浏览器中特有的 "hasLayout" 属性来触发浏览器的布局模式。

在 IE 浏览器中，元素的 hasLayout 属性可以用来判断该元素是否要参与到布局计算中。当元素具有 hasLayout 属性时，IE 浏览器会为该元素创建一个独立的布局环境，并根据该元素的布局属性计算元素的位置和大小。

在使用 zoom: 1 清除浮动时，通常是将其应用于浮动元素的父元素上，例如：

<div class="parent"> 
    <div class="float"></div> 
    <div style="zoom: 1;"></div> 
</div>

这里通过在父元素上添加一个空 div，并将其设置 zoom: 1; 来触发其 hasLayout 属性。由于浮动元素的父元素现在具有了 hasLayout 属性，IE 浏览器会为该元素创建一个新的布局环境，从而解决了浮动元素引起的高度塌陷问题。

需要注意的是，zoom: 1 是一种 hack 方式，它只适用于 IE 浏览器，其他浏览器可能不支持或支持有限。另外，该方式存在一定的兼容性问题，因此在实际开发中建议使用更加规范和安全的浮动清除方式，如使用 overflow、::after 伪元素等。

二十三、移动端的布局用过媒体查询吗？

移动端开发中，使用媒体查询（Media Queries）是一种常见的技术，可以根据设备的特性（如屏幕宽度、设备方向等）来为不同的屏幕尺寸和设备类型定制样式。这样可以实现响应式布局，使网页在不同设备上都能有良好的显示效果。

媒体查询通常包含在 CSS 样式表中，通过在样式表中定义不同的媒体查询条件来应用不同的样式。以下是一个简单的示例：

/* 默认样式 */ 
body { font-size: 16px; } 
/* 在小屏幕（最大宽度为 600px）下的样式 */ 
@media only screen and (max-width: 600px) { 
    body { font-size: 14px; } 
} 
/* 在中等屏幕（宽度介于 601px 和 1024px 之间）下的样式 */ 
@media only screen and (min-width: 601px) and (max-width: 1024px) { 
    body { font-size: 18px; } 
}

上面的代码示例中，我们定义了三组样式：

1. 默认样式：适用于所有设备的默认样式，font-size 为 16px。
2. 小屏幕样式：当屏幕宽度小于或等于 600px 时，font-size 被设置为 14px。
3. 中等屏幕样式：当屏幕宽度介于 601px 和 1024px 之间时，font-size 被设置为 18px。

通过使用媒体查询，我们可以根据不同的屏幕尺寸为网页提供不同的布局和样式，从而使页面在手机、平板、桌面等不同设备上呈现出最佳效果。媒体查询的条件还可以包括设备方向（landscape 或 portrait）、分辨率（min-resolution、max-resolution）等，可以根据实际需求进行灵活设置。在移动端开发中，合理运用媒体查询可以提升用户体验，增强网页的适应性和可访问性。

二十四、使用 CSS 预处理器吗？喜欢那个？

CSS 预处理器是一种将类似编程语言的语法（如变量、嵌套规则、函数、混合等）引入到普通 CSS 中的工具。通过使用 CSS 预处理器，开发者可以更加高效地编写和维护 CSS 代码。

常见的 CSS 预处理器包括 Sass、Less 和 Stylus 等。它们都提供了类似编程语言的功能，并且能够帮助开发者更好地组织和管理样式表。

选择使用哪种 CSS 预处理器通常取决于个人偏好和项目需求。下面简要介绍一下这几种预处理器：

1. Sass：Sass 是最流行的 CSS 预处理器之一，具有强大的功能和活跃的社区支持。它支持变量、嵌套规则、混合、继承等特性，并且可以通过 Sass 的语法来提高 CSS 的可维护性和可重用性。

2. Less：Less 是另一种常用的 CSS 预处理器，与 Sass 类似，支持变量、嵌套规则、混合等功能。Less 的语法相对简单易懂，对于一些初学者来说可能更容易上手。

3. Stylus：Stylus 是一种基于 Node.js 的 CSS 预处理器，它具有比较简洁的语法和灵活的特性。Stylus 支持缩进风格的语法，可以省略大括号和分号，使得代码看起来更加简洁。

二十五、CSS优化、提高性能的方法有哪些？

优化 CSS 并提高性能的方法：

1. 合并和压缩CSS文件：将多个 CSS 文件合并成一个文件，并对该文件进行压缩可以减少 HTTP 请求次数和文件大小，从而加快页面加载速度。

2. 使用 CSS 预处理器：如 Sass、Less 或 Stylus，可以帮助编写更干净、模块化的 CSS 代码，减少冗余代码，提高代码的可维护性和可读性。

3. 避免使用过多的嵌套：过深的嵌套会增加选择器的特异性，导致样式匹配变慢，应尽量减少嵌套的层级。

4. 精简选择器：尽量使用简洁的选择器，避免过度复杂的选择器，以提高样式匹配的效率。

5. 使用字体图标或雪碧图：将多个小图标合并成一张雪碧图，或者使用字体图标替代图片，可以减少 HTTP 请求，提升性能。

6. 避免使用过多!important：过多使用 !important 可能导致样式覆盖混乱，应尽量避免使用它。

7. 优化图片和背景图：对图片进行压缩和优化，选择合适的格式（如 WebP），以减少文件大小和加载时间。

8. 使用缓存机制：通过设置合适的缓存策略（如缓存控制、ETag、Expires 等），可以减少重复下载 CSS 文件的次数。

9. 按需加载CSS：根据页面的实际需求，按需加载不同的 CSS 文件，避免一次性加载所有样式。

10. 使用 CSS 动画代替 JavaScript 动画：CSS 动画比 JavaScript 动画性能更好，可以减少 CPU 的负荷。

二十六、浏览器是怎样解析CSS选择器的？

浏览器在解析 CSS 选择器时会按照特定的规则和步骤进行，以下是浏览器解析 CSS 选择器的一般流程：

1. 选择器解析：浏览器首先会解析 CSS 文件中的选择器，找到与当前元素匹配的所有规则。

2. 计算特异性（Specificity）：对于匹配的多个规则，浏览器会根据特异性来确定哪个规则具有更高的优先级。特异性通常由选择器的类型、类、ID 和内联样式等因素决定。

3. 层叠规则（Cascading Rules）：如果多个规则具有相同的特异性，则会根据它们在样式表中的位置来决定哪个规则应用于元素，后面的规则会覆盖前面的规则。

4. 继承规则（Inheritance Rules）：对于未设置样式的属性，浏览器会根据继承规则从父元素继承样式。

5. 应用样式：经过上述步骤确定最终的样式规则后，浏览器会将这些样式应用到相应的元素上，完成样式的渲染。

浏览器解析 CSS 选择器的过程是按照选择器匹配、特异性计算、层叠规则和继承规则依次进行的。通过这个过程，浏览器能够正确地应用样式并渲染网页内容，实现页面的美化和布局。

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

网页中，通常建议使用偶数号字体（如 14px、16px 等），而不是奇数号字体（如 15px、17px 等）。这是因为奇数号字体在某些情况下可能导致呈现效果不佳，以下是一些原因：

1. 像素对齐：在计算机屏幕上，像素是最小的显示单位，而奇数号字体可能无法完全像素对齐，导致模糊或不清晰的文本显示效果。

2. 浏览器渲染差异：不同浏览器在处理奇数号字体的渲染方式可能略有差异，使用偶数号字体可以更好地保持一致的显示效果。

3. 易读性：一些研究表明，偶数号字体相对于奇数号字体在阅读体验上更具有可读性和舒适性。

4. 响应式设计：在响应式设计中，使用偶数号字体可以更好地适应不同屏幕尺寸和分辨率，确保文本在各种设备上都有良好的显示效果。

为了确保网页文本的清晰度、一致性和易读性，建议在网页中使用偶数号字体大小。当然，具体选择字体大小还应根据设计需求、内容布局和用户体验来进行调整。

二十八、margin和padding分别适合什么场景使用？

margin 和 padding 是 CSS 中用于控制元素周围空白区域的属性，它们在不同场景下有不同的用途和适用性。

Margin（外边距）：

• 用于控制元素与其他元素之间的距离。
• 可以通过设置正值或负值来调整元素的位置。
• 常用于创建元素之间的间隔、边框的外部间距、居中对齐等布局效果。
• 在响应式设计中，可以利用 margin 实现自适应的间距调整。

Padding（内边距）：

• 用于控制元素内容与其边框之间的距离。
• 会影响元素的大小和尺寸。
• 常用于设置元素的内部间距、边框的内部空白、文本与边界的距离等布局效果。
• 可以用于创建按钮、卡片等具有内部填充的元素。

margin 用于控制元素与其他元素之间的距离，而 padding 用于控制元素内容与其边框之间的距离。它们在网页布局和设计中起着不同的作用，根据具体的需求和效果要求来选择使用哪个属性。

二十九、抽离样式模块怎么写，说出思路，有无实践经验？

抽离样式模块是指将公共的 CSS 样式提取出来，单独创建为一个样式文件，并在需要使用这些样式的页面中引入该文件。通过这种方式，可以避免重复编写相同的样式代码，提高代码复用性和可维护性。

下面是抽离样式模块的一般思路：

1. 确定公共样式：首先需要确定哪些样式代码是公共的，即哪些样式会被多个页面或组件共用。

2. 创建样式文件：创建一个单独的 CSS 文件，将公共样式代码放置在其中，并为其命名。通常建议将公共样式文件命名为 common.css 或 base.css 等。

3. 引入样式文件：在需要使用公共样式的页面或组件中，通过 link 标签将样式文件引入到 HTML 页面中。通常建议将 link 标签放置在 head 标签内。

4. 优化样式代码：为了进一步提高代码的可维护性和复用性，可以对样式代码进行优化，比如将颜色、字体等常用属性定义为变量或 mixin，提取重复的样式代码，利用 CSS 预处理器等工具进行编译等。

抽离样式模块是现代前端开发中的一项基本技能，可以有效提高代码的可读性、可维护性和可扩展性。

三十、元素竖向的百分比设定是相对于容器的高度吗？

是，一个元素设置竖向的百分比时，它是相对于其父容器的高度来计算的。这意味着当父容器的高度发生变化时，子元素相对于父容器的百分比也会相应地调整。

例如，如果你将一个元素的高度设置为 50%，那么这个元素的高度将会是其父元素高度的 50%。这种相对单位的使用使得网页布局可以更加灵活和响应式，因为子元素的尺寸可以根据父元素的尺寸进行自适应调整。

如果父元素的高度是由内容撑开的（比如没有显式设置高度的块级元素），那么子元素的百分比高度将会相对于父元素的内容高度，而不是盒模型的高度。这一点在实际布局中需要格外注意，避免出现意外的布局效果。

三十一、全屏滚动的原理是什么？用到了CSS的那些属性？

全屏滚动的原理是通过改变页面布局的方式，使得整个网页在垂直方向上呈现出一种滚动的效果，从而实现一屏一屏的切换。这通常是通过 JavaScript 来实现的，其中会涉及到以下几个关键的概念和技术：

1. 分页布局：将整个页面划分为多个屏幕大小的区块，每个区块对应着页面上的一个“屏幕”。

2. 定位和滚动：通过 JavaScript 监听滚动事件，根据用户的滚动行为来改变当前显示区块的位置，从而实现屏幕之间的切换。

3. 动画效果：可以利用 CSS3 的动画属性或者 JavaScript 动画库来实现页面切换时的平滑过渡效果，比如淡入淡出、滑动等效果。

在实现全屏滚动的过程中，通常会用到以下一些 CSS 属性：

• position：用于控制元素的定位方式，比如设置为 "fixed" 可以使元素固定在页面上。
• top, bottom, left, right：用于控制元素相对于其定位父元素的位置。
• height：用于设置元素的高度，通常用来定义每个“屏幕”区块的高度。
• overflow：用于控制元素内容溢出时的处理方式，通常会设置为 "hidden" 来隐藏超出部分。

实现全屏滚动可能还会用到一些 CSS3 动画属性、过渡属性等，以及在 JavaScript 中操作 CSS 样式属性来实现动态效果。总的来说，全屏滚动的实现是一个涉及到多方面技术的复杂任务，需要结合 JavaScript 和 CSS 来完成。

三十二、什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

响应式设计是一种网页设计和开发的理念，旨在使网站能够在不同设备上提供最佳的浏览体验。无论是桌面电脑、平板还是手机等移动设备，响应式设计都可以根据设备的屏幕尺寸和分辨率来灵活调整页面布局和内容呈现方式，以适配不同的设备和屏幕大小。

响应式设计的基本原理包括以下几个关键点：

1. 流式布局：使用相对单位如百分比来定义页面元素的宽度，使得页面可以根据视口大小自动伸缩，保持相对的布局稳定性。

2. 媒体查询：通过 CSS3 的媒体查询功能，根据设备的特性（如屏幕宽度、高度、分辨率等）应用不同的样式表，以实现针对不同设备的定制布局和显示效果。

3. 弹性图片和媒体：利用 max-width 属性设置图片和视频的最大宽度，使其能够根据设备屏幕大小进行自适应缩放。

4. 断点设计：在设计过程中考虑不同设备的断点（breakpoint），即设定特定屏幕宽度的临界点，在这些临界点上重新调整布局和样式。

针对低版本的IE浏览器，你可以通过以下几种方式来兼容：

1. 使用媒体查询的 Respond.js：Respond.js 是一个 JavaScript 库，可以让 IE6-8 支持 CSS3 媒体查询，从而实现响应式设计的效果。

2. 弹性网格布局：在不支持媒体查询的老版本浏览器上，可以使用弹性网格布局来实现简单的响应式效果。通过相对单位和弹性布局技术，可以使页面在一定程度上适应不同的屏幕尺寸。

3. 渐进增强：在设计和开发过程中，可以采用渐进增强的策略，首先确保网站在老版本浏览器上有基本的可用性和可访问性，然后再为支持媒体查询的现代浏览器添加更丰富的响应式设计效果。

综合利用这些方法，可以在一定程度上实现对低版本IE的兼容，同时也鼓励用户升级到支持 HTML5 和 CSS3 的现代浏览器，以获得更好的浏览体验。

三十三、视差滚动效果，如何给每页做不同的动画？（回到顶部，向下滑动要再次出现，和只出现一次分别怎么做？）

实现视差滚动效果并给每页做不同的动画，可以结合使用 JavaScript 和 CSS 来实现。以下是一种可能的实现方式：

1. 给每页做不同的动画：

   • 在 HTML 结构中，为每个页面段落或区块添加不同的类名或 ID，以便于在 JavaScript 中进行定位和操作。
   • 使用 CSS3 动画或过渡效果来定义每个页面段落或区块的动画效果，比如淡入淡出、平移、旋转等。
   • 在 JavaScript 中监听滚动事件，并根据页面滚动的位置（滚动到相应的区块）来触发对应的动画效果。

2. 回到顶部的动画效果：

   • 可以在页面底部添加一个“回到顶部”的按钮，或者在页面滚动到一定位置时自动触发“回到顶部”的动画效果。
   • 使用 JavaScript 监听用户点击事件，或者监听页面滚动事件，当用户点击按钮或者页面滚动到指定位置时，触发“回到顶部”的动画效果。
   • 利用 JavaScript 或 CSS3 动画来实现平滑滚动的效果，让页面以动画方式回到顶部位置。

3. 向下滑动再次出现的动画效果：

   • 在 JavaScript 中设置一个标记，表示当前是否已经触发过向下滑动的动画效果。
   • 当用户向下滑动到指定位置时，触发相应的动画效果，并将标记设置为已触发。
   • 如果需要再次触发动画效果，可以在用户滚动到另一个位置时重新设置标记，以便再次触发动画效果。

综合利用 JavaScript 和 CSS，可以实现上述动画效果的功能。在实际开发中，还可以结合现有的动画库（如Animate.css）或者滚动插件（如fullPage.js）来简化实现过程并增加更多的动画效果选择。

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

双冒号(::)和单冒号(:)在 CSS 中用于表示伪元素（pseudo-element）和伪类（pseudo-class），它们的使用方式和作用有一些不同。

1. 双冒号(::)和单冒号(:)的区别：

   • 在 CSS3 中规定，双冒号(::)用于表示伪元素，而单冒号(:)用于表示伪类。
   • 在实际使用中，大部分浏览器已经支持使用双冒号(::)表示伪元素，但对于单冒号(:)既可以用于伪类也可以用于伪元素。为了保证兼容性，有些开发者会选择使用单冒号(:)表示伪元素。

2. ::before 和 ::after 伪元素的作用：

   • ::before：表示在选择的元素内容之前插入一个虚拟的元素。通过设置其 content 属性，可以插入一些额外的内容，比如图标、装饰性的边框等。通常用来实现一些装饰性的效果，比如在元素前面添加特定的图标或样式。
   • ::after：表示在选择的元素内容之后插入一个虚拟的元素。同样可以通过设置 content 属性来插入额外的内容，常用于在元素后面添加一些特定的样式或内容，比如清除浮动、添加装饰线等。

举个例子：

/* 使用单冒号表示伪元素 */ 
div::before { content: "Before "; } 
/* 使用双冒号表示伪元素 */ 
div::after { content: " After"; }

上述例子中，当应用到 div 元素时，::before 伪元素会在元素内容的前面插入文本 "Before "，而 ::after 伪元素会在元素内容的后面插入文本 " After"。这样可以通过伪元素来实现一些页面布局和装饰效果，而不必修改 HTML 结构。

三十五、如何修改chrome记住密码后自动填充表单的黄色背景 ？

1. 使用CSS样式重写： 可以使用 CSS 样式来重写浏览器默认的表单填充样式。您可以为表单元素添加一个特定的样式，覆盖浏览器默认的样式。例如，您可以将输入框的背景颜色设置为其他颜色或透明，并去掉黄色背景。

   input:-webkit-autofill, 
   input:-webkit-autofill:hover, 
   input:-webkit-autofill:focus, 
   textarea:-webkit-autofill, 
   textarea:-webkit-autofill:hover, 
   textarea:-webkit-autofill:focus, 
   select:-webkit-autofill, 
   select:-webkit-autofill:hover, 
   select:-webkit-autofill:focus { 
       -webkit-text-fill-color: #333; /* 修改文本颜色 */ 
       -webkit-box-shadow: 0 0 0px 1000px white inset; /* 修改背景颜色 */ 
   }

   在上面的示例中，通过设置 -webkit-box-shadow 属性为 inset 并且背景颜色为白色，来覆盖浏览器默认的黄色背景。

2. 使用JavaScript处理： 您还可以使用 JavaScript 来处理表单元素的自动填充样式。在页面加载完成后，使用 JavaScript 选择表单元素，并移除浏览器默认的填充样式，然后设置自定义的样式。

   // 移除自动填充样式 
   document.addEventListener('DOMContentLoaded', 
       function() { 
           var inputFields = document.getElementsByTagName('input'); 
           for (var i = 0; i < inputFields.length; i++) { 
               inputFields[i].onfocus = function() { this.removeAttribute('style'); 
           } 
       } 
   });

   上述 JavaScript 示例会在页面加载完成后，遍历所有的输入框元素，当输入框获得焦点时，移除默认的样式。

请注意，这些方法可能会受到浏览器更新和兼容性的影响，因此在实际应用中可能需要进行适当的测试和调整。

三十六、你对line-height是如何理解的？

用于设置行内元素（包括文字）的高度。它定义了一行文本的高度，包括文本的实际高度和上下留白。

理解 line-height 可以从以下几个方面入手：

1. line-height 的计算方式： line-height 的计算方式是将其设置值乘以当前字体尺寸（font-size），例如：当 font-size 为 16px、line-height 为 1.5 时，一行的高度为 24px（16*1.5）。

2. line-height 对文字和行间距的影响： line-height 不仅影响文字的高度，还会影响行间距。在默认情况下，行间距等于 line-height 减去 font-size 的值再除以 2。例如，当 font-size 为 16px、line-height 为 1.5 时，行间距就是 (24-16)/2 = 4px。

3. line-height 应用场景： line-height 主要用于设置文本在行内的垂直对齐方式，能够使文本在一定程度上居中显示。同时，通过调整 line-height 的值，还可以控制行距、段落距离等样式效果。

   比如，当设置 line-height 的值等于容器高度时，可以实现容器内的文本内容垂直居中；当设置 line-height 的值大于中文字号时，可以增加行间距和段落距离，使文本更易于阅读。

line-height 是一个常用的 CSS 属性，通过设置它的值可以改变行内元素的高度和行间距，从而实现文本的垂直居中、调整行距和段距等效果。

三十七、设置元素浮动后，该元素的display值是多少？（自动变成display:block）

当一个元素设置了浮动（float）后，该元素的 display 属性会自动变成 display: block;。

浮动元素会脱离文档流，并且会表现得像块级元素一样，即会占据一定的宽度并在页面上水平排列。因此，即使原本是行内元素（如 span 或 inline 元素），设置了浮动后也会被视为块级元素，显示属性会被自动转换为 display: block;。

三十八、怎么让Chrome支持小于12px 的文字？

尝试以下方法：

1. 使用绝对单位：可以使用像素以外的绝对单位，例如 pt（磅）或者 mm（毫米），这些单位不受浏览器最小字体限制的影响。例如：

   body { font-size: 10pt; /* 使用 pt 单位设置字体大小 */ }

   使用磅或毫米单位可能会导致在不同设备上显示的效果有所不同，因此需要在不同设备上进行测试和调整。

2. 使用 transform 缩放：您可以使用 CSS3 的 transform 属性来缩放文字，而不改变字体大小。例如：

   .small-text { 
       font-size: 12px; /* 设置一个浏览器默认支持的字体大小 */ 
       transform: scale(0.8); /* 缩放文字至原来的80%大小 */ 
   }

   上述示例中，通过将文字缩放到原来的80%，可以实现小于12px的显示效果。

三十九、让页面里的字体变清晰，变细用CSS怎么做？（-webkit-font-smoothing: antialiased;）

字体变得清晰并且更细，可以使用 CSS 中的 font-smoothing 属性。

在 WebKit 内核的浏览器（例如 Chrome 和 Safari）中，您可以使用 -webkit-font-smoothing: antialiased; 来改善字体的平滑度和清晰度。这个属性告诉浏览器使用抗锯齿技术（antialiasing）来渲染字体，从而使文字看起来更加清晰。

以下是一个示例：

body { -webkit-font-smoothing: antialiased; }

请注意，这个属性只在 WebKit 内核的浏览器中生效，对于其他浏览器可能不会产生影响。如果需要兼容多种浏览器，可以考虑使用其他方法来改善字体的清晰度和细节，比如调整字体的大小、行高、字重等属性。

四十、font-style属性可以让它赋值为“oblique” oblique是什么意思？

font-style 属性用于设置字体的风格，其中其中一个可能的值是 "oblique"。"oblique" 表示字体会以一种斜体的形式呈现，但与传统的斜体（italic）字体不同。

与传统的斜体字体不同，"oblique" 是通过将字体倾斜来实现的，并且没有专门为这种风格设计的字形。字体倾斜的程度和方向可能根据字体的设计而有所不同。

当将 font-style 设置为 "oblique" 时，浏览器会尽量将字体进行倾斜处理，以呈现出一种斜体效果。请注意，这种倾斜并不总是与原始字体的设计完全一致，因此可能会导致一些字体出现变形或显示异常。

以下是一个示例：

body { font-style: oblique; }

并非所有字体都支持 "oblique" 风格。

四十一、position:fixed;在android下无效怎么处理？

Android 设备上，position: fixed; 可能会出现无法正常工作的情况，尤其是在使用 Webview 或者内置浏览器的情况下。这是因为 Android 内置浏览器对于 position: fixed; 的支持存在一些限制。

为了解决这个问题，可以尝试以下方法：

1. 使用 JavaScript 进行模拟：您可以使用 JavaScript 来模拟 position: fixed; 的效果。具体方法是监听页面的滚动事件，并动态改变目标元素的位置，使其保持在页面视口的固定位置。例如：

   window.addEventListener('scroll', 
       function() { 
           var target = document.getElementById('fixed-element'); 
           if (target) { 
               target.style.top = Math.max(0, window.pageYOffset) + 'px'; 
           } 
       }
   );

2. 使用绝对定位：如果固定元素的大小不会变化，您可以考虑将其改为绝对定位，并手动指定其位置。例如：

   .fixed-element { position: absolute; top: 50px; left: 50px; }

   这种方法需要手动计算元素的位置，并且在页面布局发生变化时可能需要手动调整位置。

3. 使用 CSS 库：如果您不想编写 JavaScript 或自己计算位置，可以考虑使用一些现有的 CSS 库，如 iScroll 或者 Overthrow。这些库可以帮助您在 Android 设备上实现类似于 position: fixed; 的效果。

四十二、如果需要手动写动画，你认为最小时间间隔是多久，为什么？

最小时间间隔通常是 16 毫秒。这个数值对应于动画每秒大约 60 帧的刷新率。为什么要选择这个时间间隔呢？原因如下：

1. 流畅度：人眼一般可以感知到大约 60 帧每秒的动画，因此 16 毫秒的时间间隔可以让动画看起来非常流畅。

2. 性能：较短的时间间隔会导致动画更新的频率过高，可能会对性能产生负面影响，特别是在移动设备或性能较低的设备上。

3. 节省资源：较长的时间间隔可能会导致动画看起来不够流畅，但同时会减少动画更新的频率，从而节省设备资源。

对于一些特殊的动画效果，可能需要使用更高的刷新率，比如视频播放或者游戏中的特效。在这种情况下，可以考虑使用更短的时间间隔来实现更高的帧率，不过需要权衡性能和流畅度的需求。

四十三、display:inline-block 什么时候会显示间隙？

空隙可能会出现在两个相邻的 inline-block 元素之间，或者在父元素和第一个/最后一个子元素之间。这些空隙产生的原因如下：

1. 空格和回车符：在 HTML 中，空格和回车符会被解释为文本节点，并且会占据一定的空间。如果在两个 inline-block 元素之间存在空格或回车符，那么它们之间就会出现间隙。

2. 字体大小：如果两个 inline-block 元素的字体大小不同，它们之间也可能会出现间隙。这是因为每个元素的字体大小决定了它们的行框盒子的高度，而行框盒子的高度决定了它们之间的间距。

为了避免这些间隙，可以采用以下方法：

1. 删除空格和回车符：将两个 inline-block 元素之间的空格和回车符删除，可以消除它们之间的间隙。

2. 设置 font-size 和 line-height：将两个 inline-block 元素的字体大小和行高设置成相同的值，可以消除它们之间的间隙。

3. 使用 float 或 flex 布局：使用 float 或 flex 布局可以避免 inline-block 元素之间产生的间隙问题。

4. 使用负 margin：使用负 margin 可以将元素之间的间隙消除，例如：

   .inline-blocks { 
       font-size: 0; 
   } 
   .inline-block { 
       display: inline-block; 
       width: 50%; 
       font-size: 16px; 
       /* 设置负 margin */ 
       margin-right: -4px; 
   }

四十四、overflow: scroll时不能平滑滚动的问题怎么处理？

设置 overflow: scroll 时可能无法实现平滑滚动效果。这通常是因为浏览器或容器对于滚动的默认行为进行了一些限制或更改。

为了解决这个问题，您可以尝试以下方法：

1. 使用自定义滚动条：默认的浏览器滚动条可能不支持平滑滚动，您可以考虑使用一些自定义滚动条的插件或库，例如 PerfectScrollbar 或 SimpleBar。这些库会提供自定义的滚动条样式，并且支持平滑滚动效果。

2. 使用 JavaScript 实现平滑滚动：如果您希望完全控制滚动行为，可以使用 JavaScript 来实现平滑滚动效果。具体方法是监听滚动事件，并使用动画函数（如 requestAnimationFrame）来逐步更新滚动位置，从而实现平滑滚动。

   var container = document.getElementById('scroll-container'); 
   var target = document.getElementById('target-element'); container.addEventListener('scroll', 
       function() { 
           var scrollOffset = container.scrollTop; // 使用 requestAnimationFrame 实现平滑滚动             
           requestAnimationFrame(function() { 
                target.style.transform = 'translateY(' + scrollOffset + 'px)'; 
           }); 
       }
   );

3. 检查容器和子元素的样式：有时候平滑滚动无法正常工作可能与容器或子元素的样式有关。您可以检查容器和子元素是否设置了固定高度、使用了绝对定位等可能影响滚动效果的属性。

以上方法并不是通用解决方案，具体效果可能会因浏览器、设备和其他因素而有所差异。

四十五、有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。

可以通过使用 flexbox 布局来实现这个效果。具体做法是将父元素设置为 display: flex;，并且设置子元素的 flex-grow 属性。这样就可以让一个子元素固定高度，另一个子元素自动填充剩余的高度。

下面是一个示例代码：

HTML：

<div class="parent"> 
    <div class="child fixed-height"></div> 
    <div class="child fill-height"></div> 
</div>

CSS：

.parent { 
    display: flex; 
    flex-direction: column; 
    height: 300px; /* 父元素高度自适应 */ 
} 
.fixed-height { 
    height: 100px; /* 固定高度 */ 
    background-color: red; 
} 
.fill-height { 
    flex-grow: 1; /* 自动填充剩余高度 */ 
    background-color: blue; 
}

在上述示例中，.fixed-height 元素的高度为 100px，.fill-height 元素的 flex-grow 属性为 1，这意味着它会自动填充剩余的高度。由于父元素使用 display: flex; 属性，子元素会自动排列在垂直方向上，从而实现高度自适应的效果。

四十六、png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

PNG、JPG（或 JPEG）、GIF 是常见的图片格式，它们各有特点，适用于不同的场景：

1. PNG（Portable Network Graphics）：PNG 格式是一种无损压缩的图片格式，支持透明度和多层图像。通常用于保存带有透明背景的图像，如 logo、图标等。PNG 格式可以保持图像质量，但文件大小通常比 JPG 大。

2. JPG 或 JPEG（Joint Photographic Experts Group）：JPG 格式是一种有损压缩的图片格式，适用于保存照片和复杂色彩的图像。JPG 文件通常比较小，适合在网络上快速加载。但由于是有损压缩，可能会导致图像质量略微下降。

3. GIF（Graphics Interchange Format）：GIF 格式是一种支持动画和透明度的图片格式。通常用于制作简单的动画、表情包等。GIF 图片只支持 256 种颜色，文件大小通常较小。

对于选择使用哪种格式，可以根据具体需求来决定：

• 如果需要保持图片质量和透明度，则可以选择 PNG 格式。
• 如果需要在网页上快速加载照片或复杂图像，则可以选择 JPG 格式。
• 如果需要制作简单动画或透明度效果，则可以选择 GIF 格式。

WebP 是由 Google 开发的一种新型图片格式，旨在提供更高的压缩率和更好的图像质量。WebP 格式支持有损和无损压缩，并且可以实现更小的文件大小，适用于在 web 上快速加载图像。许多现代浏览器已经开始支持 WebP 格式，可以通过使用 WebP 来提升网页性能和用户体验。

四十七、什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）

Cookie 隔离是一种保护用户隐私的技术，它可以防止某些恶意站点通过欺骗用户来访问其他站点的 Cookie 信息。当您在浏览器中访问某个网站时，该网站可能会将一些 Cookie 存储在您的本地计算机上，以便下次访问时可以快速识别您的身份或存储一些用户数据。但有些恶意站点可能会利用这些 Cookie 信息来进行 CSRF（跨站请求伪造）攻击。

为了避免这种情况发生，可以采取一些策略来限制 Cookie 的使用。

一种常见的方法是在请求资源时不带 Cookie。具体做法是在发送 HTTP 请求时设置 Cookie 头为空，或者根本不发送 Cookie 头。这样一来，即使恶意站点试图利用已保存的 Cookie 来伪造请求，也无法有效地进行攻击。

在前端开发中，可以通过以下方式实现请求时不带 Cookie：

1. 使用 Fetch API：fetch 方法可以接受一个 Request 对象作为参数，在构造 Request 对象时可以设置 credentials 属性为 'omit'，表示不发送任何凭据信息（包括 Cookie）。例如：

   fetch('/api/data', { credentials: 'omit' }).then(response => { // 处理响应 });

2. 使用 XMLHttpRequest：在使用 XMLHttpRequest 对象发送请求时，可以设置 withCredentials 属性为 false，表示不发送凭据信息。例如：

   var xhr = new XMLHttpRequest(); 
   xhr.open('GET', '/api/data'); 
   xhr.withCredentials = false; 
   xhr.onload = function() { // 处理响应 }; 
   xhr.send();

使用这种方式不会完全禁用 Cookie，只是限制了它们的使用范围。一些必要的 Cookie 仍然可能会被发送和接收，例如用于用户身份认证、防止 CSRF 攻击等情况下。

四十八、style标签写在body后与body前有什么区别？

HTML 文档中，将 <style> 标签放置在 <body> 元素之前和之后会产生不同的效果。

1. 放置在 <body> 元素之前：

   • 如果将 <style> 标签放置在 <body> 元素之前，那么其中定义的样式规则将在整个文档中都生效，包括 <head> 部分的内容和 <body> 部分的内容。这意味着在文档加载过程中，浏览器会立即应用这些样式规则到已经加载的内容上。这种情况下，如果样式表很大或者包含了复杂的选择器，可能会导致页面渲染的延迟。

2. 放置在 <body> 元素之后：

   • 将 <style> 标签放置在 <body> 元素之后通常是不符合 HTML 规范的，因为根据 HTML 规范，<style> 标签应该放置在 <head> 部分。
   • 如果通过 CSS 的 display: none; 将样式表隐藏起来，那么将其放置在 <body> 元素之后不会影响初始页面渲染。只有当整个文档加载完毕后，浏览器才会解析并应用这些样式规则。这样做可能会有助于加快页面的初始加载速度，但不符合标准实践。

按照 HTML 规范，<style> 标签应该放置在 <head> 部分，以便浏览器在加载文档时就能够获取并解析样式信息。虽然在某些情况下将 <style> 标签放置在 <body> 元素之后也可以达到一些特定的效果，但这并不是推荐的做法。

四十九、什么是CSS 预处理器 / 后处理器？

CSS 预处理器和后处理器是用于增强和简化 CSS 开发的工具，它们使开发人员能够更高效地编写和管理样式表。

1. CSS 预处理器：

   • CSS 预处理器是一种工具，允许开发人员使用类似编程语言的语法来编写 CSS。这些预处理器通常包括变量、嵌套规则、混合（Mixin）、继承、函数等功能，以及对运算、条件语句和循环等基本编程概念的支持。常见的 CSS 预处理器包括 Sass、Less 和 Stylus。
   • 通过使用 CSS 预处理器，开发人员可以更轻松地组织和重用样式代码，减少重复代码的量，提高代码的可维护性。另外，预处理器提供的变量和 mixin 功能也有助于加快开发速度，并且使得样式表更易于理解和修改。

2. CSS 后处理器：

   • CSS 后处理器是一种工具，用于对已有的 CSS 运行一系列的转换和优化操作。这些转换和优化可以包括添加私有前缀以支持各种浏览器、压缩和合并样式、移除未使用的样式、甚至是对样式进行静态分析并自动生成适当的 CSS。常见的 CSS 后处理器包括 Autoprefixer 和 PostCSS。
   • 通过使用 CSS 后处理器，开发人员可以确保生成的 CSS 具有更好的跨浏览器兼容性，同时也可以对样式表进行一些自动化的优化，从而提高页面加载速度和性能。

五十、rem布局的优缺点

rem 布局是一种基于根元素字体大小的相对长度单位，用于实现相对于网页根元素的响应式布局。

下面是 rem 布局的优缺点：

优点：

1. 适应不同屏幕尺寸：rem 布局能够根据设备的屏幕尺寸自动调整页面元素的大小，使得页面在不同尺寸的设备上都能够呈现出较为合理的效果。
2. 便于维护：使用 rem 单位可以让开发人员更方便地调整样式表中的字体大小和页面元素大小，而不需要考虑其对其他元素的影响。
3. 提高可读性：使用 rem 单位可以让开发人员更容易地控制页面元素之间的比例关系，从而提高页面的可读性。

缺点：

1. 兼容性问题：在某些低版本的浏览器中可能会存在不支持 rem 单位的情况，需要使用 polyfill 或者其他替代方案进行兼容。
2. 难以设置：由于 rem 单位是相对于根元素字体大小来定义的，因此需要首先设置根元素字体大小并且保证其在不同设备上的正确性，这可能会增加一定的设置难度。
3. 不利于布局复杂的页面：对于布局较为复杂的页面，使用 rem 布局可能会导致样式表中存在过多的嵌套和计算，从而使得样式表变得难以维护。此时，可能需要考虑使用其他更加复杂的响应式布局方案。