css 知识点css 面试题相关，动态设置rem，css的预处理器，手写布局（两栏布局，圣杯布局，双飞翼布局），水平垂直

选择器 & 优先级

选择器的优先级是什么样的？*

选择器	写法	权重
内联样式	style="color: red"	1000
id选择器	#id	100
类选择器	.className	10
属性选择器	a[ref='link']	10
标签选择器	div	1
伪类选择器	li:last-child	10
伪元素选择器	li:before	1
兄弟选择器	div+p	0
子选择器	ul>li	0
后代选择器	ul a	0
通配符	*	0

特殊场景的优先级如何判断？*

!important 优先级最高
如果优先级相同，则后者高于前者
继承得到的样式，优先级最低

可继承的样式有哪些？**

字体
- font-family
- font-weight
- font-size
- font-style
文本
- text-align
- text-indent
- line-height
- word-spacing
- color...
元素
- visibility
列表布局
- list-style
光标
- cursor

伪元素和伪类是什么？如何使用？区别是什么？ *

伪元素（pseudo-element）和伪类（pseudo-class）都是 CSS 的一种选择器，用于在某些条件下将样式应用到元素上。虽然它们的名字类似，但它们的作用和用法有所不同。

伪类的语法以单冒号（:pseudo-class）作为前缀
伪元素的语法以双冒号（::pseudo-element）作为前缀
伪元素和伪类的名称都是预定义的，可以用来选择元素的某些状态或者特定位置上的元素。
使用伪类可以为元素添加某种状态下的样式，比如 :hover 选择器可以应用鼠标悬停时的样式，:active 选择器可以应用元素被激活时的样式等。
使用伪元素可以将样式应用于元素的某个特定位置，比如 ::before 和 ::after 可以在元素的内容前或内容后插入额外的内容，并可以用来创建一些特殊效果。

以下是一些常用的伪类和伪元素：

:hover - 当鼠标悬停在元素上时应用的样式。
:active - 当元素被激活（比如被点击）时应用的样式。
:focus - 当元素获得焦点时应用的样式。
:first-child - 选择元素的第一个子元素。
:last-child - 选择元素的最后一个子元素。
::before - 在元素内容之前插入一个元素。
::after - 在元素内容之后插入一个元素。

隐藏和显示相关

有哪些隐藏元素的方法？有什么区别？*

属性	是否占位	原理
display: none	否	从渲染树中删除
visibility: hidden	是	还存在渲染树中
opacity: 0	是	还存在渲染树中，只是将其透明度改为了0
position: absolute	否	元素脱离文档流，移出可视区
transform: scale(0,0)	是	缩小元素

display 和 visibility 的区别？**

他们都是让元素展示或隐藏
浏览器渲染时候，display: none 不占据空间，而visibility:hidden会占据一根树枝
继承属性来说，visivility可以继承，diplay不可继承
性能方面来说，display 会引发浏览器的重排和重绘，而visibility只会引起重绘，所以尽量避免使用display:none来隐藏或展示元素

盒模型及其特性

简单说说标准盒模型、IE盒模型分别是什么？怎么转换？ *

特点
- content + padding + border + margin
区别
- 标准盒模型：width 和 height 只包含content
- IE盒模型：width 和 height 包含 content + border + padding
如何转换
- box-sizing: content-box / border-box

图片格式以及css-sprites

图片格式有哪些？怎么应用？如何选择？*

格式	是否有损坏	是否压缩	适用场景
JPEG	有损	是	适用于保存真实照片和复杂图像
PNG	无损	是	通常用于图标、Logo 等需要透明背景的图像
GIF	有损	是	通常用于表情包、动态图等
WebP	有损+无损	是	通常用于 Web 图像、照片等需要高质量、小文件大小的应用场景中
BMP	无损	否	适用于需要高质量图像的应用场景中

css-sprites 雪碧图如何处理？

CSS Sprites 雪碧图是将多个小图标合成为一个大图标，并利用 CSS 的 background-image 和 background-position 属性来显示需要的图标部分的一种技术。这样可以减少 HTTP 请求，从而提高网站的性能。

处理 CSS Sprites 雪碧图的步骤一般如下：

将多个小图标合成一个大图标，可以使用工具如 Photoshop、Sketch、IconMoon 等生成雪碧图。
编写样式表，将背景图设为雪碧图，利用背景位置来显示需要的图标部分。代码如下：

.icon {
    background-image: url('sprites.png');
    background-repeat: no-repeat;
}
.home {
    width: 32px;
    height: 32px;
    background-position: 0 0; /* 显示第一个图标 */
}
.search {
    width: 32px;
    height: 32px;
    background-position: -32px 0; /* 显示第二个图标 */
}

.cart {
    width: 32px;
    height: 32px;
    background-position: -64px 0; /* 显示第三个图标 */
}

可以使用 CSS 预处理器或自动化构建工具来自动生成 CSS Sprites 雪碧图，以减少手动操作成本。

在处理 CSS Sprites 雪碧图时，需要注意以下几点：

选择合适的图标合成工具，保证生成的雪碧图质量和文件大小之间的平衡。
根据需要合理分配图标在雪碧图中的位置，使其易于使用和管理。
使用 background-position 来显示需要的图标部分，需要保证位置的准确性。
在使用 CSS Sprites 雪碧图时，需要考虑不同屏幕分辨率下的显示效果，以保证图标的清晰度和适配性。

像素密度与图片应用

像素密度（Pixel Density）

像素密度是指显示设备上每英寸的像素数量，也叫做“屏幕密度”或“像素密度比”。它通常用单位 “PPI”（Pixels Per Inch，每英寸像素数）来表示。

像素密度越高，同样大小的屏幕上包含的像素数量就越多，图像显示就越细腻、清晰、锐利。相反，像素密度越低，同样大小的屏幕上包含的像素数量就越少，图像显示就越模糊、粗糙、失真。

设备像素比（Device Pixel Ratio，DPR）

设备像素比是指物理像素和逻辑像素之间的比率。设备像素比越高，屏幕上包含的像素数量就越多，图像显示就越清晰、细腻。

DPR = 物理像素 / 逻辑像素 = 750 / 375 = 2

如何在图片应用是使用动态密度？

可以使用css提供的媒体查询的方式来区分不同的设备像素比。媒体查询可以根据屏幕宽度、高度、像素密度等条件来选择不同的 CSS 样式。

假如设计师提供了 @2x 和 @3x 的图片（@2x @3x 分别代表2倍图和3倍图，意思是 DPR=2 和 DPR=3 的设备上展示），我们可以通过媒体查询的方式来处理不同DPR的设备上的图片展示。代码实现如下

/* DPR为 2 的设备 */
@media only screen and (max-device-pixel-ratio: 2) {
   background: url('@2x.png') 
}
/* DPR为 3 的设备 */
@media only screen and (max-device-pixel-ratio: 3) {
   background: url('@3x.png') 
}

css 工程化和预处理

css 类库

CSS 类库是一种提供预定义 CSS 样式的代码库，开发者可以直接使用这些样式来实现页面布局和设计。

常见类库
- Bootstrap
- Foundation
- Materialize
优点
- 提高开发效率
- 提高代码复用率

css 工程化

CSS 工程化（CSS Engineering）则是一种系统化和自动化的 CSS 开发方式，通过使用预处理器、模块化、组件化等技术，将 CSS 代码拆分为多个模块或组件，

常用工具
- Sass
- Less
- PostCss
优点
- 提高代码的可维护性
- 提高代码可扩展性
- 提高可重用性

预处理器

CSS 预处理器是一种将 CSS 代码转换为浏览器可识别的 CSS 代码的工具，它扩展了原生 CSS 的语法，提供了更多的功能和特性，例如变量、函数、嵌套、继承、混合等。

常见预处理器
- Sass
- Less
- Stylus
优点
- 提高开发效率
- 提高代码的可读性
- 提高代码的可维护性。
以下是一些常见的 CSS 预处理器提供的功能：
- 变量：可以定义变量来存储重复使用的值，例如颜色、字体大小、间距等。
- 嵌套：可以使用嵌套语法来简化选择器的书写，减少代码的嵌套层级。
- 继承：可以使用继承语法来实现样式的复用，避免重复编写相似的样式代码。
- 混合：可以使用混合语法来实现样式的复用和组合，将多个样式组合成一个新的样式。
- 函数：可以定义函数来处理样式值，例如计算、处理颜色、生成渐变等。
使用方式
- 使用 CSS 预处理器需要安装对应的编译器或者集成到构建工具中。编译器会将预处理器的代码转换为浏览器可识别的 CSS 代码，并输出为 CSS 文件。常见的构建工具包括 Grunt、Gulp、Webpack 等。

后处理器

CSS 后处理器是一种在 CSS 代码经过编译后再进行处理的工具，它可以对编译后的 CSS 代码进行优化、压缩、转换等，以达到更好的性能、可读性和可维护性。常见的 CSS 后处理器包括 PostCSS、pleeease、cssnano 等。

常见的后处理器
- PostCss
- pleeease
- cssnano
优点
- 提高网页的性能
- 提高代码的可读性
- 提高代码额可维护性
- 保证不同浏览器的兼容
常见功能：
- 自动添加浏览器前缀：可以自动为 CSS 属性添加不同厂商的浏览器前缀，以保证在不同浏览器中的兼容性。
- 精简和压缩 CSS 代码：可以删除无用的 CSS 代码、压缩 CSS 代码及其属性值，以减小 CSS 文件的大小和网页的加载时间。
- 转换 CSS 代码：可以将 CSS 代码转换为不同的语法，例如将 CSS 代码转换为 SCSS 或 Less 语法，以便于后续的开发和维护。
- 优化 CSS 属性值：可以将 CSS 属性值进行简化和优化，例如将颜色值转换为缩写形式、将重复的属性值进行合并等。
使用方式
- CSS 后处理器需要在编译后将 CSS 代码进行处理，可以通过集成到构建工具中进行自动化处理。常见的构建工具包括 Grunt、Gulp、Webpack 等。

单行和多行文本超出

单行文本超戳省略

.text {
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 超出隐藏 */
    text-overflow: ellipsis; /* 使用省略号表示 */
}

多行文本超出省略

方式1

可以使用 CSS 的 -webkit-line-clamp 属性来实现。但是该属性只在 WebKit 内核的浏览器（如 Safari、Chrome）中支持。

.text {
    overflow: hidden; /* 超出隐藏 */
    text-overflow: ellipsis; /* 使用省略号表示 */
    display: -webkit-box; /*声明为弹性盒子 */
    -webkit-box-orient: vertical; /*声明为竖直方向的弹性盒子 */
    -webkit-line-clamp: 2; /* 显示行数 */
}

缺点：只支持webkit内核的浏览器（如Safari， Chrome）

方式2

使用伪元素的方式和定位的方式

p {
    position: relative;
    line-height: 18px;
    height: 40px;
    overflow: hidden;
}
p::after {
    content: '...';
    position: absolute;
    bottom: 0;
    right: 0
}

缺点：需要固定行高，灵活性不够好。

所以在上面的第二种方式的基础上，我们可以加上js来动态计算行高。

px、em、rem

多种单位的区别

百分比：子元素的百分比相对于直接父元素的对应属性
em：相对于父元素的字体大小倍数
rem：相对于根元素的字体大小倍数
vw：视窗宽度，满视窗宽度为100vw
vh：视窗高度，满视窗高度为100vh
vvmin：vw 和 vh 较小的那个
vmax：vw 和 vh 较大的那个

如何利用rem 实现响应式？

根据当前设备的视窗宽度和设计稿的宽度得到一个比例（假设设计稿的宽度都是按照750px），根据这个比例设置根font-size。以下是实现方式：

获取设备视窗宽度

    var viewportWidth = document.documentElement.clientWidth；

根据视口宽度计算根节点的 font-size

    var designWidth = 750; // 设置设计稿宽度
    var designFontSize = 100; // 设置设计稿字号大小
    // 计算根节点的 font-size
    var fontSize = viewportWidth / designWidth * designFontSize;
    // 设置根节点的 font-size
    document.documentElement.style.fontSize = fontSize + 'px';

布局

定位浮动

CSS 中的浮动是一种常用的布局方式，通过让元素脱离文档流并沿着父元素的左侧或右侧浮动，实现元素的排列和布局。浮动元素会生成一个块级框，可以放置在其他元素的左侧或右侧，如果有多个浮动元素，它们会相互排列，直到父元素的边界或者另一个浮动元素的边界。

工作原理

浮动元素脱离文档流：浮动元素不再在文档流中占据位置，不会影响后续元素的位置和排列。
浮动元素生成一个块级框：浮动元素会生成一个块级框，可以放置在其他元素的左侧或右侧，如果有多个浮动元素，它们会相互排列，直到父元素的边界或者另一个浮动元素的边界。
浮动元素对后续元素的影响：浮动元素对后续元素的位置和排列会产生影响，可能会导致元素重叠或者跨行排列。

影响

导致父元素高度塌陷，需要清除浮动或者使用其他方法解决。
浮动元素会生成一个块级框，可能会导致元素排列不符合预期，需要使用其他布局方式或者调整浮动元素的位置和大小。
浮动元素可能会导致元素重叠或者跨行排列，需要使用清除浮动或者其他方法解决。

如何解决父元素高度塌陷的问题？

给父元素设置height
浮动元素之后加一个div，并且设置 clear:both
父元素添加 overflow: hidden/auto
使用伪元素 p::after {content: '', clear:both}

简单说说如何创建BFC，以及BFC解决了哪些问题？

BFC 即块级格式化上下文，是一种 Web 布局模式，可以用来控制盒子的排列和布局。在 BFC 中，盒子按照一定的规则进行排列，不受外部元素的影响，从而解决了一些常见的布局问题。

创建 BFC 可以通过以下方式：

设置元素的 display 属性为 inline-block、table-cell、inline-flex、flex 等。
设置元素的 float 属性为 left 或 right。
设置元素的 position 属性为 absolute 或 fixed。
在元素的子元素中添加一个 overflow 属性，例如 overflow: auto overflow: hidden、overflow: scroll 等。

BFC 可以解决以下问题：

清除浮动，解决高度塌陷问题：在包含浮动元素的容器中创建 BFC，可以清除浮动对父元素高度的影响，使父元素高度自适应。
避免边距重叠：在相邻的两个盒子之间创建 BFC，可以避免它们的边距重叠，从而使页面布局更加美观。
实现多列布局：通过将多列的容器创建为 BFC，可以控制列的高度相等，从而实现多列布局。
防止浮动元素覆盖文字：在浮动元素的父元素中创建 BFC，可以防止浮动元素覆盖文字，使页面布局更加合理。

有几种方式实现两栏布局，左侧宽度固定，右侧自适应？

/* 1. 浮动 + 生成BFC */
.left {
    height: 200px;
    width: 100px;
    float: left;
}
.right {
    height: 200px;
    overflow: hidden;
}

/* 2. 浮动 + width: auto */
.container {
    height: 200px;
}

.left {
    height: 200px;
    width: 100px;
    float: left;
}
.right {
    width: auto;
    margin-left: 100px;
}

/* 3. flex 布局 */
.container {
    height: 200px;
    display: flex;
}
.left {
    height: 200px;
    width: 100px;
}
.right {
    flex: 1
}

有几种方式实现三栏布局，左右两侧固定宽度，中间自适应？

/* 1. position 定位 */
.container {
    height: 200px;
    position: relative;
}
.left {
    height: 200px;
    width: 100px;
    position: absolute;
}
.right {
    width: 100px;
    height: 200px;
    position: absolute;
    right: 0;
    top: 0;
}
.center {
    margin-left: 100px;
    margin-right: 100px;
    height: 200px;
}

/* 2. 浮动 */
.container {
    width: 100%;
}
.left {
    float: left;
    height: 200px;
    width: 100px;
}
.right {
    width: 100px;
    height: 200px;
    float: right;
}
.center {
    float: left;
    height: 200px;
    width: calc(100% - 200px);
}

/* 3. flex 布局 */
.container {
    display: flex;
}

.left {
    width: 100px;
    height: 200px;
}
.right {
    width: 100px;
    height: 200px;
}
.center {
    flex: 1;
}

/* 4. 圣杯布局 */
.container {
    height: 200px;
    padding: 0 100px;
}
.left {
    width: 100px;
    height: 200px;
    float: left;
    position: relative;
    left: -100px;
    margin-left: -100%;
}
.right {
    width: 100px;
    height: 200px;
    float: right;
    position: relative;
    left: 100px;
    margin-left: 100px;
}
.center {
    float: left;
    width: 100%;
    height: 200px;
}
<div class="container">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

/* 5. 双飞翼布局 */
.container {
    height: 200px;
}
.column {
    height: 200px;
    position: relative;
    float: left;
}
.center {
    width: 100%;
}
.inner {
    margin: 0 150px;
    height: 100%;
}
.left {
    width: 150px;
    margin-left: -100%;
}
.right {
    width: 150px;
    margin-left: -150px;
}
<div class="container">
    <div class="column center">
        <div class="inner"></div>
    </div>
    <div class="column left"></div>
    <div class="column right"></div>
</div>

水平垂直居中问题

/* 1. 绝对定位 */
div {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -width / 2;
    margin-top: -height / 2;
}

/* 2. 自我拉扯 */
div {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* 3. flex布局 */
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}