中国小康建设网站,张家港seo建站,wordpress古腾堡汉化,网站seo优化方案策划书作者 | 零一来源 | 前端印象简写#xff08;语法糖#xff09;可能给我们编码带来了很多便利#xff0c;但简写也会带来一些问题#xff0c;今天来讨论一下 CSS 中的简写的爱恨情仇为什么说是爱恨情仇呢#xff1f;因为简写给我们带来了很多的便利#xff0c… 作者 | 零一来源 | 前端印象简写语法糖可能给我们编码带来了很多便利但简写也会带来一些问题今天来讨论一下 CSS 中的简写的爱恨情仇为什么说是爱恨情仇呢因为简写给我们带来了很多的便利但凡事都有好有坏你不能说简写一点坏处都没有。所以我们就聊聊简写的 好 和 坏background这个 CSS 属性大家肯定是再熟悉不过了给元素设置背景色是这样.demo {background: #333;
}还是这样.demo {background-color: #333;
}应该都有吧换作我自己平常这两者用哪个好像也是看心情如果你说肯定用前者啊因为前者就一个单词那其实后者也不麻烦现在大家都用编辑器在智能提示的辅佐下输入 bgc 再按回车就能打出 background: ; 了其实也不麻烦。bgc回到正题其实这两者写法我更推荐后者为什么来看个例子style.demo {background: #333; /* 给元素设置了背景色#333 */}/* ... 中间隔了很多样式代码 */.demo:hover {background: url(example.png); }
/stylediv classdemo/这个场景很简单鼠标移到元素上就展示某张照片未加载前用一个纯色占位然而实际效果是效果不尽人意为了效果明显我加了边框、文字网速调成 slow 3G可以看到 hover 时的 background 覆盖掉了前者的 background使得效果差强人意是因为前者和后者都是 background所以后者自然会覆盖前者吗不全是即便我们前者用的 background-color: #333;也仍然会被后者覆盖大家都知道 background 是一个语法糖即很多属性的简写 那像例子中用 background: url(example.png)时做了什么呢如上图所示它默认把所有值都设置成了 initial因此无论之前用到了其中哪个值都会被覆盖虽然 initial 设置了跟没设置是一样都表示保持元素该属性的初始值会不会有人想说我一直都这么用的都没遇到啥问题啊我只想说一句可能运气比较好等代码比较复杂了你可能会回来补这个窟窿的结论这就是一个简写造成的隐患大家能避免则避免margin又提了一个大家再熟悉不过的属性 margin这里面又有啥坑呢没啥坑就是想介绍一下其它用法以下都是它的简写margin: 10px 20px 30px 40pxmargin: 10px 20px 30pxmargin: 10px这些简写确实帮我们省去了不少的代码量让我们投身到一个例子中现在我想让我的元素水平居中我想用 margin 来实现style.parent {width: 300px;height: 300px;border: 1px solid black;}.child {width: 100px;height: 100px;background-color: red;margin: auto; /* 水平居中 */}
/stylediv classparentdiv classchild/
/div效果如你所愿但你使用 margin: auto 时有没有那么一瞬间想过前面是否设置过 margin-top 或 margin-bottom 呢比如这样style.parent {width: 300px;height: 300px;border: 1px solid black;} .child {margin-top: 100px;} /* ...省略几百行代码 */.child {width: 100px;height: 100px;background-color: red;margin: auto; /* 水平居中 */}
/stylediv classparentdiv classchild/
/div预期的效果是什么样的而此时的效果是什么样的预期的效果现在的效果可以看到预期是想要既水平居中又距离顶部100px而现在margin-top被覆盖了其实你单纯想实现水平居中完全没必要用margin: auto因为你本意是不想去修改顶部和底部的间距的只是因为你用了这个简写不得不这么做不然试试另一个简写让你只处理水平的间距style.parent {width: 300px;height: 300px;border: 1px solid black;}.child {margin-top: 100px;}/* ...省略几百行代码 */.child {width: 100px;height: 100px;background-color: red;
- margin: auto; /* 水平居中 */margin-inline: auto; /* 真正的只是水平居中 */}
/stylediv classparentdiv classchild/
/div这样同样能实现我们想要的效果且不会影响 margin-top 和 margin-bottom 的属性那同理有没有能只影响竖直方向的 margin 的简写呢当然有那就是 margin-block一起来看另一个例子style.parent {position: relative;border: 1px solid black;width: 300px;height: 300px;}.child {position: absolute;top: 0;bottom: 0;left: 0;right: 0;width: 100px;height: 100px;margin: auto;background-color: red;}
/stylediv classparentdiv classchild/
/div效果如下这是一种对于非相对定位的垂直水平居中方法记好了面试官问你垂直水平居中的方法又多了一个我是从 HTML 原生的 dialog/ 标签中了解到的。dialog的水平居中实现为什么要用这个例子呢我就是想引申出这个知识点跟大家分享一下我最近看到的小 tips我们可以删除 margin: auto用上前面说的 margin-inline: auto 和 margin-block: auto结论margin 的简写不如 background 那么复杂但使用上了 margin-inline 和 margin-block 也可以给自己降低心智负担inset上面说了那么多简写带来的隐患要不再来说说简写带来的好处还是举个例子style.parent {position: relative;border: 3px solid blue;margin: 200px;width: 300px;height: 300px;}.child {position: absolute;top: 0;bottom: 0;left: 0;right: 0;background-color: red;}
/stylediv classparentdiv classchild/
/div这段代码大家应该都很熟悉我们给 .child 元素设置成了绝对定位并赋予了以下属性top: 0;bottom: 0;left: 0;right: 0;然后元素就撑满父元素了达到了 width: 100% height: 100% 的效果那为啥不直接设置宽高都 100% 呢只用设置两个属性❌❌❌ 不这么做的原因还是要回到 position 本身当一个元素脱离文档流时若未设置 top、bottom、left、right默认元素停留的位置就是其未脱离文档流时的位置可能有点绕直接上张图可以看到这个元素在脱离文档流后仍然是停留在它处于文档流时的位置那此时如果给他设置宽高 100% 会是什么样呢漂亮超出父元素了虽然解决这个问题也很简单直接加一个 left: 0 即可但我们还有更简单的方法那就是用 inset 这个属性其实 inset 就是 top、right、bottom、left 的简写不知道为什么我看过很多人的代码都没用过这个属性所以也给大家安利一下语法跟 margin 类似因此我们用它来简化刚才的代码style.parent {position: relative;border: 3px solid blue;margin: 200px;width: 300px;height: 300px;}.child {position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;inset: 0;background-color: red;}
/stylediv classparentdiv classchild/
/div这里为什么我又推荐大家用 inset 了呢本质是因为此处我们确实是需要同时设置上下左右四个值的那为何不用 inset 呢border 天呐受不了了怎么全是平时常用到的属性有这么多坑吗其实 border 这个还好还是建议用简写的哈只不过有一个特殊的 case想给大家分享一下避免踩坑有这样一个场景一个元素本身没有边框当鼠标移入时出现边框边框从有到无要有过渡动画同时鼠标移除边框消失也伴随有过渡动画style.demo {width: 100px;height: 100px;background-color: lightblue;border: none;box-sizing: border-box;transition: border 1s linear;}.demo:hover {border: 4px solid red}
/stylediv classdemo/大部分人都会这么写对不对效果如何呢可惜只成功了一半为什么鼠标移出时border 的过渡动画消失了图中可以看到border: none 其实就是把 border-style 设置成了 none大家都知道 transition 对于 border 的过渡动画其实是针对 border-color 和 border-width 的但如果 border-style 都没有那还怎么看得到过渡动画呢所以我们想要实现鼠标移出时的过渡动画就不能用 border: none 这个简写了那该怎么办我想到了一个思路可能不是最完美的但根本看不出瑕疵大家可以借鉴一下将元素的 border 初始状态设置为 border: 0px solid transparent这样既保证了 border-style 的存在又能保证边框会从 4px 过渡到 0px颜色也从 有 过渡到 无效果如下总结对于 「我们到底该如何使用简写」 这个问题我认为需要一次性设置简写属性中全部或绝大部分属性时可以使用简写反之则不太应该使用简写。往期推荐Cluster 集群能支撑的数据有多大Kubernetes 上容器的启动顺序如何把控Redis 内存满了怎么办这样置才正确手工模拟实现 Docker 容器网络点分享点收藏点点赞点在看
