二、CSS相关（2/2）

68 浮动元素引起的问题

浮动元素可能引起以下问题：

  1. 父元素高度塌陷：当父元素包含了浮动元素时，如果没有清除浮动，父元素的高度将无法被正确计算，导致父元素的高度塌陷，影响页面布局。

解决方法：可以在父元素的末尾添加一个空的块级元素，并设置其清除浮动的属性。例如：

    .parent::after {
      content: "";
      display: block;
      clear: both;
    }
  1. 元素重叠：浮动元素脱离了正常的文档流，可能导致其他元素与其重叠。这通常发生在没有足够空间容纳浮动元素的情况下。

解决方法：可以通过在需要避免重叠的元素上应用clear属性或使用适当的布局技术来解决重叠问题。

  1. 文字环绕：浮动元素会导致周围的文本环绕在其周围，可能影响页面的可读性和布局。

解决方法：可以使用clear属性或使用适当的布局技术来控制浮动元素周围的文本布局，确保页面的可读性和整体布局。

  1. 父元素高度不准确：如果父元素包含浮动元素而没有设置清除浮动，父元素的高度可能不准确，可能会导致布局问题。

解决方法：可以在父元素上应用清除浮动的样式，或使用其他布局技术来解决父元素高度不准确的问题。

总的来说，使用浮动元素时，应注意处理相关的布局问题，避免出现高度塌陷、重叠和布局混乱等问题。可以使用清除浮动、适当的布局技术或其他CSS属性来解决这些问题。

69 CSS优化、提高性能的方法有哪些

以下是一些优化和提高CSS性能的方法：

  1. 合并CSS文件：将多个CSS文件合并为一个文件，减少HTTP请求次数。
  2. 将CSS文件放在页面最上面：确保CSS文件在HTML文件中的头部，以便浏览器尽早加载和渲染样式。
  3. 移除空的CSS规则：删除不需要的空的CSS规则，减少文件大小。
  4. 避免使用CSS表达式：CSS表达式在每次页面重绘时都会执行，对性能有一定影响，应避免使用。
  5. 优化选择器嵌套：避免过深的选择器嵌套，减少选择器的复杂度，以提高选择器匹配速度。
  6. 最大限度地利用CSS继承：合理利用CSS属性的继承特性，减少重复的代码量。
  7. 抽象和提取公共样式：将重复的样式抽象出来，提取为公共样式，减少重复的代码量。
  8. 使用简写属性：合理使用CSS的简写属性，减少代码量，例如使用margin代替margin-top、margin-right等单独属性。
  9. 避免不必要的浏览器重绘和重排：在进行DOM操作时，尽量减少对页面布局的影响，以避免不必要的浏览器重绘和重排。
  10. 使用CSS雪碧图：将多个小的图标合并到一个图像文件中，通过CSS的背景定位来显示不同的图标，减少HTTP请求次数。
  11. 使用压缩和缩小CSS文件：使用CSS压缩工具，将CSS文件进行压缩和缩小，减少文件大小，提高加载速度。

这些方法可以帮助优化和提高CSS性能，减少文件大小和HTTP请求次数，加快页面加载速度，提升用户体验。

70 浏览器是怎样解析CSS选择器的

浏览器解析CSS选择器的过程是从右到左进行的。当浏览器遇到一个CSS规则时，它会从选择器的最右边开始解析，然后逐步向左匹配元素。

具体的解析过程如下：

  1. 浏览器从右向左选择器的最右边开始解析，找到与该选择器匹配的元素。
  2. 然后，浏览器向左继续解析选择器的下一个部分，检查该元素的父元素是否满足选择器的条件。
  3. 如果满足选择器的条件，则继续向左解析选择器的下一个部分，继续检查父元素的父元素是否满足选择器的条件。
  4. 浏览器重复这个过程，直到解析完整个选择器或者找不到与选择器匹配的元素。

这种从右到左的解析方式可以提高选择器的性能，特别是在面对复杂的选择器和大量元素的情况下。因为从右到左的解析可以尽早过滤掉不匹配的元素，减少了需要遍历的元素数量，提高了选择器的匹配速度。

需要注意的是，并非所有的CSS选择器都适用于从右到左的解析方式，例如属性选择器、伪类选择器等可能需要从左到右进行解析。浏览器在解析CSS选择器时会根据具体的情况选择最优的解析方式。

71 在网页中的应该使用奇数还是偶数的字体

在网页中，一般推荐使用偶数号的字体大小。以下是一些原因：

  1. 比例关系 ：偶数字号相对更容易与网页设计的其他部分形成比例关系，使整个页面看起来更加协调和平衡。
  2. 对齐 ：使用偶数字号字体可以使文本段落对齐更加方便。如果使用奇数字号字体，文本段落的对齐可能会受到影响，因为奇数字号字体的基线位置可能会导致对齐不准确。
  3. 兼容性 ：在某些情况下，奇数字号字体可能在不同浏览器和操作系统中显示不一致。使用偶数字号字体可以减少这种显示差异的可能性。

对于中文网页排版，常用的字体大小是12号和14号。这两个偶数字号字体大小在中文排版中使用较多，可以提供良好的可读性和视觉效果。

需要注意的是，具体选择何种字体大小还要根据设计需求、内容呈现和用户体验等因素进行综合考虑。

72 margin和padding分别适合什么场景使用

margin 和 padding 在布局和样式设计中有不同的用途和适用场景。

适合使用 margin 的场景 ：

  • 创建元素之间的空白间距，用于调整元素之间的间隔。
  • 添加外部空白，使元素与周围的元素或容器之间产生间距。
  • 用于调整元素的定位和对齐。
  • 用于调整元素的外边距折叠效果（当相邻元素的外边距相遇时）。

适合使用 padding 的场景 ：

  • 在元素的内部添加空白区域，用于调整元素内部内容与边框之间的距离。
  • 用于创建元素的背景色或背景图的填充区域。
  • 用于调整元素的内边距，影响元素内容与边框的距离。
  • 用于控制元素的尺寸和布局。

需要根据具体的设计需求和布局目标来决定使用 margin 还是 padding。在一些情况下，它们可以互相替代使用，但在其他情况下，选择正确的属性可以更好地控制布局和样式效果。

73 抽离样式模块怎么写，说出思路

抽离样式模块的思路可以按照以下步骤进行：

  1. 识别公共样式 ：分析页面中多个模块或页面之间共享的样式，例如颜色、字体、按钮样式等，将其提取为公共样式。
  2. 创建公共样式表 ：将公共样式抽离到单独的样式表文件中，例如 common.css，以便在多个页面或模块中引用。
  3. 定义命名规范 ：为业务样式定义统一的命名规范，例如使用 BEM（Block-Element-Modifier）或其他命名约定，确保样式模块的可维护性和可扩展性。
  4. 拆分业务样式 ：根据页面或模块的功能和结构，将样式拆分为多个模块，并命名为相应的类名或选择器。每个模块应只关注自身的样式，并尽量避免与其他模块产生冲突。
  5. 创建样式模块文件 ：为每个样式模块创建单独的样式文件，例如 header.css、sidebar.css 等，并按需引入到页面中。
  6. 构建样式层级结构 ：根据页面或模块的结构和层级关系，合理组织样式文件的引入顺序，确保样式的层叠顺序和继承关系正确。
  7. 统一管理样式文件 ：根据项目需要，可以使用构建工具（如 webpack、gulp 等）进行样式文件的合并、压缩和打包，减少网络请求和提升页面加载速度。
  8. 维护和更新 ：在日常开发中，根据需求的变化和新功能的添加，及时更新和维护样式模块，保持样式的一致性和可复用性。

通过以上步骤，可以将样式按照模块化的方式进行抽离和管理，提高代码的可读性、可维护性和重用性。同时，样式模块的拆分也有助于团队协作和并行开发。

74 元素竖向的百分比设定是相对于容器的高度吗

实际上，元素竖向的百分比设定是相对于包含它的父元素的高度，而不是宽度。当给一个元素设置竖向的百分比高度时，它会根据其父元素的高度进行计算。例如，如果一个元素的高度设置为50%，则表示该元素的高度将是其父元素高度的50%。

请注意，如果父元素没有明确设置高度，或者父元素的高度是由其内容决定的（如默认的height: auto），那么百分比高度可能无效，因为无法确定相对的基准高度。

需要注意的是，元素的宽度百分比设定是相对于包含它的父元素的宽度。因此，元素的百分比设定在竖向和横向方向上是不同的。

75 全屏滚动的原理是什么？ 用到了CSS的那些属性

全屏滚动（Full Page Scroll）的原理是通过设置页面的高度为视口高度，并使用滚动事件来控制页面的滚动效果。通过监听滚动事件，当用户滚动页面时，根据滚动的距离来切换页面的显示内容，实现页面的切换效果。

在实现全屏滚动时，可能会用到以下一些CSS属性：

  • overflow: hidden;：用于隐藏超出视口范围的内容，以实现滚动效果。
  • transform: translate(100%, 100%);：通过translate属性将页面移动到视口之外，从而隐藏页面的初始位置。
  • display: none;：可以将页面的初始状态设置为隐藏，待滚动到相应位置时再显示。

这些属性可以结合使用，根据滚动事件的触发来控制页面的显示和隐藏，从而实现全屏滚动的效果。具体的实现方式可能因应用场景而有所差异。

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

  • 响应式设计就是网站能够兼容多个终端，而不是为每个终端做一个特定的版本
  • 基本原理是利用CSS3媒体查询，为不同尺寸的设备适配不同样式
  • 对于低版本的IE，可采用JS获取屏幕宽度，然后通过resize方法来实现兼容：
    $(window).resize(function () {
      screenRespond();
    });
    screenRespond();
    function screenRespond(){
    var screenWidth = $(window).width();
    if(screenWidth <= 1800){
      $("body").attr("class", "w1800");
    }
    if(screenWidth <= 1400){
      $("body").attr("class", "w1400");
    }
    if(screenWidth > 1800){
      $("body").attr("class", "");
    }
    }

77 什么是视差滚动效果，如何给每页做不同的动画

视差滚动效果是一种在网页中使用的动画效果，通过在滚动页面时，不同层级的元素以不同的速度移动，形成立体的运动效果。这种效果可以给用户带来更加丰富、生动的视觉体验。

实现视差滚动效果时，可以将页面划分为背景层、内容层和悬浮层等不同的层级。通过设置不同层级的元素以不同的速度移动，可以形成层次感和立体效果。

具体实现视差滚动效果的方法如下：

  1. 使用HTML和CSS创建页面的不同层级，如背景层、内容层和悬浮层。
  2. 监听滚动事件（如鼠标滚轮事件或触摸滑动事件）。
  3. 当滚动事件触发时，根据滚动的距离和速度，计算出不同层级元素的位移值。
  4. 使用CSS的transform属性或JavaScript的动画库（如GSAP、ScrollMagic等）来实现元素的平移或缩放效果。
  5. 根据需求，为每个页面或元素设置不同的动画效果，如淡入淡出、旋转、缩放等。
  6. 根据滚动的进度和方向，控制元素的动画播放顺序和速度，以达到预期的视差滚动效果。

需要注意的是，在实现视差滚动效果时，要考虑到性能和用户体验。过多或复杂的动画效果可能会影响页面加载和滚动的流畅性，因此需要谨慎选择和设计动画效果，并进行性能优化，如合理使用硬件加速、使用节流和防抖等技术手段。

另外，为每个页面或元素设置不同的动画效果可以根据具体的设计需求来确定。可以根据页面的主题、内容或目的来决定使用何种动画效果，如淡入淡出效果、元素的移动或旋转效果等，以增加页面的吸引力和交互性。可以通过CSS的animation属性或JavaScript的动画库来实现这些动画效果，并根据滚动进度或其他触发条件来控制动画的播放。

总结

  • 视差滚动是指多层背景以不同的速度移动，形成立体的运动效果，具有非常出色的视觉体验
  • 一般把网页解剖为：背景层、内容层和悬浮层。当滚动鼠标滚轮时，各图层以不同速度移动，形成视差的
  • 实现原理
    • 以 “页面滚动条” 作为 “视差动画进度条”
    • 以 “滚轮刻度” 当作 “动画帧度” 去播放动画的
    • 监听 mousewheel 事件，事件被触发即播放动画，实现“翻页”效果

78 a标签上四个伪类的执行顺序是怎么样的

伪类在a标签上的执行顺序是 link（未访问链接） -> visited（已访问链接） -> hover（鼠标悬停） -> active（激活状态）。

执行顺序可以用记忆口诀 "L-V-H-A"（Love Hate）来记忆，表示喜欢和讨厌的顺序。首先应用 link 样式，然后是 visited 样式，接着是 hover 样式，最后是 active 样式。这个顺序也是 CSS 解析和应用伪类样式的规定顺序。

79 伪元素和伪类的区别和作用

  • 伪元素 -- 在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。
  • 它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。例如：
    p::before {content:"第一章：";}
    p::after {content:"Hot!";}
    p::first-line {background:red;}
    p::first-letter {font-size:30px;}
  • 伪类 -- 将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例如：
    a:hover {color: #FF00FF}
    p:first-child {color: red}

80 ::before 和 :after 中双冒号和单冒号有什么区别

  • 在 CSS 中伪类一直用 : 表示，如 :hover, :active 等
  • 伪元素在CSS1中已存在，当时语法是用 : 表示，如 :before 和 :after
  • 后来在CSS3中修订，伪元素用 :: 表示，如 ::before 和 ::after，以此区分伪元素和伪类
  • 由于低版本IE对双冒号不兼容，开发者为了兼容性各浏览器，继续使使用 :after 这种老语法表示伪元素
  • 总结起来，::before 是CSS3中写伪元素的新语法，而 :after 是早期版本CSS中存在的、兼容IE的旧语法，用于表示伪元素。在实际开发中，为了兼容性考虑，可以选择使用单冒号的写法。

81 如何修改Chrome记住密码后自动填充表单的黄色背景

  • 产生原因：由于Chrome默认会给自动填充的input表单加上 input:-webkit-autofill 私有属性造成的
  • 解决方案1：在form标签上直接关闭了表单的自动填充：autocomplete="off"
  • 解决方案2：input:-webkit-autofill { background-color: transparent; }

input [type=search] 搜索框右侧小图标如何美化？

    input[type="search"]::-webkit-search-cancel-button{
      -webkit-appearance: none;
      height: 15px;
      width: 15px;
      border-radius: 8px;
      background:url("images/searchicon.png") no-repeat 0 0;
      background-size: 15px 15px;
    }

82 网站图片文件，如何点击下载？而非点击预览

可以通过在 <a> 标签中添加 href 属性来指定图片文件的路径，并使用 download 属性来指示浏览器下载该文件而非预览。

    <a href="logo.jpg" download>下载</a>

上述代码会在网页中显示一个链接，点击该链接会下载名为 logo.jpg 的图片文件。

您还可以通过添加 download 属性的值来指定下载文件的名称，如下所示：

    <a href="logo.jpg" download="网站LOGO">下载</a>

上述代码会下载名为 网站LOGO.jpg 的图片文件。

请注意，download 属性在某些浏览器中可能不被支持或具有限制。在不支持该属性的浏览器中，点击链接可能仍然会打开预览。此外，如果您在网站中使用了内容安全策略（Content Security Policy），可能需要额外配置才能允许下载文件。

确保文件路径正确，并根据需要设置适当的下载文件名称。

83 你对 line-height 是如何理解的

  • line-height 是一行字的高度，包括了字体的实际高度以及行间距（字间距）。
  • 当一个元素没有显式设置 height 属性时，它的高度会由 line-height 决定。
  • 如果一个容器没有设置高度，并且容器内部有文本内容，那么容器的高度会由 line-height 撑开。
  • 如果将 line-height 设置为与容器的 height 相同的值，可以实现单行文本的垂直居中。
  • 注意，line-height 和 height 都可以撑开元素的高度，但是设置 height 属性会触发元素的 haslayout（仅适用于部分浏览器），而 line-height 不会触发该特性。

需要注意的是，line-height 还可以影响多行文本的行间距和垂直居中，它是一个很常用的属性用于调整文本的排版和布局。

84 line-height 三种赋值方式有何区别？（带单位、纯数字、百分比）

对于 line-height 的三种赋值方式，如下所述：

  1. 带单位 ：使用像素 (px) 或其他单位 (如 em) 进行赋值。当使用固定值（如 px）时，line-height 会直接采用该固定值作为行高。而当使用相对单位（如 em）时，line-height 会根据元素的父元素的字体大小 (font-size) 来计算行高，即乘以相应的倍数。
  2. 纯数字 ：直接使用数字进行赋值。这种情况下，数字会被传递给后代元素，作为其行高的比例因子。例如，如果父元素的行高为 1.5，而子元素的字体大小为 18px，那么子元素的行高就会被计算为 1.5 * 18 = 27px。
  3. 百分比 ：使用百分比进行赋值。百分比值会相对于父元素的字体大小进行计算，并将计算后的值传递给后代元素作为其行高。

总的来说，带单位的方式是直接指定具体的行高值，纯数字和百分比的方式会将计算后的行高值传递给后代元素。这些不同的赋值方式可以根据具体的需求和设计效果来选择使用。

85 设置元素浮动后，该元素的 display 值会如何变化

  • 设置元素浮动后，元素的 display 值并不会自动变成 block，而是保持原有的 display 值。浮动元素的 display 值仍然是根据元素的默认样式或通过 CSS 显式设置的值。
  • 然而，浮动元素会生成一个块级框，并且脱离了正常的文档流，会影响其他元素的布局。常见的浮动值为 left 或 right，使元素向左或向右浮动，并允许其他内容环绕在其周围。
  • 需要注意的是，对于一些内联元素，如 span、a 等，默认的 display 值是 inline，当设置这些内联元素为浮动时，会自动转换为 block，但这并不适用于所有元素。

86 让页面里的字体变清晰，变细用CSS怎么做？（IOS手机浏览器字体齿轮设置）

通过设置 -webkit-font-smoothing 属性为 antialiased 可以在 iOS 手机浏览器中使字体显示更清晰、更细腻。这个属性是针对 iOS Safari 浏览器的特定设置。

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

将上述代码应用于你的 CSS 文件中，或者将其添加到你想要应用字体设置的元素的样式中，可以改善字体在 iOS 手机浏览器中的显示效果。注意，该属性只在 iOS Safari 浏览器中生效，在其他浏览器中可能没有效果。

87 font-style 属性 oblique 是什么意思

font-style: oblique; 是用来设置字体样式为倾斜（oblique）的。当字体本身没有提供 italic 斜体样式时，可以使用 oblique 属性来模拟倾斜效果。

倾斜样式是一种字体样式，使字体呈现为向右倾斜的外观，类似于斜体（italic）样式。不同之处在于，斜体样式是由字体设计师提供的专门的斜体字形，而倾斜样式是通过将正常字形倾斜来模拟出来的。

使用 font-style: oblique; 可以在没有专门提供斜体字形的字体上实现倾斜效果，但需要注意的是，由于是通过倾斜正常字形来模拟，所以结果可能不如专门设计的斜体字形效果好。

88 display:inline-block 什么时候会显示间隙

display: inline-block; 可能会在元素之间产生间隙的情况包括：

  1. 相邻的 inline-block 元素之间有换行或空格分隔时，会产生间隙。
  2. 非 inline-block 的水平元素设置为 inline-block 时，会有默认的水平间距。
  3. 默认情况下，inline-block 元素的默认对齐方式是基线对齐，而不是顶部对齐，因此可能会产生垂直间隙。可以通过设置 vertical-align: top; 将元素顶部对齐来消除垂直间隙。
  4. 父元素的字体大小会影响 inline-block 元素的间隙。如果父元素设置了字体大小，可以将其设置为 font-size: 0;，然后在 inline-block 元素内部设置所需的字体大小，以消除垂直间隙。
  5. 将多个 li 标签写在同一行，可以消除垂直间隙，但这会导致代码可读性差。

这些方法可以用来解决 inline-block 元素之间产生的间隙问题。

89 一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度

  • 方案1：
    • .sub { height: calc(100%-100px); }
  • 方案2：
    • .container { position:relative; }
    • .sub { position: absolute; top: 100px; bottom: 0; }
  • 方案3：
    • .container { display:flex; flex-direction:column; }
    • .sub { flex:1; }

这三种方案都可以实现一个高度自适应的 div，其中一个子 div 高度为 100px，另一个子 div 填满剩下的高度。

  • 方案1使用了 calc() 函数来计算剩余高度，.sub 的高度设置为 calc(100% - 100px)，即剩余高度。
  • 方案2使用了相对定位和绝对定位，父容器 .container 设置为相对定位，子 div .sub 设置为绝对定位，设置 top: 100px 让其距离顶部 100px，设置 bottom: 0 让其底部与父容器底部对齐。
  • 方案3使用了弹性布局（Flexbox），父容器 .container 设置为 display: flex，并指定 flex-direction: column 使其垂直排列。子 div .sub 使用 flex: 1 来填充剩余的空间，自动调整高度。

这些方案都可以实现相应的效果，具体选择哪种方案取决于实际需求和布局结构。

90 css 的渲染层合成是什么 浏览器如何创建新的渲染层

在 DOM 树中每个节点都会对应一个渲染对象（RenderObject），当它们的渲染对象处于相同的坐标空间（z 轴空间）时，就会形成一个 RenderLayers，也就是渲染层。渲染层将保证页面元素以正确的顺序堆叠，这时候就会出现层合成（composite`），从而正确处理透明元素和重叠元素的显示。对于有位置重叠的元素的页面，这个过程尤其重要，因为一旦图层的合并顺序出错，将会导致元素显示异常

在 CSS 中，渲染层合成（Layer Composition）是浏览器中用于处理页面元素的显示和堆叠顺序的机制。它通过创建新的渲染层（Render Layer）来管理页面中的元素，并确保它们以正确的顺序进行渲染和呈现。

浏览器创建新的渲染层的条件包括但不限于以下情况：

  1. 定位属性 ：元素具有 position: fixed、position: relative、position: sticky、position: absolute 等定位属性时，会创建新的渲染层。
  2. 透明度和混合模式 ：元素的透明度设置小于 1（opacity: 0.5）或具有非 normal 的混合模式（mix-blend-mode: multiply）时，会创建新的渲染层。
  3. 3D 变换 ：元素具有 3D 变换（transform: translateZ(0)）时，会创建新的渲染层。
  4. 滤镜效果 ：元素应用了滤镜效果（filter: blur(5px)）时，会创建新的渲染层。
  5. 遮罩效果 ：元素应用了遮罩效果（mask-image: url(mask.png)）时，会创建新的渲染层。
  6. CSS 动画 ：元素正在进行 CSS 动画（animation、transition）时，会创建新的渲染层。
  7. 其他因素 ：还有一些其他因素，如元素应用了 backface-visibility: hidden、column-count 不为 auto 等，也可能触发创建新的渲染层。

创建新的渲染层有助于确保页面元素以正确的顺序进行堆叠和渲染，并处理透明元素和重叠元素的显示。这对于具有位置重叠的页面元素尤为重要，因为合成层的顺序错误可能导致元素显示异常。通过创建新的渲染层，浏览器可以更好地管理元素的渲染和呈现，提高页面的性能和用户体验。

Last Updated:
Contributors: leeguooooo