跳到主要内容

CSS

选择器优先级及权重​

选择器格式权重
!important最高
内联样式在 style 属性里面写的样式1000
id 选择器#runoob { width: 200px; }100
类选择器.highlight { background-color: yellow; }10
属性选择器input[type="text"] { border: 1px solid gray; }10
伪类选择器p:hover{ background-color:red; }10
元素（标签）选择器p { color: blue; }1
伪元素选择器p::after { color: blue; }1
后代选择器div p { font-weight: bold; }0
子选择器 >li>p{ border: 1px solid red; }0
相邻选择器 +h1+p{ color:red; }0
兄弟选择器 element1~element2 h1~p{ border: 1px solid red; }0
分组选择器 ,.zuhe1, .zuhe2 { color: blue; }0
通配符选择器* { margin:0; padding:0; }0
  • !important 声明的样式的优先级最高；
  • 样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。

标准盒模型和 IE 盒模型的区别​

在 CSS 中，所有元素都被一个”盒子“包围。这个盒子影响元素内部和外部之间的排列和布局。这个盒子通常包含以下几部分：

内容(content)、内边距(padding)、边框(border)、外边距(margin)。这几部分决定了元素在页面中所占据的空间大小。

而标准盒模型和 IE 盒模型的出现，是因为不同的浏览器对于元素的理解和实现不同。

标准盒模型：

大部分现代浏览器所采用的盒模型。可以通过box-sizing:content-box;设置。

width = content width;

height = content height;

IE 盒模型：

早起的 IE 浏览器上采用的盒模型。可以通过box-sizing:border-box;设置。

width = content width + left padding + right padding + left border-width + right border-width;

height = content height + top padding + bottom padding + top border-width + bottom border-width;

总结来说，标准盒模型宽高就是内容的宽高，而 IE 盒模型的宽高还包括了内边距 padding 和边框的宽度。

什么是 margin 重叠问题？如何解决？​

边距（margin）重叠问题是指当相邻的两个元素的上下边距发生重叠，导致视觉上的边距距离大于预期的情况。这种重叠通常发生在垂直方向上，对于垂直排列的元素尤为常见。在 CSS 中，当两个（或多个）垂直相邻的块级元素的上下边距发生重叠时，就会出现 margin 重叠问题。这种情况下，相邻元素之间的上边距和下边距会合并成一个较大的边距，而不是简单地将它们相加。

注意：有设定浮动和绝对定位的元素不会发生外边距折叠。

为什么会发生 margin 重叠？

Margin 重叠是 CSS 盒模型的一部分，它是 CSS 设计的一个特性。Margin 重叠的主要原因是为了简化页面布局，但有时候也可能会引发一些布局上的意外问题。

什么情况下会发生 margin 重叠？

  1. 相邻兄弟元素的 margin 重叠：当两个相邻的兄弟元素（即没有其他内容或边框分隔）的上下 margin 相遇时，它们的 margin 会合并为一个较大的 margin。

image-20240724192833698

  1. 父元素与第一个或最后一个子元素的 margin 重叠：当父元素没有边框、内边距或清除浮动的内容，并且它的第一个或最后一个子元素的边距为零时，父元素的边距会与子元素的边距发生重叠。

image-20240724192745100

  1. 空块级元素的 margin 重叠：如果一个块级元素没有内容，且设置了上下 margin，这个 margin 可能会与其父元素或相邻元素的 margin 重叠。

image-20240724193327608

一些需要注意的地方：

  • 两个正数的外边距取最大的边距作为外边距。一个 100，一个 50，最后取 100

  • 如果一个为正数，一个为负数，最终的外边距为两者之和。一个 100，一个-50，最终为 100-50=50

  • 如果两个值都是负数的话，最终的外边距取绝对值最大的值。一个-100，一个-50，最终为-100

  • 即使某一外边距为 0，这些规则仍然适用。因此就算父元素的外边距是 0，第一个或最后一个子元素的外边距仍然会（根据上述规则）“溢出”到父元素的外面。

  • 如果包含负边距，折叠后的外边距的值为最大的正边距与最小（绝对值最大）的负边距的和。

  • 如果所有的外边距都为负值，折叠后的外边距的值为最小（绝对值最大）的负边距的值。这一规则适用于相邻元素和嵌套元素。

  • 外边距折叠仅与垂直方向有关。

  • display 设置为 flex 或 grid 的容器中不会发生外边距折叠。

解决边距重叠问题的方法包括：

  1. 使用 padding 替代 margin：有时候可以使用 padding 替代 margin，在某些情况下可以避免 margin 重叠问题。
  2. 使用 border 或 inline-block：在需要分隔 margin 的地方使用 border 或将元素设置为 inline-block。
  3. 使用 clearfix 技术：针对包含浮动元素的父元素，可以使用 clearfix 技术来解决 margin 重叠问题。
  4. 使用空的匿名包裹元素： 在发生边距重叠的兄弟元素之间添加一个空的匿名包裹元素（无内容的<div>或<span>），可以阻止它们的边距重叠。
  5. 使用 flexbox 或 grid 布局：这些布局模型可以更好地控制元素之间的间距，避免 margin 重叠问题。
  6. 使用overflow属性创建新的 BFC： 为父元素设置overflow属性值为除visible以外的其他值（例如auto、hidden、scroll）可以创建新的 BFC，从而阻止父子元素的边距重叠

什么 BFC？如何触发 BFC？​

区块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

下列方式会创建块格式化上下文：

  • 文档的根元素（<html>）。
  • 浮动元素（即 float 值不为 none 的元素）。
  • 绝对定位元素（position 值为 absolute 或 fixed 的元素）。
  • 行内块元素（display 值为 inline-block 的元素）。
  • 块级容器（display 属性为 inline-block、table-cell、table-caption、flex、inline-flex）： 元素的 display 属性设置为 inline-block、table-cell、table-caption、flex、inline-flex 时，会创建一个 BFC。这些属性将元素视为块级容器，使其内部的元素按照 BFC 规则进行布局。
  • overflow 值不为 visible 或 clip 的块级元素。（这个在父级嵌套子元素并发生重叠时才有效，两个垂直 div 之间的重叠这个不管用）
  • 弹性元素（display 值为 flex 或 inline-flex 元素的直接子元素），如果它们本身既不是弹性、网格也不是表格容器。
  • 网格元素（display 值为 grid 或 inline-grid 元素的直接子元素），如果它们本身既不是弹性、网格也不是表格容器。

格式化上下文影响布局，通常，我们会为定位和清除浮动创建新的 BFC，而不是更改布局，因为它将：

  • 包含内部浮动。
  • 排除外部浮动。
  • 阻止外边距重叠。

BFC/IFC/GFC/FFC 区别？​

BFC：块级格式化上下文(Block Formatting Context)，BFC 是一个独立渲染个块级盒子，他决定了内部元素的排列分布。BFC 内部元素可能会发生 margin 重叠，而不同 BFC 的元素会防止元素外边距重叠。

GFC：网格格式化上下文(Grid Formatting Context),GFC 是使用网格布局进行渲染上下文，用于描述网格布局中的元素如何定位和相互影响的规则。

FFC：弹性伸缩格式化上下文(Flex Formatting Context)，FFC 是使用 flex 弹性盒子布局进行渲染上下文，用于描述伸缩布局中的元素如何排列和定位的规则。

IFC：内联格式化上下文(Inline Formatting Context)，IFC 是一个内联元素的渲染区域，内联元素按照一行排列，水平方向布局。IFC 内的行内元素水平布局，遵循基线对齐，垂直方向的 margin 不会发生重叠。

伪类和伪元素有什么区别？​

这个是两种不同的概念。

伪类，更多的是对某种特殊状态的描述。常见的伪类有 :hover，:active，:focus，:visited，:link，:not，:first-child，:last-child 等等。伪类通常用于根据用户行为或文档的状态来为元素应用样式。

伪元素，是一种没有真实存在存在于 DOM 树中的虚拟元素，它们可以像正常的 html 元素一样定义 css，但无法使用 JavaScript 获取。常见伪元素有 ::before，::after，::first-letter，::first-line 等等。伪元素用于向文档中的元素添加特定的样式或内容，而不是选择元素本身。

CSS3 明确规定了，伪类用一个冒号(:)来表示，而伪元素则用两个冒号(::)来表示。但目前因为兼容性的问题，它们的写法可以是一致的，都用一个冒号(:)就可以了，所以非常容易混淆。

总结

  • 选择对象：伪类选择处于特定状态的元素，而伪元素选择元素的特定部分。
  • 语法：伪类以冒号 : 开头，伪元素以双冒号 :: 开头。
  • 位置：伪类是选择器的一部分，而伪元素是选择器的一部分，用于选择器所选元素的特定部分。

如何使用 CSS 绘制一个三角箭头？​

核心点：利用 border 宽度来绘制，无非就是设置上下左右哪个边框宽度而已。要注意的点是，其中两个边为透明边框，然后三角形底边这个方向的边框为颜色。如下：

<div
    style="width: 0;height: 0; border-left: 100px solid transparent;border-right: 100px solid transparent; border-bottom: 100px solid green;"
></div>

image-20240725022639845

如何使用 CSS 绘制一个扇形？​

类似与绘制三角形，绘制一个圆，然后指定一部分边框颜色。

<div
    style="width: 0;height: 0; border-radius: 100px; border: 100px solid transparent;border-bottom-color: red;"
></div>

image-20240725023107300

如果要绘制任意弧度扇形，代码如下：

<html>
    <head>
        <meta charset="UTF-8" />
        <title>扇形绘制</title>
        <style>
            .shanxing {
                position: relative;
                width: 88px;
                height: 88px;
                border-radius: 88px;
                background-color: #2e77f7;
            }

            .sx1 {
                position: absolute;
                width: 88px;
                height: 88px;
                transform: rotate(0deg);
                clip: rect(
                    0px,
                    44px,
                    88px,
                    0px
                ); /*这个clip属性用来绘制半圆，在clip的rect范围内的内容显示出来，使用clip属性，元素必须是absolute的 */
                border-radius: 44px;
                background-color: #fff;
                /*-webkit-animation: an1 2s infinite linear; */
            }

            .sx2 {
                position: absolute;
                width: 88px;
                height: 88px;
                transform: rotate(0deg);
                clip: rect(0px, 88px, 88px, 44px);
                border-radius: 44px;
                background-color: #fff;
                /*-webkit-animation: an2 2s infinite linear;*/
            }

            /*绘制一个45度扇形*/
            .shanxing1 .sx2 {
                transform: rotate(45deg);
            }

            /*绘制一个90度扇形*/
            .shanxing2 .sx2 {
                transform: rotate(90deg);
            }

            /*绘制一个135度扇形*/
            .shanxing3 .sx2 {
                transform: rotate(135deg);
            }

            /*绘制一个225度扇形*/
            .shanxing4 .sx1 {
                transform: rotate(45deg);
            }
            .shanxing4 .sx2 {
                background-color: #2e77f7;
            }

            /*绘制一个颜色扇形*/
            .shanxing5 .sx1 {
                transform: rotate(180deg);
            }
            .shanxing5 .sx2 {
                background-color: #2e77f7;
            }
        </style>
    </head>

    <body>
        扇形制作原理，底部一个纯色原形，里面2个相同颜色的半圆，可以是白色,内部半圆按一定角度变化，就可以产生出扇形效果
        <p>/*绘制一个45度扇形*/</p>
        <div class="shanxing shanxing1">
            <div class="sx1"></div>
            <div class="sx2"></div>
        </div>
        <p>/*绘制一个90度扇形*/</p>
        <div class="shanxing shanxing2">
            <div class="sx1"></div>
            <div class="sx2"></div>
        </div>
        <p>/*绘制一个135度扇形*/</p>
        <div class="shanxing shanxing3">
            <div class="sx1"></div>
            <div class="sx2"></div>
        </div>
        <p>/*绘制一个225度扇形*/</p>
        <div class="shanxing shanxing4">
            <div class="sx1"></div>
            <div class="sx2"></div>
        </div>

        <p>/*绘制一个颜色扇形*/</p>
        <div class="shanxing shanxing5">
            <div class="sx1"></div>
            <div class="sx2"></div>
        </div>
    </body>
</html>

注意，这里面用到了 clip 属性（已弃用: 不再推荐使用该特性。）。我们研究一下：

clip =  <rect()>  | auto

<rect()> =  rect( <top> , <right> , <bottom> , <left> )

画一条 0.5px 的线​

  • 采用 transform: scale()的方式，该方法用来定义元素的 2D 缩放转换：
transform: scale(0.5, 0.5);
  • 采用 meta viewport 的方式
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

这样就能缩放到原来的 0.5 倍，如果是 1px 那么就会变成 0.5px。viewport 只针对于移动端，只在移动端上才能看到效果

什么是 devicePixelRatio（DPR） ？有什么作用？​

Window 接口的 devicePixelRatio 返回当前显示设备的物理像素分辨率与CSS 像素分辨率之比。此值也可以解释为像素大小的比率：一个 CSS 像素的大小与一个物理像素的大小。简单来说，它告诉浏览器应使用多少屏幕实际像素来绘制单个 CSS 像素。

window.devicePixelRatio = 设备的物理像素 / CSS像素。

vw、vh 是什么？​

vw和vh是 CSS 中的相对长度单位，分别表示视口宽度（Viewport Width）和视口高度（Viewport Height）的百分比。

  • vw：视口宽度的百分比，1vw 等于视口宽度的 1%。
  • vh：视口高度的百分比，1vh 等于视口高度的 1%。

视口是指浏览器中用于显示网页内容的区域。视口的宽度和高度会根据浏览器窗口的大小动态调整。

transform 和 translate 有什么区别？有什么作用？​

这两个容易搞混是因为单词比较像，但是两个东西是不一样的。transform（变换）是一个 css 属性，提供一些如评议，缩放等转换效果。translate（平移）可以作为 transform 的一个平移函数来使用。如：transform: translate(120px, 50%);。transform 包含一下常用的属性值：

  1. translate（平移）： 通过translate()函数可以对元素进行平移操作。可以指定水平方向和垂直方向的平移距离，单位可以是像素（px）或百分比（%）。

    transform: translate(100px, 50px); /* 水平方向平移100px，垂直方向平移50px */

  2. rotate（旋转）： 通过rotate()函数可以对元素进行旋转操作。可以指定旋转的角度，单位可以是度数（deg）或弧度（rad）。

    transform: rotate(45deg); /* 顺时针旋转45度 */

  3. scale（缩放）： 通过scale()函数可以对元素进行缩放操作。可以指定水平方向和垂直方向的缩放比例，参数值为小数或百分比。

    transform: scale(1.5, 0.8); /* 水平方向放大1.5倍，垂直方向缩小0.8倍 */

  4. skew（倾斜）： 通过skew()函数可以对元素进行倾斜操作。可以指定水平方向和垂直方向的倾斜角度，单位可以是度数（deg）或弧度（rad）。

    transform: skew(20deg, -10deg); /* 水平方向倾斜20度，垂直方向倾斜-10度 */

  5. matrix（矩阵变换）： 通过matrix()函数可以使用矩阵变换来对元素进行自定义的多种变换效果。需要指定 6 个值的矩阵参数。

    transform: matrix(a, b, c, d, e, f); /* 自定义矩阵变换 */

这些transform属性可以单独使用，也可以结合使用，以实现更复杂的变换效果。同时，还可以通过transform-origin属性来指定变换的基准点，默认为元素的中心点。需要注意的是，transform属性只影响元素的视觉呈现，而不改变元素的布局或占用空间。

translate 也可以作为单独的 css 属性使用，允许你单独声明平移变换，并独立于 transform 属性。这在一些典型的用户界面上更好用，而且这样就无需在 transform 中声明该函数并记住转换函数的确切顺序了。如：translate: 50% -40%;

transition 和 animation 有什么区别？如何使用？​

在 CSS 中，transition 和 animation 都是用来实现动画效果的属性，但它们有一些区别和各自的用法：

transition​

  • 作用：transition 属性用于控制元素在状态改变时的过渡效果，比如改变颜色、尺寸或位置时的平滑过渡。
  • 语法：transition: property duration timing-function delay;
    • property：指定需要过渡的 CSS 属性，如 all、width、color 等。
    • duration：指定过渡的持续时间，单位为秒或毫秒。
    • timing-function：指定过渡的时间函数，如 ease、linear、ease-in-out 等。
    • delay：指定过渡开始前的延迟时间，单位为秒或毫秒。
  • 示例：下面是一个示例，当鼠标悬停在元素上时，使元素的背景颜色在 0.3 秒内发生变化并使用缓动函数：
.element {
    transition: background-color 0.3s ease;
}

.element:hover {
    background-color: red;
}

animation​

  • 作用：animation 属性允许你创建自定义的动画效果，可以定义动画的关键帧和持续时间等参数。
  • 语法：animation: name duration timing-function delay iteration-count direction fill-mode;
    • name：指定动画的名称，对应 @keyframes 中定义的动画。
    • duration：指定动画的持续时间，单位为秒或毫秒。
    • timing-function：指定动画的时间函数，如 ease、linear、ease-in-out 等。
    • delay：指定动画开始前的延迟时间，单位为秒或毫秒。
    • iteration-count：指定动画的播放次数，可以是具体次数或 infinite。
    • direction：指定动画播放的方向，如 normal、alternate。
    • fill-mode：指定动画在播放前和播放后如何样式，如 forwards、backwards。
  • 示例：下面是一个示例，创建一个从左到右移动的动画：
@keyframes slide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100px);
    }
}

.element {
    animation: slide 1s ease infinite alternate;
}

区别​

  • transition 用于在状态变化时对元素的 CSS 属性进行平滑过渡，而 animation 则是用来创建自定义的动画效果。
  • transition 更适合简单的过渡效果，而 animation 更适合复杂的动画效果或需要自定义控制的动画。
  • transition 的属性值通常是在状态变化时触发，而 animation 的动画效果是通过 @keyframes 定义的关键帧序列来控制。

根据需求选择合适的属性来实现所需要的动画效果。

@keyframes语法​

@keyframes identifier {
    0% {
        top: 0;
        left: 0;
    }
    30% {
        top: 50px;
    }
    68%,
    72% {
        left: 50px;
    }
    100% {
        top: 100px;
        left: 100%;
    }
}

在 CSS 中，link 和 @import 都是用来引入外部样式表的方法，但它们之间有一些区别：

  • 作用：link 标签用于在 HTML 文档中引入外部样式表文件。
  • 位置：link 标签通常放在文档的 <head> 部分，用于全局引入样式。
  • 并行加载：link 标签可以并行加载，不会阻塞页面的渲染。
  • 兼容性：由于 link 是 HTML 元素，因此在所有浏览器中都能正常工作。
  • 示例：以下是一个使用 link 标签引入外部样式表的示例：
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>
        <!-- 页面内容 -->
    </body>
</html>

@import 规则​

  • 作用：@import 规则用于在 CSS 文件中引入外部样式表，只能用在 CSS 文件中。
  • 位置：@import 规则通常放在 CSS 文件的开头，用于局部引入样式。
  • 加载方式：@import 引入的样式表会在主样式表加载完成后再加载，可能会导致页面加载速度变慢。CSS 文件解析时才会加载外部样式表，它会阻塞页面的渲染
  • 兼容性：在一些较老的浏览器中可能存在兼容性问题。
  • 示例：以下是一个在 CSS 文件中使用 @import 规则引入外部样式表的示例：
/* styles.css */
@import url("otherstyles.css");

区别​

  • link 是 HTML 元素，而 @import 是 CSS 规则。
  • link 可以在 HTML 中使用，也可以同时引入多个样式表，并且可以并行加载，不会阻塞页面的渲染；而 @import 只能在 CSS 文件中使用，会在主样式加载完成后再加载引入的样式，可能会导致页面加载速度变慢。
  • 通常推荐优先选择使用 link 标签来引入外部样式表，除非有特殊需求需要使用 @import 规则。
  • <link> 元素引入的样式表具有较高的优先级，可以使用 CSS 的层叠机制进行覆盖。@import 声明引入的样式表优先级较低，会被后续的样式规则覆盖。

什么是浮动？如何清除浮动？​

在 CSS 中，浮动（float）是一种布局技术，可以让元素在其父元素中向左或向右移动，同时让其他内容环绕在其周围。浮动通常用于创建多栏布局或使文本环绕图片等场景。

浮动可以让元素脱离正常的文档流，向左或向右移动，其他内容会围绕着浮动元素。

语法：float:left | right;

image-20240725152313524

image-20240725152253107

如何清除浮动？

清除浮动（Clearing Floats）是在网页布局中常用的技术，用于解决浮动元素引起的父元素高度塌陷或布局错乱的问题。当一个元素浮动时，它会脱离正常的文档流，导致父元素无法正确计算其高度，从而影响其他元素的布局。

清除浮动的原因是：1、子元素设置浮动后导致父元素高度塌陷，无法正确计算高度。2、浮动导致其他非浮动元素布局混乱或者重叠。

清除浮动的方式：

  1. 使用空的 clear 元素： 在浮动元素后面添加一个空的<div>元素，并为其应用clear: both;样式。这将创建一个空元素，它会强制使父元素包含浮动元素，并清除浮动带来的影响。

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

image-20240725152805156

  1. 使用clear属性和 clearfix 类：创建一个 CSS 类，可以将其应用于包含浮动元素的父元素上。该类应该包含clear: both;样式，以清除浮动。

    .clearfix::after {
        content: "";
        display: table;
        clear: both;
    }
    <div class="clearfix">
        <!-- 包含浮动元素的内容 -->
    </div>

  2. 使用 overflow 属性： 通过设置父元素的overflow属性为auto或hidden，可以触发 BFC（块级格式化上下文），从而清除浮动。

.parent {
    overflow: hidden; /* 或者 overflow: auto; */
}
<div class="parent">
    <!-- 包含浮动元素的内容 -->
</div>

使用 clear 属性清除浮动的原理？​

在 CSS 中，clear 属性用于规定一个元素是否可以放在其前面浮动元素的旁边。使用 clear 属性可以清除浮动元素对当前元素的影响，确保元素在浮动元素下方显示，而不会受到浮动元素的影响。

clear 属性的工作原理：​

  1. 清除浮动的元素：当一个元素设置了 clear 属性时，浮动元素会被清除，从而使得当前元素不会受到浮动元素的影响。

  2. 取值：clear 属性可以取三个值：

    • left：元素的顶部边缘必须高于页面中之前出现的左浮动框的底边。
    • right：元素的顶部边缘必须高于页面中之前出现的右浮动框的底边。
    • both：元素的顶部边缘必须高于页面中之前出现的任何浮动框的底边。

  3. 在哪里使用：通常，clear 属性会应用在需要清除浮动的元素上，确保在该元素之后的内容不受浮动元素的影响。

示例：​

假设有一个父元素包含了两个浮动的子元素，我们希望在这两个浮动元素后面放置一个清除浮动的元素：

HTML 结构​

<div class="parent">
    <div class="float-left">左浮动元素</div>
    <div class="float-right">右浮动元素</div>
    <div class="clearfix">清除浮动的元素</div>
</div>

CSS 样式​

.float-left {
    float: left;
    width: 50%;
}

.float-right {
    float: right;
    width: 50%;
}

.clearfix {
    clear: both;
}

在这个示例中，.clearfix 元素设置了 clear: both;，这样可以确保在这个元素后面的内容不受之前浮动元素的影响，从而正确地清除浮动。

image-20240725155151661

image-20240725155209349

flex 有什么作用？有哪些常见的属性？​

flex 用来生成弹性盒布局，也叫 flexbox。 flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。作为对比的是另外一个二维布局 CSS Grid Layout，可以同时处理行和列上的布局。

通过在容器上指定display:flex或者display: inline-flex;可以生成一个 flex 布局。

作用在容器的属性有：

  • flex-direction:决定主轴的方向
flex-direction: row | row-reverse | column | column-reverse;
  • flex-wrap:默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
flex-wrap: nowrap | wrap | wrap-reverse;
  • flex-flow: flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap
flex-flow: <flex-direction> || <flex-wrap>;
  • justify-content:属性定义了项目在主轴上的对齐方式。
justify-content: flex-start | flex-end | center | space-between | space-around;
  • align-items:定义项目在交叉轴上如何对齐。
align-items: flex-start | flex-end | center |
    baseline（项目的第一行文字的基线对齐） | stretch(默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度);
  • align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
align-content: flex-start | flex-end | center | space-between | space-around |
    stretch;

作用在项目上的属性有：

  • order：定义项目的排列顺序。数值越小，排列越靠前，默认为 0。
order: <integer>;
  • flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为 1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为 2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍。
flex-grow: <number>; /* default 0 */
  • flex-shrink：定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为 1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为 0，其他项目都为 1，则空间不足时，前者不缩小。负值对该属性无效。
flex-shrink: <number>; /* default 1 */
  • flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如 350px），则项目将占据固定空间。
flex-basis: <length> | auto; /* default auto */
  • flex：flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
flex: none | [ < "flex-grow" > < "flex-shrink" >? || < "flex-basis" >];
  • align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch;

grid 有什么作用？有哪些常见属性？​

Grid 是 CSS 网格布局，主要用来二维布局，将页面分割为行和列的网格。

常见的 Grid 属性：

  1. display：grid：用于定义一个元素作为一个网格容器并设置其子元素为网格项。
  2. grid-template-columns：定义网格布局的列，可以指定列的数量、宽度、最小宽度、最大宽度等。
  3. grid-template-rows：定义网格布局的行，可以指定行的数量、高度、最小高度、最大高度等。
  4. grid-gap 或 grid-column-gap 和 grid-row-gap：设置网格行列之间的间距。
  5. grid-column 和 grid-row：定义网格项的起始和结束位置，可以跨越多个列和行。
  6. justify-items 和 align-items：用于设置网格项在网格单元格内的水平和垂直对齐方式。
  7. justify-content 和 align-content：用于设置网格容器内所有网格项的水平和垂直对齐方式。
  8. grid-auto-rows 和 grid-auto-columns：定义未被显式定义的网格行或列的大小。
  9. grid-auto-flow：定义如何分配自动布局网格中的项目。

什么是重绘和重排？有什么区别？什么情况下会触发重绘和重排？​

重绘(Repaint)和重排(Reflow)是网页渲染中的两个概念。

重绘：指的是当前页面元素的外观（颜色、背景、阴影）等发生改变，但是不影响浏览器的布局时，浏览器会重新绘制该元素。重绘只会更新元素的样式，而不会改变元素的大小和位置。

重排：指的是当前元素的尺寸、宽高等发生改变时，引起了浏览器的布局发生改变，浏览器会重新计算元素的大小和位置，然后重绘页面。重绘会涉及到整个页面和文档树的重新布局和绘制，因为一个元素大小和位置的变化有可能会影响到其他元素的大小位置布局，所以必须重新绘制整个页面。

区别：

  • 影响范围：重绘只会设计当前元素的样式更新，不会涉及到整个布局的改变。而重排会重新整个页面元素的布局。
  • 开销：重绘<重排

触发条件：

  • 重绘（Repaint）会在元素的样式改变时触发，比如颜色、背景色等属性的变化。
  • 重排（Reflow）会在影响文档布局的任何改变时触发，比如添加或删除元素、改变元素的位置、大小、内容等。

触发重排和重绘的操作：

  1. 改变元素的样式（触发重绘）。
  2. 改变元素的位置、尺寸、添加/删除元素（触发重排）。
  3. 改变浏览器窗口大小。
  4. 获取某些属性（比如 offsetTop、offsetLeft 等会导致重排）。
  5. 使用一些 JavaScript 方法如 getComputedStyle。

如何实现垂直居中？有哪些方法？​

1.flexbox

2.绝对定位，然后 top:50%;left:50%;。最后把自身宽度高度再向左移动一半：transform: translate(-50%, -50%);

3.表格布局，父元素为 table 布局，然后子元素为 table-cell。然后设置

.container {
    display: table;
    width: 100%;
    height: 100vh;
}
.content {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

4.绝对定位 + margin auto

<div style="position: relative;width: 100px;height: 100px;">
        <div style="width: 20px;height: 20px;background-color: red;margin: auto;position: absolute;top: 0;bottom: 0;left: 0;right: 0;">
        </div>
    </div>

5.绝对定位 + 负 margin


.child{
  background: tomato;
  width: 100px;
  height: 100px;
  /* 核心代码 */
  position:absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;

6.absolute + calc,前提要直到自身的宽度和高度


.child{
  background: tomato;
  width: 200px; height: 200px;
  /* 核心代码 */
  position:absolute;
  top: calc(50% - 100px);
  left: calc(50% - 100px);

7.text-align可以设置块元素或者单元格框的行内内容的水平对齐。vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

vertical-align 什么时候生效?​

vertical-align 是 CSS 中用于控制行内元素或表格单元格内部元素垂直对齐的属性。然而，它并不总是能够控制所有元素的垂直对齐，其生效的情况取决于元素的具体类型和上下文。

vertical-align 属性对行内元素（inline elements）和表格单元格内部元素（table-cell content）有效。

  • 对于行内元素（比如 <span>、<a> 等），vertical-align 属性可以控制元素相对于行框的垂直对齐方式，例如顶部对齐、底部对齐、居中等。
  • 对于表格单元格内部元素（比如 <td> 中的内容），vertical-align 可以控制元素在表格单元格中的垂直对齐方式。

vertical-align 对于块级元素（block elements）并不会生效。因为块级元素默认会占据一整行，垂直对齐的概念在这种情况下并不适用。

在表格中，vertical-align 属性可以控制表格单元格内部元素的垂直对齐方式，可以使得表格单元格内的内容在垂直方向上居中、顶部对齐、底部对齐等。

CSS3 有哪些新特性？​

1、新的选择器如：伪类选择器 伪元素选择器

2、边框圆角：border-radius，边框图片 border-image

3、盒阴影：box-shadow 文字阴影 text-shadow

4、渐变，如线性渐变和径向渐变。通过linear-gradient和radial-gradient可以实现平滑的颜色过渡效果，用于背景、文本和边框等。

5、flexbox 弹性盒子布局和 grid 网格布局

6、动画 animation 和 keyframes，过渡 trasition

7、变形转换 transform

8、响应式查询@media， 以及 vw 和 vh 等响应式单位

9、文字溢出 text-overflow:ellipsis 等以及自定义字体@font-face

10、过滤器 filter 等

11、盒模型：box-sizing

12、多列布局：column-count,column-width,column-gap

......

CSS 有哪些性能优化的方法？​

1、合并和压缩 css 文件，多个文件合并为 1 个 css 文件减少 http 请求

2、使用缓存，减少重复下载。如不变的 css 文件，字体文件等都可以使用缓存

3、使用 css 动画替代 js 动画，因为 css 动画会使用硬件加速来渲染动画，减少 cpu 的使用

4、使用 css 预处理器，可以使用预处理器可以使用如变量，mixin 等，会减少 css 重复量，而且预处理还会对 css 进行压缩

5、避免使用太复杂的选择器，嵌套层级越多，查找越复杂，计算量也就越大

6、避免引起重绘和重排，较少浏览器渲染消耗

7、对于不是必要的 css，可以懒加载，延迟到使用时再加载

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

可以继承：

  1. 字体系列属性:
  • font：组合字体
  • font-family：规定元素的字体系列
  • font-weight：设置字体的粗细
  • font-size：设置字体的尺寸
  • font-style：定义字体的风格
  • font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
  • font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。
  • font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。
  1. 文本系列属性:
  • text-indent：文本缩进
  • text-align：文本水平对齐
  • line-height：行高
  • word-spacing：增加或减少单词间的空白（即字间隔）
  • letter-spacing：增加或减少字符间的空白（字符间距）
  • text-transform：控制文本大小写
  • direction：规定文本的书写方向
  • color：文本颜色

  1. 元素可见性：visibility

  2. 表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、 table-layout;

  3. 列表布局属性：list-style-type、list-style-image、list-style-position、list-style

  4. 生成内容属性：quotes

  5. 光标属性：cursor

  6. 页面样式属性：page、page-break-inside、windows、orphans

  7. 声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

不可以继承：

  1. display：规定元素应该生成的框的类型；
  2. 文本属性：
  • vertical-align：垂直文本对齐
  • text-decoration：规定添加到文本的装饰
  • text-shadow：文本阴影效果
  • white-space：空白符的处理
  • unicode-bidi：设置文本的方向

  1. 盒子模型的属性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left

  2. 背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment

  3. 定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

  4. 生成内容属性：content、counter-reset、counter-increment

  5. 轮廓样式属性：outline-style、outline-width、outline-color、outline

  6. 页面样式属性：size、page-break-before、page-break-after

  7. 声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

移动端如何适配 1px?​

产生的原因：在移动端适配 1px 的问题是指在高密度屏幕（如 Retina 屏幕）下，使用 CSS 实现边框、线条等细小元素时，如何保持其显示为物理像素级别的 1px 而不出现模糊或变粗的情况。以下是一些常见的解决方法：

  1. 可以通过 CSS 媒体查询检测设备像素比 DPR（device pixel ratio），然后根据不同的设备像素比来应用不同的样式，以确保 1px 的显示效果。
@media only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min--moz-device-pixel-ratio: 2),
    only screen and (-o-min-device-pixel-ratio: 2/1),
    only screen and (min-device-pixel-ratio: 2) {
    .hairline {
        border: 0.5px solid #000; /* 在高密度屏幕下显示为1px */
    }
}
  1. 使用 viewport 缩放：通过设置 viewport 的缩放比例，可以模拟 1px 的效果，但这种方法会影响整体页面的显示比例，需要谨慎使用
  2. 使用伪元素和 transform：利用 CSS 的伪元素和 transform 属性来缩放边框或线条，以达到在高密度屏幕上显示为 1px 的效果。
  3. 如果是边框，可以用 box-shadow 模拟

CSS3 如何提高动画渲染性能？如何触发硬件加速？有哪些方法？​

在使用 CSS3 动画时，可以采取一些方法来提高动画的渲染性能和流畅度，其中包括触发硬件加速。以下是一些提高 CSS3 动画性能的方法以及触发硬件加速的技巧：

提高动画渲染性能的方法：​

  1. 使用 transform 和 opacity 进行动画：

    • 尽量使用 transform 和 opacity 属性来实现动画效果，因为这些属性可以更有效地利用 GPU 加速。

  2. 避免使用 width 和 height 进行动画：

    • 避免使用 width 和 height 属性的动画，因为这种属性的变化会触发页面的重排（reflow），影响性能。

  3. 使用 requestAnimationFrame：

    • 使用 requestAnimationFrame 方法来执行动画，这样可以让浏览器更好地优化动画的渲染，提高性能。

  4. 使用硬件加速：

    • 利用硬件加速可以让浏览器将动画的计算和渲染任务交给 GPU 处理，提高动画的性能和流畅度。
触发硬件加速的方法：​

  1. 使用 transform 和 opacity：

    • 如前所述，使用 transform 和 opacity 属性可以触发硬件加速，因为这些属性是可以被 GPU 加速的。

  2. 使用 will-change 属性：

    • 在动画元素上应用 will-change 属性可以告诉浏览器该元素将会发生改变，可以提前准备对应的硬件加速环境。
.element {
    will-change: transform, opacity;
}
  1. 使用 3D 变换：
    • 即使只在 2D 平面上进行动画，也可以使用 3D 变换来触发硬件加速，例如 translateZ(0)。
.element {
    transform: translateZ(0);
}
  1. 避免 box-shadow 和 border-radius：
    • box-shadow 和 border-radius 的动画效果不容易触发硬件加速，因此在需要硬件加速的动画中应该避免它们。

通过以上方法，可以提高 CSS3 动画的渲染性能和流畅度，同时有效地触发硬件加速，让动画在现代浏览器中得到更好的表现。

什么是will-change属性？有什么作用？​

CSS 属性 will-change 为 web 开发者提供了一种告知浏览器该元素会有哪些变化的方法，这样浏览器可以在元素属性真正发生变化之前提前做好对应的优化准备工作。这种优化可以将一部分复杂的计算工作提前准备好，使页面的反应更为快速灵敏。

什么是高度塌陷？如何解决？​

高度塌陷（Height Collapse）是指当一个元素内部的所有内容都浮动（float）、绝对定位（absolute positioning）、行内块级元素（inline-block）等，导致这个元素的高度无法被正确计算，最终导致元素的高度坍缩为零的现象。这通常会导致页面布局错乱和不符合预期。

解决方法就是清除浮动：

1、空标签，设置clear: both;

2、使用 BFC。不同 BFC 回阻止外部浮动对内部造成的影响

3、设置 overflow：hidden 或 auto。

什么是层爆炸？​

"层爆炸"是一个术语，通常用于描述在使用硬件加速（GPU 加速）进行网页渲染时，由于过度使用某些 CSS 属性（如transform、opacity、filter等），导致创建了过多的渲染层，从而引发的性能问题。

在理想情况下，通过创建新的渲染层并使用 GPU 进行渲染，可以提高网页的渲染性能。然而，如果创建了过多的渲染层，那么这些层需要更多的内存来存储，同时，GPU 在处理这些层时也需要消耗更多的计算资源。这就可能导致性能下降，甚至出现页面卡顿、延迟等问题，这种现象就被称为"层爆炸"。

因此，虽然使用硬件加速可以提高性能，但是也需要注意适度，避免"层爆炸"。

如何实现响应式设计？​

1、rem 方式，根元素设置 font-size，其他用 rem 代替

2、@media 媒体查询，根据不同的屏幕尺寸设置不同的样式

3、meta 中 viewport 设置根据设备尺寸缩放

4、flex 布局，

5、grid 布局，

6、根据百分比或者 em 等方式自适应

如何实现三列布局？​

  1. flexbox
  2. grid，设置 grid-template-columns = 3
  3. 多列布局，column-count=3
  4. 双飞翼布局或者圣杯布局

什么是圣杯布局？双飞翼布局？​

如果一些项目比较老或者需要兼容 IE 浏览器无法用到新的 css 属性（比如无法使用 flex），那么网页的三拦布局就需要这两种布局方式来实现。

三栏布局是左右两侧固定宽度，中间内容区域宽度自适应，并且要求中间内容区域优先加载，因为内容区域一般是网页的核心，比较重要。

网页效果如下：

image.png

这两者的相同之处：​
  • 都是使用 float 浮动布局，
  • 左右两侧都是使用 margin 属性来实现和中间的 div 内容并排实现左、中、右三拦布局
这两者的区别：​

两者的区别在于处理中间遮挡区域的方式不同

  • 双飞翼布局：中间 div 设置了 padding-left 和 padding-right 来为左、右侧的显示让出位置，左右侧使用相对定位 position：relative，配合 left、right 属性把左右侧固定到正确的位置
  • 圣杯布局： 直接在中间 div 里新建了一个子 div，并且子 div 设置了 margin-left 和 margin-right 属性来解决中间内容被遮挡的问题

双飞翼布局代码演示：​

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"
        />
        <meta name="format-detection" content="telephone=no" />
        <title>双飞翼布局</title>
        <style>
            /* 中间一栏的宽度其实是100%，但是中间内容区域的宽度不是100%，因为中间内容区域有margin属性*/
            body {
                min-width: 700px;
            }
            header {
                background-color: wheat;
            }
            footer {
                background-color: bisque;
            }
            .float {
                float: left;
            }
            .center {
                width: 100%;
                background-color: #d8d8d8;
            }
            .left {
                width: 100px;
                background-color: red;
                margin-left: -100%;
            }
            .right {
                width: 150px;
                background-color: green;
                margin-left: -150px;
            }
            .center-wrap {
                /*给内部div添加margin，把内容放到中间栏，其实整个背景还是100%*/
                margin: 0 150px 0 100px;
            }
        </style>
    </head>
    <body>
        <header>header</header>
        <div class="center float">
            <div class="center-wrap">center</div>
        </div>
        <div class="left  float">left</div>
        <div class="right  float">right</div>
        <footer>footer</footer>
    </body>
</html>

圣杯布局代码：​

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"
        />
        <meta name="format-detection" content="telephone=no" />
        <title>圣杯布局</title>
        <style>
            /* 圣杯布局在页面宽度很小的时候，center会被挤下去，页面很丑，所以要定义一个最小宽度 ，圣杯布局下中间一栏的的宽度不是100%*/
            body {
                min-width: 500px;
            }
            header,
            footer {
                background-color: bisque;
            }
            footer {
                clear: both;
            }
            .float {
                float: left;
            }
            .container {
                /* 摆正中间栏的位置 */
                padding-left: 100px;
                padding-right: 150px;
            }
            .center {
                width: 100%;
                background-color: #d8d8d8;
            }
            .left {
                width: 100px;
                background-color: darkkhaki;
                margin-left: -100%;
                /*摆正中间栏位置后，左侧一栏也相应的向右移动了，所以需要向左边矫正*/
                position: relative;
                left: -100px;
            }
            .right {
                width: 150px;
                background-color: darksalmon;
                margin-left: -150px;
                position: relative;
                /*摆正中间栏位置后，右侧一栏也相应的向左移动了，所以需要向右边矫正*/
                right: -150px;
            }
        </style>
    </head>
    <body>
        <header>header</header>
        <div class="container">
            <div class="center float">center</div>
            <div class="left float">left</div>
            <div class="right float">right</div>
        </div>
        <footer>footer</footer>
    </body>
</html>

什么是多栏式布局？有哪些属性？​

多列布局（通常称为 multicol）是一种规范，用于将内容布置到一组列框中，就像报纸中的列一样。本指南解释了规范如何与一些常见的用例示例一起使用。

规范定义的属性有：

  • column-width
  • column-count
  • columns
  • column-rule-color
  • column-rule-style
  • column-rule-width
  • column-rule
  • column-span
  • column-fill
  • column-gap

通过给一个元素添加 column-count 或 column-width，该元素变成了多列容器，或简称为 multicol 容器。这些列是都是匿名的盒子，在规范中描述为列盒子。

如果在 multicol 容器上同时使用 column-count 和 column-width，则 column-count 将作为最大列数。因此，将按column-width 的值计算，直到达到 column-count 定义的列数。在此之后，即使有足够的空间容纳指定列宽大小的列，也不再绘制，并且额外空间在现有列之间均匀分布。

同时使用这两个属性时，可能会获得的列数少于 column-count 数值中指定的列数。

image-20240726004356969

columns 缩写来设置 column-count 和 column-width。

palce-content 和 place-items 的作用​

place-content 属性是 align-content 和 justify-content 的简写。使用这两个属性的值可以用于任何的布局情况。

place-items 是一个简写属性 ，它允许你在相关的布局（如 Grid 或 Flexbox）中可以同时沿着块级和内联方向对齐元素 (例如：align-items 和 justify-items 属性) 。如果未提供第二个值，则第一个值作为第二个值的默认值。

flex:1 是哪几个属性的缩写？flex:auto 和 flex:none 呢？​

flex:1等同于：flex-grow:1;flex-shrink:1;flex-basis:0;

flex:auto等同于：flex-grow:1;flex-shrink:1;flex-basis:auto;

flex:none等同于：flex-grow:0;flex-shrink:0;flex-basis:auto;

image-20240726135347393

image-20240726135707787

image-20240726135644503

是否使用过 css 变量？如何使用？有什么作用？​

自定义属性（有时候也被称作 CSS 变量或者级联变量）是由 CSS 作者定义的，它包含的值可以在整个文档中重复使用。由自定义属性标记设定值（比如： --main-color: black;），由 var() 函数来获取值（比如： color: var(--main-color);）复杂的网站都会有大量的 CSS 代码，通常也会有许多重复的值。举个例子，同样一个颜色值可能在成千上百个地方被使用到，如果这个值发生了变化，需要全局搜索并且一个一个替换（很麻烦哎～）。自定义属性在某个地方存储一个值，然后在其他许多地方引用它。另一个好处是语义化的标识。比如，--main-text-color 会比 #00ff00 更易理解，尤其是这个颜色值在其他上下文中也被使用到。自定义属性受级联的约束，并从其父级继承其值。

用法：

声明一个自定义属性，属性名需要以两个减号（--）开始，属性值则可以是任何有效的 CSS 值。和其他属性一样，自定义属性也是写在规则集之内的，如下：

element {
    --main-bg-color: brown;
}

注意，规则集所指定的选择器定义了自定义属性的可见作用域。通常的最佳实践是定义在根伪类 :root 下，这样就可以在 HTML 文档的任何地方访问到它了：

:root {
    --main-bg-color: brown;
}

:root 选择器的作用​

:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 html 元素，除了优先级更高之外，与 html 选择器相同。

/* 选择文档的根元素（HTML 中的 <html>） */
:root {
    background: yellow;
}

谈谈你对 styled-component 的理解？​

Styled-components 是一个流行的 CSS-in-JS 库，用于在 React 应用中管理组件样式。它允许开发者在组件级别直接编写 CSS 样式，而不需要创建额外的样式文件。以下是我对 styled-components 的理解：

  1. 组件级样式：styled-components 提倡以组件为单位管理样式，每个组件可以直接定义自己的样式，使得样式与组件的逻辑封装在一起，提高了代码的可维护性和可读性。

  2. 动态样式：styled-components 支持使用 JavaScript 表达式在样式中进行动态计算，可以根据组件的 props 或状态来动态调整样式，使得样式具有更大的灵活性。

  3. 样式复用：styled-components 支持样式的复用，可以定义一次样式并在多个组件中重复使用，减少了重复编写样式的工作量。

  4. CSS-in-JS：styled-components 将 CSS 样式直接写在 JavaScript 文件中，将 CSS 样式与组件逻辑紧密结合在一起，避免了全局 CSS 的命名冲突和作用域污染问题。

  5. 自动前缀和注入：styled-components 可以自动处理浏览器前缀，同时还能够提供样式注入，确保样式不会泄漏到其他组件。

  6. 主题支持：styled-components 支持主题变量的定义和使用，可以轻松实现主题切换功能，使得应用的样式定制更加灵活。

  7. 服务器端渲染支持：styled-components 提供了服务器端渲染的支持，确保样式在服务器端和客户端之间的一致性，提高了应用的性能和用户体验。

总的来说，styled-components 是一个强大且灵活的工具，能够帮助开发者更好地管理组件样式，提高开发效率，同时也使得样式的维护和调整变得更加简单和直观。

image.png

谈谈对 css module 的理解​

CSS Modules 是一种用于管理 CSS 样式的技术，旨在解决全局 CSS 样式的命名冲突和作用域污染问题。下面是我对 CSS Modules 的理解：

  1. 局部作用域：CSS Modules 允许将 CSS 样式文件中的类名和选择器限定在组件的作用域内，避免了全局命名冲突，确保样式只作用于当前组件。

  2. 唯一性：每个类名都会被自动转换成唯一的值，这样即使使用了相同的类名，也不会相互影响，保证了样式的隔离性。

  3. 命名约定：CSS Modules 通常采用一种约定，将 CSS 类名转换为哈希值，使得类名在运行时保持唯一性，这种哈希化的类名通常是不可读的，但确保了样式的独立性。

  4. 导出和引入：在 JavaScript/TypeScript 文件中，可以通过导入 CSS 文件来使用其样式，通过类似于对象的方式来引用样式，在编译过程中会自动处理样式的导入和引用。

  5. 组合和继承：CSS Modules 支持类似 Sass 或 Less 的功能，可以通过组合和继承的方式来复用样式，使得样式的编写更加灵活和可维护。

  6. 作用域控制：通过 CSS Modules，可以更精细地控制样式的作用域，避免样式的扩散和影响其他组件，提高了代码的可维护性和复用性。

  7. 与预处理器结合：CSS Modules 通常可以与 CSS 预处理器（如 Sass、Less）结合使用，充分发挥预处理器的功能，同时利用 CSS Modules 的样式隔离性。

总的来说，CSS Modules 是一种有助于解决 CSS 样式管理难题的技术，通过提供样式的模块化、作用域隔离和复用性，使得前端开发者能够更加方便地管理和组织项目中的样式，避免了一些常见的 CSS 样式管理问题。

什么是 Tailwind CSS? 如何评价？​

Tailwind CSS 是一个流行的 CSS 框架，它采用一种全新的方式来构建网页界面，与传统的基于类名的 CSS 方法不同，Tailwind CSS 提供了一套原子类（Atomic CSS）的方法，通过组合这些原子类来构建界面。

特点和优点：​

  1. 原子类：Tailwind CSS 的核心概念是原子类，每个类名都代表一个特定的样式属性，通过组合不同的类名来构建样式，使得样式的定义更加精细和灵活。

  2. 响应式设计：Tailwind CSS 内置了响应式设计的支持，可以通过类名来定义在不同屏幕尺寸下的样式，简化了响应式布局的开发过程。

  3. 自定义主题：Tailwind CSS 允许开发者定义自定义主题，通过配置文件可以轻松地修改颜色、字体大小、间距等样式变量，实现主题定制。

  4. 工具类丰富：Tailwind CSS 提供了丰富的工具类，涵盖了各种常见的样式属性，如背景颜色、文本样式、布局、间距等，减少了样式代码的编写量。

  5. 性能优化：Tailwind CSS 提倡使用 JIT（Just-In-Time）模式，根据实际使用的样式来动态生成 CSS，避免了生成大量未使用的样式，从而优化了性能。

  6. 社区支持：Tailwind CSS 拥有庞大的社区支持和文档资源，开发者可以轻松地找到解决方案、插件和工具，加速开发过程。

评价：​

  • 易用性高：Tailwind CSS 的原子类方法使得样式的定义更加直观和灵活，不需要额外的 CSS 文件，减少了样式代码的复杂性。

  • 快速开发：通过使用 Tailwind CSS，开发者可以快速搭建界面，减少了样式的书写时间，加速了开发效率。

  • 一致性：由于采用了原子类方法，样式的定义更为一致，有助于保持整个项目样式的一致性。

  • 学习曲线：对于习惯了传统 CSS 的开发者来说，刚开始可能需要一些时间适应 Tailwind CSS 的原子类方式，学习曲线略高。

综上所述，Tailwind CSS 是一个功能强大且灵活的 CSS 框架，适用于快速开发和维护现代化的网页界面。它的独特设计理念和丰富的功能使得它成为了许多开发者喜爱的工具之一。

display:inline;的元素设置 margin 和 padding 会生效吗？​

对于 display: inline; 的元素，设置 margin 和 padding 属性会有一些特殊的表现：

  1. Margin：水平方向的 margin 会生效，但垂直方向的 margin 不会生效。这是因为 inline 元素在垂直方向不会占据额外的空间，所以垂直方向的 margin 不会产生效果。

  2. Padding：设置 padding 会改变元素的内容框大小，但不会影响元素的布局，因为 inline 元素的大小由内容决定，padding 不会在元素外部产生任何效果。

下面是一个简单的例子，演示 display: inline; 元素设置 margin 和 padding 的情况：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"
        />
        <meta name="format-detection" content="telephone=no" />
        <title></title>
        <style>
            body {
                background-color: antiquewhite;
                padding: 100px;
            }

            .container {
                background-color: #ccc;
                height: 10rem;
            }

            .item {
                margin: 3rem;
                padding: 1rem;
                border: 1px solid red;
            }
        </style>
    </head>

    <body>
        <div class="container">
            我是<span class="item">行内元素</span
            >白日依山尽，黄河入海流。欲穷千里目，更上一层楼。白日依山尽，黄河入海流。欲穷千里目，更上一层楼。白日依山尽，黄河入海流。欲穷千里目，更上一层楼。白日依山尽，黄河入海流。欲穷千里目，更上一层楼。
        </div>
    </body>
</html>

inline 元素的 margin 与 padding 左右生效，margin 上下不生效，pading 上下看起来不生效，准确说在上下方向不会使其它元素受到挤压，仿佛不生效，如下图设置 border 会发现它其实生效了

image-20240726141955621

image-20240726142031486

:nth-child()支持哪些参数？​

根据元素在父元素的子元素列表中的索引来选择元素。换言之，:nth-child() 选择器根据父元素内的所有兄弟元素的位置来选择子元素。

语法：:nth-child() 以一个参数来描述匹配兄弟元素列表中元素索引的模式。元素索引从 1 开始。

:nth-child(<nth > [of <complex-selector-list>]?) {
    /* ... */
}

支持odd和even两个关键字。

支持An+B的函数符号。

如奇数：tr:nth-child(odd) or tr:nth-child(2n+1) 偶数：tr:nth-child(even) or tr:nth-child(2n)

第七个元素：:nth-child(7)

5 的倍数：:nth-child(5n)

第 7 个之后的元素：:nth-child(n+7)

'+' 与 '~' 选择器有什么不同​

+表示相邻该元素选择器，~表示最后的所有兄弟选择器

image-20240726143210796

position 有哪些值？有什么作用？​

在 CSS 中，position 属性用于定义元素的定位方式，控制元素在文档流中的位置。position 属性共有五个可能的取值，每个取值对应不同的定位方式：

  1. static：默认值。元素按照其在文档流中的位置进行定位，不受 top、right、bottom、left 等属性影响。

  2. relative：相对定位。元素相对于其自身在文档流中的位置进行偏移，不会影响其他元素的位置，但会占据原本的空间。

  3. absolute：绝对定位。元素相对于最近的已定位祖先元素（父元素或祖先元素中设置了 position 为 relative、absolute 或 fixed）进行定位，如果没有已定位的祖先元素，则相对于初始包含块进行定位。

  4. fixed：固定定位。元素相对于视口进行定位，即使页面滚动，元素也会固定在指定的位置不动。

  5. sticky：粘性定位。元素在跨越特定阈值前为相对定位，之后为固定定位。在用户滚动页面时，元素会在特定位置"粘"在屏幕上。

作用：

  • 控制元素位置：position 属性可以帮助开发者精确控制元素在页面中的位置，实现更复杂的布局效果。

  • 创建悬浮元素：通过 position: fixed; 可以创建悬浮在页面上不随页面滚动而移动的元素，如导航条或广告栏。

  • 实现动画效果：结合 position 属性和动画效果，可以实现元素的平滑过渡、弹出效果等动画效果。

  • 制作响应式布局：使用不同的 position 值可以帮助实现响应式布局，使元素在不同屏幕尺寸下呈现不同的定位效果。

  • 创建复杂的 UI 组件：通过灵活运用不同的 position 值，可以实现各种复杂的 UI 组件，如模态框、下拉菜单、轮播图等。

正确使用 position 属性可以帮助开发者实现更加灵活和多样化的布局效果，提升用户体验。

如何使用 CSS 实现网站的暗黑模式 (Dark Mode)​

要实现网站的暗黑模式，通常可以通过 CSS 变量（CSS Variables）和媒体查询结合使用来轻松切换颜色主题。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Mode Example</title>
<style>
    :root {
        --bg-color: #fff; /* 默认背景色 */
        --text-color: #333; /* 默认文本颜色 */
    }

    body {
        background-color: var(--bg-color);
        color: var(--text-color);
        transition: background-color 0.3s, color 0.3s;
    }

    /* 暗黑模式下的颜色 */
    @media (prefers-color-scheme: dark) {
        :root {
            --bg-color: #333; /* 暗黑模式背景色 */
            --text-color: #fff; /* 暗黑模式文本颜色 */
        }
    }

    /* 可以添加其他样式来适应暗黑模式 */
</style>
</head>
<body>
    <h1>Dark Mode Example</h1>
    <p>This is a simple example demonstrating dark mode using CSS.</p>
</body>
</html>

在这个示例中，--bg-color 和 --text-color 是定义的 CSS 变量，用于存储背景色和文本颜色。通过在 :root 伪类下定义这些变量，可以在整个文档中使用它们。

通过 @media (prefers-color-scheme: dark) 媒体查询，可以检测用户的系统是否处于暗黑模式下，如果是，则将 --bg-color 和 --text-color 变量重新赋值为暗黑模式下的颜色。

当用户的系统处于暗黑模式时，网站的背景色和文本颜色将自动切换为暗黑模式的配色方案，从而实现简单的暗黑模式效果。你可以将这段代码添加到你的网站中，以实现暗黑模式的切换。

一行 CSS 为网页添加暗黑模式支持​

本文将介绍一种简单易懂的方法实现网站支持暗黑模式

话不多说，我们开始吧！ 👾

以以下新闻应用程序为例：

现在仅需增加以下一行魔法 CSS：

html[theme='dark-mode'] {
    filter: invert(1) hue-rotate(180deg);
}

添加后页面展示效果：

哇偶！ 瞬间转换成暗黑模式有没有 ✌️

解析

filter CSS 属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。（参考：MDN Web 文档）

对于暗黑模式，将使用两个 filter ：invert 和 hue-rotate

invert：反转配色。黑色变为白色，白色变为黑色，所有颜色都是如此

hue-rotate：帮助我们处理所有其他非黑色和白色的颜色。 将色相旋转 180 度，我们确保应用程序的颜色主题不会改变，而只是减弱其颜色。

img

这个方法的唯一缺点是，它还会反转应用程序中的所有图像。

因此，我们将对所有图像添加相同的规则，以逆转效果。

html[theme='dark-mode'] img{
    filter: invert(1) hue-rotate(180deg);
}

我们还将向 HTML 元素添加一个 transition ，以确保过渡不会过于花哨!

html {
    transition: color 300ms, background-color 300ms;
}

实现结果 👇：

如何自定义滚动条的样式​

你可以使用以下伪元素选择器去修改基于 webkit 的浏览器的滚动条样式：

  • ::-webkit-scrollbar——整个滚动条。
  • ::-webkit-scrollbar-button——滚动条上的按钮（上下箭头）。
  • ::-webkit-scrollbar-thumb——滚动条上的滚动滑块。
  • ::-webkit-scrollbar-track——滚动条轨道。
  • ::-webkit-scrollbar-track-piece——滚动条没有滑块的轨道部分。
  • ::-webkit-scrollbar-corner——当同时有垂直滚动条和水平滚动条时交汇的部分。通常是浏览器窗口的右下角。
  • ::-webkit-resizer——出现在某些元素底角的可拖动调整大小的滑块。
/* 定义滚动条的样式 */
::-webkit-scrollbar {
    width: 12px; /* 滚动条宽度 */
}

/* 定义滚动条轨道的样式 */
::-webkit-scrollbar-track {
    background: #f1f1f1; /* 滚动条轨道背景色 */
}

/* 定义滚动条滑块的样式 */
::-webkit-scrollbar-thumb {
    background: #888; /* 滚动条滑块颜色 */
}

/* 定义滚动条滑块悬停时的样式 */
::-webkit-scrollbar-thumb:hover {
    background: #555; /* 滚动条滑块悬停时颜色 */
}

CSS 如何设置多行超出显示省略号​

使用 -webkit-line-clamp 来设置多行超出显示省略号

 width: 200px;
  word-wrap: break-word;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;

先设置宽度 加上 word-wrap 属性达到换行的目的 利用-webkit-line-clamp 限制行数 利用 overflow 属性隐藏所省略

flex 布局中 align-content 与 align-items 有何区别​

align-items 适用于每一个 flex 项目（flex item）上，用来定义项目在交叉轴上的对齐方式。

align-content 适用于整个 flex 容器（flex container），用来定义多根轴线（flex lines）在交叉轴上的对齐方式。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Alignment Example</title>
<style>
    .container {
        display: flex;
        height: 200px;
        border: 2px solid #333;
        flex-wrap: wrap;
        align-items: center;
        align-content: center;
    }

    .item {
        width: 100px;
        height: 50px;
        background-color: #f2f2f2;
        border: 1px solid #999;
        margin: 5px;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
</body>
</html>

align-items 是针对单行的，是把单行来当做一个整体进行对齐方式操作，而 align-content 是针对多行的，是把多行来当做一个整体进行对齐方式操作，所以要根据自己的需求进行选择。

image-20240726170929246

image-20240726171033497

rem、em、vw、vh 的值各是什么意思​

rem:相对于根元素的 font-size 大小

em:相对于自身元素的 font-size 大小

vw:相对于整个视窗的宽度，100vw 等于整个可视窗口宽度

vh：相对于整个视窗的高度，100vh 等于整个可视窗口高度

normalize.css 与 reset.css 的区别​

  • normalize.css: 会保留有用的样式，比如 h1 的字体大小
  • reset.css: 把所有样式都重置，比如 h1、h2、h3 的字体大小都进行了重置，保持了无样式

什么是媒体查询，JS 可以监听媒体查询吗​

MediaQueryList 是 Web API 中的一个接口，用于表示一个媒体查询列表。它通常用于 JavaScript 中，用来监听和查询媒体查询的状态变化。

MediaQueryList 接口包含以下属性和方法：

  1. matches：一个只读属性，表示媒体查询的结果是否匹配。如果匹配，则返回 true，否则返回 false。

  2. media：一个只读属性，返回媒体查询列表的媒体查询文本。

  3. addListener(listener)：方法用于向 MediaQueryList 添加一个监听器。当媒体查询状态变化时，会触发这个监听器函数。

  4. removeListener(listener)：方法用于从 MediaQueryList 中移除一个监听器。

下面是一个简单的示例，演示如何使用 MediaQueryList 监听媒体查询的变化：

// 创建一个 MediaQueryList 对象，监听屏幕宽度小于 600px 的变化
const mediaQueryList = window.matchMedia('(max-width: 600px)');

// 定义一个回调函数，处理媒体查询变化
const handleMediaQueryChange = (event) => {
    if (event.matches) {
        console.log('屏幕宽度小于 600px');
    } else {
        console.log('屏幕宽度大于等于 600px');
    }
};

// 添加监听器
mediaQueryList.addListener(handleMediaQueryChange);

// 初始状态下的处理
handleMediaQueryChange(mediaQueryList);

// 在适当的时候，移除监听器
// mediaQueryList.removeListener(handleMediaQueryChange);

在这个示例中，首先创建了一个 MediaQueryList 对象，表示屏幕宽度小于 600px 的媒体查询。然后定义了一个处理媒体查询变化的回调函数 handleMediaQueryChange，在函数中根据匹配结果输出不同的信息。最后通过 addListener 方法将监听器添加到 MediaQueryList 对象中。

通过 MediaQueryList 接口，你可以更灵活地监测媒体查询的变化，从而实现更加复杂和精细的响应式设计和交互效果。

matchMedia 方法是一个用于在 JavaScript 中执行媒体查询的方法，用于检查文档是否匹配指定的媒体查询。这个方法返回一个 MediaQueryList 对象，该对象表示文档是否匹配给定的媒体查询，以及在文档状态更改时如何通知代码。

css 加载会阻塞 DOM 树的解析和渲染吗​

在浏览器加载网页时，CSS 文件的加载通常不会阻塞 DOM 树（文档对象模型）的解析，但会影响渲染。

css 加载会直接影响网页的渲染，因为只有 css 加载完毕，构建完 CSSOM 后，渲染树(Render Tree)才会构建，然后渲染成位图

如果 html 中有加载 script 的话，还会间接影响 DOM 树的解析，因为 javascript 的下载、解析和执行和阻塞 DOM 树的解析，而 javascript 中有可能访问 CSSOM，比如 Element.getBoundingClientRect，因此 CSSOM 构建完毕以后才会开始 javascript 的执行，间接阻塞 dom 树的解析