2024年Web前端最新掌握这20个CSS技巧提升你的CSS技能，2024年最新字节面试算法题

web浏览器中的javascript

• 客户端javascript
• 在html里嵌入javascript
• javascript程序的执行
• 兼容性和互用性
• 可访问性
• 安全性
• 客户端框架
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

window对象

• 计时器

• 浏览器定位和导航

• 浏览历史

• 浏览器和屏幕信息

• 对话框

• 错误处理

• 作为window对象属性的文档元素

}

如何提升你的CSS技能？掌握这20个css技巧即可[完整版]

8、使用 “OWL选择器”

=============

使用通用选择器（universal selector）* 和相邻的兄弟选择器（adjacent sibling selector）+ 可以提供一个强大的的CSS功能，给紧跟其他元素中的文档流中的所有元素设置统一的规则

* + * {

margin-top: 1.5rem;

}

这是一个很棒的技巧，可以帮你创建更加均匀的类型跟间距。在上面的列子中，跟在其他元素后面的元素，比如说H3后面的H4，或者一个段落之后的一个段落，他们之间至少1.5rems的间距（大约为30px）

9、一致的垂直结构（Consistent Vertical Rhythm）

=====================================

一致的垂直节奏提供了一种视觉美学，使内容更具可读性。如果owl选择器过于通用，请在元素内使用通用选择器（*）为布局的特定部分创建一致的垂直节奏：

.intro > * {

margin-bottom: 1.25rem;

}

10、对更漂亮的换行文本使用 box-decoration-break

===================================

假设您希望对换行到多行的长文本行应用统一的间距、边距、突出显示或背景色，但不希望整个段落或标题看起来像一个大块。Box Decoration Break属性允许您仅对文本应用样式，同时保持填充和页边距的完整性。如果要在悬停时应用突出显示，或在滑块中设置子文本样式以具有突出显示的外观，则此功能尤其有用：

.p {

display: inline-block;

box-decoration-break: clone;

-o-box-decoration-break: clone;

-webkit-box-decoration-break: clone;

}

内联块声明允许将颜色、背景、页边距和填充应用于每行文本，而不是整个元素，克隆声明确保将这些样式均匀地应用于每行。

11、等宽表格单元格

==========

表格可能很难处理，所以尝试使用table-layout：fixed来保持单元格相等宽度：

.calendar {

table-layout: fixed;

}

如何提升你的CSS技能？掌握这20个css技巧即可[完整版]

12、强制使用属性选择器显示空链接

=================

这对于通过CMS插入的链接特别有用，CMS通常不具有类属性，并帮助您在不影响级联的情况下对其进行特定样式设置。例如，元素没有文本值，但href属性有一个链接：

a[href^=“http”]:empty::before {

content: attr(href);

}

13、样式“默认”链接

===========

说到链接样式，您可以在几乎每个样式表中找到一个通用的A样式。这迫使您为子元素中的任何链接编写额外的覆盖和样式规则，并且在使用像WordPress这样的CMS时，可能会导致您的主链接样式比按钮文本颜色更容易出现问题。尝试这种较少干扰的方式为“默认”链接添加样式：

a[href]:not([class]) {

color: #999;

text-decoration: none;

transition: all ease-in-out .3s;

}

14、比率框

======

要创建具有固有比率的框，您需要做的就是将顶部或底部填充应用于div：

.container {

height: 0;

padding-bottom: 20%;

position: relative;

}

.container div {

border: 2px dashed #ddd;

height: 100%;

left: 0;

position: absolute;

top: 0;

width: 100%;

}

使用20％进行填充使得框的高度等于其宽度的20％。无论视口的宽度如何，子div都将保持其纵横比（100％/ 20％= 5：1）。

如何提升你的CSS技能？掌握这20个css技巧即可[完整版]

15、风格破碎的图像

==========

这个技巧不是关于代码缩减，而是关于细化设计细节的。破碎的图像发生的原因有很多，要么不雅观，要么导致混乱（只是一个空元素）。用这个小小的CSS创建更美观的效果：

img {

display: block;

font-family: Helvetica, Arial, sans-serif;

font-weight: 300;

height: auto;

line-height: 2;

position: relative;

text-align: center;

width: 100%;

}

img:before {

content: “We’re sorry, the image below is missing 😦”;

display: block;

margin-bottom: 10px;

}

img:after {

content: "(url: " attr(src) “)”;

display: block;

font-size: 12px;

}

16、使用rem进行全局大小调整；使用em进行局部大小调整

=============================

在设置根目录的基本字体大小后，例如html字体大小：15px；，可以将包含元素的字体大小设置为rem:

article {

font-size: 1.25rem;

}

aside {

font-size: .9rem;

}

然后将文本元素的字体大小设置为em

h2 {

font-size: 2em;

}

p {

font-size: 1em;

}

现在，每个包含的元素都变得分区化，更易于样式化、更易于维护和灵活。

web开发中该用 em 还是 rem 呢？

如何提升你的CSS技能？掌握这20个css技巧即可[完整版]

17、隐藏未静音的自动播放视频

===============

当您处理无法从源代码轻松控制的内容时,这对于自定义用户样式表来说是一个很好的技巧。这个技巧将帮助您避免在加载页面时自动播放视频中的声音干扰访问者，并再次提供了精彩的：not（）伪选择器：

video[autoplay]:not([muted]) {

display: none;

}

18、灵活运用root类型

=============

响应布局中的字体大小应该能够自动调整到视区，从而保存编写媒体查询的工作，以处理字体大小。可以使用:not和视区单位，根据视区高度和宽度计算字体大小：

:root {

font-size: calc(1vw + 1vh + .5vmin);

}

现在，您可以使用根em单位，该单位基于:not：

body {

font: 1rem/1.6 sans-serif;

}

结合上面的rem/em技巧以获得更好的控制。有关管理Safari旧版本的提示，请参阅CSS Fix for iOS VH Unit Bug。

19、在表单元素上设置字体大小，以获得更好的移动体验

==========================

为了避免移动浏览器（iOS Safari等）在点击下拉列表时放大HTML表单元素，请在添加font-size样式：

总结

秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！

而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。

这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！

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

资料截图 ：

高级前端工程师必备资料包