【前端面试】二、CSS 16-25

Bee.Bee.

已于 2024-08-07 13:54:52 修改

阅读量113

点赞数

分类专栏：前端面试文章标签： css 前端面试

于 2022-11-23 10:40:47 首次发布

本文链接：https://blog.csdn.net/weixin_49015558/article/details/127995236

版权

前端面试专栏收录该内容

21 篇文章 0 订阅

订阅专栏

16. overflow原理

17. 多行元素的文本省略号

18. 文本溢出显示省略号

19. display：table和table

27.text-align : center

28.margin:0 auto

29.vertical-align：middle

30.水平垂直居中

31.相邻兄弟选择器 (+)

16. overflow原理

元素设置overflow且值不为visible时，该元素就构建了一个BFC。BFC计算高度时，内部浮动元素的高度也计算在内，BFC的高度不会塌缩，达到清除浮动的目的。

visible：默认值，溢出部分可见
hidden：溢出部分隐藏
scroll：无论是否溢出，都显示滚动条
auto：根据是否溢出，自动显示或隐藏滚动条

17. 多行元素的文本省略号

-webkit-line-clamp：

非标准的CSS属性，但在WebKit引擎的浏览器（如Chrome、Safari）中得到广泛支持。可以限制在一个块元素显示文本的行数，并在超出指定行数时显示省略号。

.clamp-text {  
  display: -webkit-box;  
  -webkit-box-orient: vertical;  
  -webkit-line-clamp: 3; /* 限制显示的文本行数为3行 */  
  overflow: hidden;  
}

JS 辅助实现：

JS 动态计算文本高度，并相应截断它。方法较复杂，涉及对文本内容的测量和可能的截断。

基本思路：

创建一个与目标元素相同样式（除了height和overflow）的临时元素。
将目标元素的文本内容复制到临时元素中。
逐渐增加临时元素高度，检查其内容是否仍然完全可见，直到内容被截断。
根据临时元素的截断高度，设置目标元素高度，应用overflow: hidden; text-overflow: ellipsis;。

使用伪元素和渐变背景

通过渐变背景隐藏超出部分的文本，创造省略号的视觉效果，该方法不限制文本行数。依赖于背景颜色的选择，以与文本颜色形成对比，从而隐藏超出部分。如果背景复杂或颜色变化大，这种方法可能不适用。

.gradient-ellipsis {  
  position: relative;  
  line-height: 1.5; /* 根据需要调整 */  
  max-height: 4.5em; /* 假设我们限制为3行，每行1.5em */  
  overflow: hidden;  
}  
  
.gradient-ellipsis::after {  
  content: "";  
  position: absolute;  
  right: 0;  
  width: 100%;  
  height: 100%;  
  pointer-events: none;  
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 90%);  
}

18. 文本溢出显示省略号

text-overflow属性值：

clip：默认值。裁剪文本以隐藏超出容器的部分。
ellipsis：在文本末尾显示省略标记（...），以表示还有内容被裁剪。

text-overflow、overflow、white-space（或使用display: inline-block|flex;等布局方式，可能需要额外的CSS控制子元素换行行为）需要配合使用实现文本溢出显示省略号。

<style>  
.ellipsis {  
  width: 200px; /* 限制宽度 */  
  white-space: nowrap; /* 防止文本换行 */  
  overflow: hidden; /* 隐藏溢出的内容 或auto，但hidden更常用*/  
  text-overflow: ellipsis; /* 显示省略号 */  
  border: 1px solid #000; /* 只是为了看得更清楚 */  
}  
</style>  
  
<div class="ellipsis">  
  这是一段很长的文本，当容器宽度不够时，它会被裁剪，并在末尾显示省略号。  
</div>

19. display：table和table

语义化和结构

<table> ：用于展示统计数据、价格表等表格数据，有明确语义含义。
display: table：可以让任何元素表现像一个表格。特别是用于复杂的网格布局，而不想使用 HTML 表格标签。

样式和布局：

<table>：提供丰富的样式属性，如 border、border-collapse、width、height 等，专门用于表格样式和布局。
display: table：需通过其他 CSS 属性（如 border-spacing）模拟<table> 的布局特性，如自动调整单元格大小、处理空白等。

性能和加载：

<table>：复杂的嵌套结构可能导致页面加载慢（表格非常大或包含大量数据）。浏览器渲染表格可能会进行额外的布局计算。
display: table：使用CSS布局通常对页面加载时间影响较小，且比HTML结构更轻量。允许更灵活的布局控制，通过 CSS 选择器精确控制样式，而不需修改 HTML 结构。

维护和可访问性：

<table>：适用于真正的表格数据，提供了良好的语义结构和可访问性，便于屏幕阅读器和其他辅助技术理解和传达表格数据
display: table：并不提供与 <table> 相同的语义结构和可访问性。

文件大小：

使用 div + CSS（包括 display: table）：编写的页面文件通常比直接使用<table>标签的页面更简洁。CSS允许重用样式，通过选择器精确控制布局和样式，减少HTML中的重复结构。

20. link标签和import标签

<link>标签

定义用途：<link>标签是HTML中的一个元素，放置在HTML文档的<head>部分，用于链接CSS样式表、图标文件等外部资源。
加载和性能：在HTML加载时，<link>标签引用的CSS文件会同步下载和解析，先于DOM元素渲染前影响页面样式，有助于减少页面样式闪烁。

<link rel="stylesheet" href="styles.css">

@import规则

定义用途：是CSS中的一种特殊规则，允许在一个CSS样式表中导入另一个样式表。必须位于CSS文件最开始部分，或者在任何其他规则之前（除了@charset规则）。
加载和性能：通过@import引入的CSS文件延迟下载，在CSS文件被解析到@import时才进行，可能导致页面在CSS加载前出现无样式状态，增加渲染延迟和样式闪烁风险。

@import url("styles.css");

21. css3新特性

1.选择器：

属性选择器：允许选择具有特定属性的元素，例如[attr=value]。
伪类选择器：为特定状态的元素添加样式，如:hover、:active、:visited、:focus等，first-of-type、nth-child等结构伪类选择器。
伪元素选择器：选择元素特定部分，如::before、::after，在元素内容前后插入内容样式，常用于添加图标、装饰等。
多重选择器：使用逗号分隔来同时选择多个元素，如element1, element2。

2.盒模型：

box-sizing属性：改变默认的CSS盒模型，使其更容易布局。设置为border-box时，元素宽高度包括了内容、内边距和边框，不包括外边距。

3.颜色与背景：

透明度：增加了对透明度的支持，可以使用rgba()、hsla()、opacity 设置。
背景图像：background-size允许更改背景图像大小，background-repeat控制背景图像重复行为，background-position允许在水平垂直方向移动背景图像，background-image背景图案。
渐变：引入线性、径向渐变（linear-gradient、radial-gradient），允许在元素背景中创建平滑过渡的颜色效果。
滤镜：filter，创建丰富的视觉效果，如色彩渐变、模糊、亮度调整等。

4.边框与阴影：

边框：border-radius属性允许为边框添加圆角，border-image边框效果。
盒阴影：box-shadow属性为元素添加阴影效果，包括阴影颜色、大小、模糊度、偏移量

5.文字效果：

文本阴影：text-shadow属性为文本添加阴影效果。
文本溢出：text-overflow属性处理溢出文本的显示方式。

6.布局：

Flexbox：用于一维布局的新布局模型，提供更灵活的对齐和分布方式。
Grid：用于二维布局的新布局模型，允许将页面分割为行列，控制项目在网格中的位置大小。
多列布局：通过column-count和column-width等属性，将文本内容分成多列显示，类似报纸或杂志的版面布局。

7.动画与过渡：

过渡：transition属性允许在元素状态改变时平滑地过渡属性值，如颜色、大小、位置等。
动画：@keyframes允许创建复杂的动画效果，通过定义关键帧和过渡细节控制动画执行。
增加animation，transform，2d、3d变换

8.媒体查询：

允许根据设备的特性和屏幕尺寸适应不同的样式和布局，创建响应式网页设计。

9.其他新特性：

字体：允许嵌入字体，提供更多的字体控制选项，包括使用@font-face规则引入自定义字体文件，以及设置字体粗细、斜体、大小调整、阴影、字间距等。
@scroll-timeline：允许将动画与滚动位置相关联，创建基于滚动位置的动画效果。
subgrid：CSS Grid Layout Module Level 2中新增属性，允许嵌套网格继承其父网格的网格轨道。

参考https://www.cnblogs.com/xkweb/p/5862612.html

22. CSS3过渡和动画

Transition：

定义用途：实现元素一个或多个CSS属性从一个状态到另一个状态变化的平滑过渡。
属性指定：可指定哪些CSS属性参与过渡。
持续时间：定义过渡效果的完成时间。
时间函数：控制过渡的速度曲线。
延迟时间：在属性值变化后多久开始过渡效果。
触发条件：需要一个事件（如hover、focus、active、点击等）来触发属性值的变化。
一次性：过渡效果在每次触发时发生，不重复，除非再次触发。
概念上两帧：起始状态和结束状态，但实际过渡是平滑的。

Animation：

定义用途：允许在元素上创建动画效果。
animation属性：控制动画的多个方面，如名称（animation-name）、持续时间（animation-duration）、时间函数（animation-timing-function）、延迟时间（animation-delay）、迭代次数（animation-iteration-count）等。
详细控制：通过@keyframes定义动画关键帧，每帧指定动画在不同时间点的样式。精确控制动画的起始、中间多个状态及结束状态。
触发条件：动画不需要外部事件触发，可以自动播放，设置延迟后自动播放。
复杂效果：支持更复杂的动画效果和精细的时间控制。
JS 控制：可通过 JS 动态控制动画的播放、暂停、停止等。
重复播放：动画可配置为重复特定次数或无限次。
更多控制选项：动画迭代次数、动画方向（正向、反向、交替）、动画状态（暂停、运行）等

动画性能优化：

简化CSS规则：避免使用复杂的计算或大量嵌套的规则，减少重绘重排。
合理使用will-change：向浏览器提前告知即将变化的属性，以便浏览器优化渲染过程。
优化动画属性：优先使用transform和opacity属性，触发GPU加速，提高动画性能。
控制动画复杂度：避免动画过于复杂，影响页面加载和渲染性能。
使用requestAnimationFrame（虽然不是直接CSS动画，但常用于动画性能优化）：在浏览器重绘前执行动画更新，保持动画的流畅性。

demo

展示一个按钮，在鼠标悬停时通过过渡效果改变颜色，并且点击后会触发一个旋转动画。

#animateButton {  
  padding: 10px 20px;  
  font-size: 16px;  
  color: white;  
  background-color: blue;  
  border: none;  
  cursor: pointer;  
  /* 过渡效果设置 */  
  transition: background-color 0.3s ease, transform 0.3s ease;  
}  
  
/* 鼠标悬停时的过渡效果 */  
#animateButton:hover {  
  background-color: purple;  
}  
  
/* 定义旋转动画 */  
@keyframes rotateAnimation {  
  from {  
    transform: rotate(0deg);  
  }  
  to {  
    transform: rotate(360deg);  
  }  
}  
  
/* 点击后触发的动画 */  
#animateButton.active {  
  animation: rotateAnimation 2s infinite linear;  
}

document.getElementById('animateButton').addEventListener('click', function() {  
  // 切换类名以触发动画  
  this.classList.toggle('active');  
  
  // 可以在这里添加逻辑来在动画完成后移除类名，如果需要的话  
  // setTimeout(() => {  
  //   this.classList.remove('active');  
  // }, 2000); // 假设动画持续时间为2秒  
});

23. JS动画和css3动画

性能：

CSS3动画：高效，涉及transform和opacity时（不会layout|paint）可在浏览器合成层执行，动画渲染不阻塞主线程。
JS 动画：可能阻塞主线程（DOM更新、事件处理），常使用 requestAnimationFrame 手动优化，确保动画平滑高效。

控制：

CSS3动画：基于预定义序列和关键帧，对复杂逻辑和动态交互的支持较弱。
JS 动画：高度灵活和控制力，适合复杂逻辑、基于用户交互、精确同步的动画效果。

兼容性：

CSS3动画：依赖浏览器支持，较老浏览器的CSS3动画可能无法正常工作或表现不一致，可通过浏览器前缀（如-webkit-）和回退方案（使用JS或旧的CSS属性）增强兼容性。
JS 动画：广泛支持，兼容性通常较好，但不同浏览器性能差异可能影响JS动画表现。

实现复杂度：

CSS3动画：简单快速有效，依赖CSS规则和@keyframes。
JS 动画：复杂，需编写更多代码处理逻辑、事件监听和性能优化。

帧速与低版本浏览器：

CSS3动画：帧速表现不佳的低版本浏览器可自然降级为无动画或简单过渡效果，但降级效果可能不平滑或可预测。
JS 动画：在低版本浏览器中需额外代码检测支持情况并可能需回退机制确保动画的兼容性。

25.画一条0.5px的线

采用meta viewport的方式

控制视口大小、比例、是否允许用户缩放页面。在移动端开发中，确保视口设置正确对像素级精度的渲染至关重要，但它不直接解决绘制0.5px线的问题。

<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

采用 linear-gradient 的方式

/*添加border-image,设置为50%渐变，一半透明一半有颜色*/
.border{
    width:200px;			
    height:200px;			
    border-right:1px solid transparent;		
    border-image:linear-gradient(to right,transparent 50%,blue 50%)0 100% 0 0;
}

.half-pixel-horizontal-line {  
  height: 1px; /* 高度被设置为1px，将通过渐变模拟0.5px的效果 */  
  background: linear-gradient(to right, blue 50%, transparent 50%); /* 使用透明模拟*/  
  background-size: 2px 1px; /* 宽度2px，高度1px，只关心水平方向，高度可以是任何值（只要足够小） */  
  background-repeat: repeat-x; /* 确保渐变在水平方向上重复，但实际上由于宽度是固定的，这里可能不是必需的 */  
}

采用transform:scale()的方式

.half-px-line {  
    height: 1px; /* 原始高度 */  
    background-color: blue;  
    transform: scaleY(0.5);  
    transform-origin: 0 0; /* 确保缩放从左上角开始 */  
}

使用background-image结合SVG的方式

使用SVG画一条0.5px的线可能看起来过于复杂，但确实提供了极高的精度和灵活性。

直接在HTML中嵌入SVG：

<svg width="100%" height="1px" viewBox="0 0 100 1">  
    <line x1="0" y1="0.5" x2="100" y2="0.5" stroke="blue" stroke-width="0.5"/>  
</svg>

或者作为背景图像：

.svg-background {  
    height: 1px; /* 或者根据需要调整 */  
    background-image: url('path/to/your/svg.svg'); /* 指向你的SVG文件 */  
    background-size: 100% 100%; /* 确保SVG填充整个元素 */  
    background-repeat: no-repeat;  
}

设置box-shadow的第二个参数为0.5px

.box-shadow-line {  
    height: 1px; /* 假设是水平线 */  
    background-color: transparent; /* 透明背景 */  
    box-shadow: 0 0.5px 0 0 #000; /* 尝试绘制0.5px的阴影线 阴影垂直方向的偏移为0.5px;*/  
}

26. CSS书写顺序

为了使浏览器执行效率更高，建议如下顺序

浮动/定位/display
盒子模型：margin border padding 宽度背景色
文字样式

27.text-align : center

特点：

使文字内容在其父元素容器内水平居中，适用于文本（HTML中的文字）、inline内联元素（<span>、<a>）、inline-block内联块级元素（<img>、<input>）
父元素通常为块级元素或设置 display: block|inline-block 的元素。
应用于父元素，而非直接应用于需要居中的元素本身。

<div style="text-align: center;">  
    <img src="example.jpg" alt="示例图片"> 
    <span>这段文本将水平居中显示。</span>   
</div>

28.margin:0 auto

特点：

使div、p、h等块级元素（盒子）在其父元素内水平居中。
直接应用于需要居中的元素本身。
适用于固定宽度的盒子。若盒子无宽度或为100%，则占满父元素宽度，无法实现水平居中。
元素若有浮动或绝对/固定定位，会改变元素默认布局行为，margin: 0 auto无法生效。

<div style="width: 80%; background-color: lightgrey;">  
  <div style="width: 200px; margin: 0 auto; background-color: skyblue;">  
    我是水平居中的盒子  
  </div>  
</div>

29.vertical-align：middle

特点：

vertical-align：浏览器遇到 inline、inline-block 当做文字处理，默认基线对齐，可用该属性调节垂直对齐方式，但对块元素无效。
直接应用于元素本身。baseline：默认，基线对齐，元素底部与父元素基线对齐；top-顶部对齐；middle-中部对齐；bottom-底部对齐
如果行内块和行内文字无法通过vertical-align或行高对齐，使用子绝父相定位实现

<div style="line-height: 100px;">  
  <span style="display: inline-block; vertical-align: middle; height: 50px;">文本或块</span>  
  <img src="example.jpg" style="vertical-align: middle; height: 50px;" alt="示例图片">  
</div>  
  
<!-- 如果上述方法不满足需求，可以使用定位 -->  
<div style="position: relative; height: 100px;">  
  <span style="position: absolute; top: 50%; transform: translateY(-50%); display: inline-block; height: 50px;">文本或块</span>  
  <img src="example.jpg" style="position: absolute; top: 50%; transform: translateY(-50%); height: 50px;" alt="示例图片">  
</div>

30.水平垂直居中

特点：让div、p、h等标签（盒子）水平垂直居中

定位实现

.father{
    position: relative;
}

.son{
    position: absolute;
    left: 50%;
    /* margin-left: -150px; */
    top: 50%;
    /* margin-top: -150px; */
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background-color:pink
}

text-align、vertical-align实现

<style>
.father{
    width: 600px;
    height: 600px;
    background-color:pink;
    line-height: 600px;
    text-align: center;
}

img {
    vertical-align: middle;
}
</style>


<div class="father">
    <img src="../images/1.jpg">
</div>

flex实现

<div class="flex-container">  
    <div class="centered-item">我是居中的内容</div>  
</div>

.flex-container {  
    display: flex; /* 启用flex布局 */  
    justify-content: center; /* 水平居中 */  
    align-items: center; /* 垂直居中 */  
    height: 100vh; /* 容器高度设为视窗高度的100% */  
    /* 可以根据需要添加宽度 */  
    width: 100%; /* 或者设置为特定宽度 */  
    background-color: lightgrey; /* 背景色，便于观察效果 */  
}  
  
.centered-item {  
    /* 这里可以根据需要设置居中元素的样式 */  
    color: #333;  
    font-size: 24px;  
    /* 如果需要，还可以设置宽度、高度、边距等 */  
}

grid实现

<div class="grid-container">  
    <div class="centered-item">我是居中的内容</div>  
</div>

.grid-container {  
    display: grid; /* 启用Grid布局 */  
    place-items: center; /* 简写属性，同时设置justify-items和align-items为center，实现垂直和水平居中 */  
    height: 100vh; /* 容器高度设为视窗高度的100% */  
    /* 如果需要，可以设置具体的宽度 */  
    width: 100%; /* 或者一个具体的宽度值 */  
    background-color: lightgrey; /* 背景色，便于观察效果 */  
}  
  
.centered-item {  
    /* 这里可以根据需要设置居中元素的样式 */  
    color: #333;  
    font-size: 24px;  
    /* 如果需要，还可以设置宽度、高度、边距等 */  
}

31.相邻兄弟选择器 (`+`)

作用：用于选择紧接在另一元素后的元素，且两者共享相同父元素。
应用：循环组件中，给除了第一个元素之外的所有元素添加样式

示例：除第一个外的所有列表项的文本颜色都改为红色，因为每个列表项（除了第一个）都紧跟在另一个列表项后面，所以它们都会被选中。

<ul>  
  <li>第一个列表项</li>  
  <li>第二个列表项</li>  
  <li>第三个列表项</li>  
  <li>第四个列表项</li>  
</ul>

/* 使用相邻兄弟选择器给后续列表项添加样式 */  
li + li {  
  color: red; /* 举例：将文本颜色改为红色 */  
}

/* 更优雅的做法：给除了第一个列表项之外的所有列表项添加样式 */  
li:not(:first-child) {  
  /* 在这里添加您想要的样式 */  
  border-top: 1px solid #000; /* 举例：顶部边框 */  
}

Bee.Bee.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录