使用box-sizing声明是可选择，如果你使用下面继承的盒模型形式可以跳过它
2、继承盒模型
=======
让盒模型从html 继承：
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
3、使用flexbox布局来避免margin的问题 （Get Rid of Margin hacks width Flexbox）
=================================================================
当你多少次试着去设计栅格布局如：组合或者图片画廊，如果使用浮动的方式，那么就需要去清除浮动和重置外边距来使其分解成所需要行数。为了避免nth-、first-、last-child 问题 ，可以使用flexbox 的space-between 属性值
.flex-container{
display:flex;
justify-content:space-between;
}
.flex-container .item{
flex-basis:23%;
}
4、使用:not() 解决lists边框的问题
=======================
在web设计中，我们通常使用：last-child nth-child 选择器来覆盖原先声明应在父选择器上的样式。比如说一个导航菜单，通过使用borders 来给每个链接Link创建分割符，然后再在加上一条规则 解除最后一个link的border
.nav li {
border-right: 1px solid #666;
}
.nav li:last-child {
border-right: none;
}
这是一种很混乱的方式，它不仅强制浏览器以一种方式渲染，然后又通过特定的选择器来撤销它。这样覆盖样式是不可避免的。然而，最重要的是，我们可以通过使用：not伪类(pseudo-class) 在你想声明的元素上仅仅只使用一种样式：
.nav li:not(:last-child) {
border-right: 1px solid #666;
}
上面就是，除了最后一个li以外，所有的 .nav li 都加上了border样式，是不是很简单！ 当然，你也可以使用 .nav li+li或者 .nav li:first-child ~li ,但是 ：not是更有语义化（semantic）和容易理解的。
如何提升你的CSS技能？掌握这20个css技巧即可[完整版]
5、body上加入line-height样式
======================
导致低样式效率（inefficient stylesheets）的一件事就是不断的重复声明。最好是做下项目规划和组合规则，这样CSS会更流畅。实现这一点，就需要我们理解级联（cascade）,以及如何在通用选择器写的样式可以继承在其他地方。行间距（line-height）可以作为 给你的整个项目设置的一个属性，不仅可以减小代码量，而且可以让你的网站的样式给一个标准的外观
body {
line-height: 1.5;
}
请注意，这里的声明没有单位，我们只是告诉浏览器 让它渲染行高是 渲染字体大小的1.5倍
新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。
6、垂直居中任何元素 (vertical-center anything)
=====================================
在没有准备使用CSSGrid 布局的时候，设置垂直居中布局的全局规则是一个很好的方式，可以为优雅（elegantly）的设置内容布局奠定一个基础
html, body {
height: 100%;
margin: 0;
}
body {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
}
7、使用SVG icons
=============
SVG使用于所有分辨类，并且所有浏览器也都支持。所以可以将.png .jpg .gif 等文件 丢弃。FontAwsome5中 也提供了SVG的图标字体。设置SVG的格式就跟其他图片类型一样：
.logo {
background: url(“logo.svg”);
}
温馨提示：如果将SVG用在可交互的元素上比如说button，SVG 会产生无法加载的问题。可以通过下面这个规则来确保SVG可以访问到（确保在HTML中已设置适当的aria属性）
.no-svg .icon-only:after {
content: attr(aria-label);
}
如何提升你的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、强制使用属性选择器显示空链接
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新
如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
前端面试题汇总
JavaScript
性能
linux
前端资料汇总
一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
g.csdnimg.cn/img_convert/d7f6750332c78eb27cc606540cdce3b4.png)
linux
前端资料汇总
一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
[外链图片转存中…(img-sxgjILUf-1712581093468)]
640
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
