共计 4505 个字符,预计需要花费 12 分钟才能阅读完成。
大家好,我是 零一 ,简写(语法糖)可能给咱们编码带来了很多便当,但简写也会带来一些问题,明天来讨论一下 CSS 中的 简写的 ” 爱恨情仇 ”
为什么说是 爱恨情仇 呢?因为简写给咱们带来了很多的便当,但凡事都有好有坏,你不能说简写一点害处都没有。所以咱们就聊聊简写的 “ 好 ” 和 “ 坏 ”
background
这个 CSS 属性大家必定是再相熟不过了,给元素设置背景色
是这样?
.demo {background: #333;}
还是这样?
.demo {background-color: #333;}
应该都有吧,换作我本人,平时这两者用哪个如同也是看情绪,如果你说必定用前者啊,因为前者就一个单词,那其实后者也不麻烦,当初大家都用编辑器,在智能提醒的辅助下输出 bgc
再按回车就能打出 background: ;
了,其实也不麻烦
回到正题,其实这两者写法 我更举荐后者,为什么?来看个例子🌰
<style>
.demo {background: #333; /* 给元素设置了背景色 #333 */}
/* ... 中距离了很多款式代码 */
.demo:hover {background: url("example.png");
}
</style>
<div class="demo"/>
这个场景很简略:鼠标移到元素上就展现某张照片,未加载前用一个纯色占位
然而实际效果是?
为了成果显著,我加了边框、文字,网速调成
slow 3G
能够看到 hover
时的 background
笼罩掉了前者的 background
,使得成果差强人意
是因为前者和后者都是 background
,所以后者天然会笼罩前者吗?不全是
即使咱们前者用的 background-color: #333;
,也依然会被后者笼罩
大家都晓得 background
是一个语法糖,即很多属性的简写 👇
那像例子中用 background: url('example.png')
时,做了什么呢?
如上图所示,它默认把所有值都设置成了 initial
,因而无论之前用到了其中哪个值都会被笼罩,尽管 initial
设置了跟没设置是一样,都示意放弃元素该属性的初始值
会不会有人想说:我始终都这么用的,都没遇到啥问题啊!
我只想说一句:可能运气比拟好,等代码比较复杂了,你可能会回来补这个窟窿的
论断:这就是一个简写造成的隐患,大家能防止则防止
margin
又提了一个大家再相熟不过的属性 margin
,这外面又有啥坑呢?没啥坑,就是想介绍一下其它用法
以下都是它的简写:
margin: 10px 20px 30px 40px
margin: 10px 20px 30px
margin: 10px
这些简写的确帮咱们省去了不少的代码量
让咱们投身到一个例子🌰中:当初我想让我的元素程度居中,我想用 margin
来实现
<style>
.parent {
width: 300px;
height: 300px;
border: 1px solid black;
}
.child {
width: 100px;
height: 100px;
background-color: red;
margin: auto; /* 程度居中 */
}
</style>
<div class="parent">
<div class="child"/>
</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; /* 程度居中 */
}
</style>
<div class="parent">
<div class="child"/>
</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; /* 真正的只是程度居中 */
}
</style>
<div class="parent">
<div class="child"/>
</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;
}
</style>
<div class="parent">
<div class="child"/>
</div>
成果如下:
这是一种对于非绝对定位的垂直程度居中办法(记好了,面试官问你垂直程度居中的办法又多了一个 ),我是从 HTML 原生的 <dialog/>
标签中理解到的(之前在 12 个可能你没见过,但十分实用的 HTML 标签介绍过 <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;
}
</style>
<div class="parent">
<div class="child"/>
</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;
}
</style>
<div class="parent">
<div class="child"/>
</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}
</style>
<div class="demo"/>
大部分人都会这么写对不对?成果如何呢?惋惜只胜利了一半!
为什么鼠标移出时,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
,色彩也从 有
过渡到 无
成果如下:
总结
对于 「咱们到底该如何应用简写?」 这个问题,我认为:须要一次性设置简写属性中全副或绝大部分属性时,能够应用简写 ;反之,则 不太应该应用简写
我是 零一,分享技术,不止前端!
心愿本文对你有所帮忙,我在用心写文章,心愿大家不要悭吝本人的 赞👍
若有疑难或者倡议,欢送评论区留言,一起相互交换探讨,共同进步!