2024年前端最新前端基础知识第六章---CSS(2)，2024年最新美团技术面试题

最后

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。

---

（4）CSS 用户界面样式

4.1 鼠标样式 cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

| 属性值 | 描述 |

| — | — |

| default | 小白 默认 |

| pointer | 小手 |

| move | 移动 |

| text | 文本 |

| not-allowed | 禁止 |

完整代码演示如下：

• 我是默认的小白鼠标样式
• 我是鼠标小手样式
• 我是鼠标移动样式
• 我是鼠标文本样式
• 我是鼠标禁止样式

• 4.2 轮廓线 outline

  给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。

  语法演示如下：

  input {outline: none; }

  4.3 防止拖拽文本域 resize

  实际开发中，我们文本域右下角是不可以拖拽的。

  语法演示如下：

  textarea{ resize: none;}

  ---

  （5）vertical-align 属性应用

  1️⃣ CSS 的 vertical-align 属性使用场景： 经常用于设置图片或者表单(行内块元素）和文字垂直对齐。

  2️⃣ 官方解释： 用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

  语法演示如下：

  vertical-align : baseline | top | middle | bottom

  | 值 | 描述 |

  | — | — |

  | baseline | 默认。将支持valign特性的对象的内容与基线对齐 |

  | top | 将支持valign特性的对象的内容与对象顶端对齐 |

  | middle | 将支持valign特性的对象的内容与对象中部对齐 |

  | bottom | 将支持valign特性的对象的文本与对象底端对齐 |

  

  5.1 图片、表单和文字对齐

  图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。

  

  此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直居中对齐了。

  5.2 解决图片底部默认空白缝隙问题

  bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。

  主要解决方法有两种：

  1️⃣ 给图片添加 vertical-align:middle | top| bottom 等。（提倡使用的）

  2️⃣ 把图片转换为块级元素 display: block;

  ---

  （6）溢出的文字省略号显示

  6.1 单行文本溢出显示省略号

  单行文本溢出显示省略号–必须满足三个条件：

  语法演示如下：

  /1. 先强制一行内显示文本/

  white-space: nowrap; （ 默认 normal 自动换行）

  /2. 超出的部分隐藏/

  overflow: hidden;

  /3. 文字用省略号替代超出的部分/

  text-overflow: ellipsis;

  6.2 多行文本溢出显示省略号

  多行文本溢出显示省略号，有较大兼容性问题， 适合于webKit浏览器或移动端（移动端大部分是webkit内核）

  语法演示如下：

  overflow: hidden;

  text-overflow: ellipsis;

  /* 弹性伸缩盒子模型显示 */

  display: -webkit-box;

  /* 限制在一个块元素显示的文本的行数 */

  -webkit-line-clamp: 2;

  /* 设置或检索伸缩盒对象的子元素的排列方式 */

  -webkit-box-orient: vertical;

  😆温馨提醒😆：更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。

  ---

  （7）常见布局技巧

  7.1 margin负值运用

  

  1️⃣ 让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框

  2️⃣ 鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置）,如果有定位，则加z-index）

  7.2 文字围绕浮动元素

  

  完整代码演示如下：

  

  【集锦】热身赛-巴西0-1秘鲁 内马尔替补两人血染赛场

  7.3 行内块巧妙运用

  页码在页面中间显示：

  1️⃣ 把这些链接盒子转换为行内块， 之后给父级指定 text-align:center;

  2️⃣ 利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中

  

  完整代码演示如下：

  <<上一页

  2

  3

  4

  5

  6

  …

  >>下一页

  到第

  页

  确定

  7.4 CSS 三角强化

  

  代码演示如下：

  .box1 {

  width: 0;

  height: 0;

  /* 把上边框宽度调大 */

  /* border-top: 100px solid transparent;

  border-right: 50px solid skyblue; */

  /* 左边和下边的边框宽度设置为0 */

  /* border-bottom: 0 solid blue;

  border-left: 0 solid green; */

  /* 1.只保留右边的边框有颜色 */

  border-color: transparent red transparent transparent;

  /* 2. 样式都是solid */

  border-style: solid;

  /* 3. 上边框宽度要大，右边框 宽度稍小，其余的边框该为 0 */
  其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

  这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  《前端开发四大模块核心知识笔记》

  

  最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

  我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。