css中inherit,100%,auto的区别

在css中inherit应该是很容易被忽略的一个关键字,auto和100%用的还是比较多点,但是inherit确实是个比较好用的属性,今天就来跟大家一起分享下。

现在都会使用到预处理器,里面都已经把能使用倒inherit的地方添加好了,一般就是input,select,button等。
1. 第一个案例,出现了很有意思的现象

width:100%; 可以看到本身的300px加上padding后变成了320px,因为padding在默认情况下是不被包含在定义的width值内的.

而inherit与auto是直接继承了300px的宽度值,padding被包含在了定义的width值内。

这个情况有点像box-sizing:boder-box;的定义,这个是个很好用的属性,现在的网站基本都会使用上它。

2. 再看下第二个案例,在元素本身绝对定位,父级元素没有定位类型的情况的下,inherit与100%的区别。
可以看到height:inherit完美的自适应了没有定位特性的父元素,而100%则是不知道跑到哪里去了。
inherit还有很多用处,比如我们经常会使用提示框小箭头的制作

You may also like...

发表评论

电子邮件地址不会被公开。 必填项已用*标注