开本系列,谈谈一些有趣的
CSS
题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节。
解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。
不断更新,不断更新,不断更新,重要的事情说三遍。
谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法
谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型
谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少
谈谈一些有趣的CSS题目(四)-- 从倒影说起,谈谈 CSS 继承 inherit
谈谈一些有趣的CSS题目(五)-- 单行居中,两行居左,超过两行省略
谈谈一些有趣的CSS题目(六)-- 全兼容的多列均匀布局问题
谈谈一些有趣的CSS题目(七)-- 消失的边界线问题
谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案
谈谈一些有趣的CSS题目(九)-- 巧妙的实现 CSS 斜线
谈谈一些有趣的CSS题目(十)-- 结构性伪类选择器
谈谈一些有趣的CSS题目(十一)-- reset.css知多少
谈谈一些有趣的CSS题目(十二)-- 深入探讨 CSS 特性检测 @supports 与 Modernizr
谈谈一些有趣的CSS题目(十三)-- 巧妙地制作背景色渐变动画!
谈谈一些有趣的CSS题目(十四)-- 纯 CSS 方式实现 CSS 动画的暂停与播放!
所有题目汇总在我的 Github 。
正文从这里开始。
经常会碰到,问一个 CSS 属性,例如
position
有多少取值。
通常的回答是
static
、
relative
、
absolute
和
fixed
。当然,还有一个极少人了解的
sticky
。其实,除此之外, CSS 属性通常还可以设置下面几个值:
initial
inherit
unset
revert
{
position: initial;
position: inherit;
position: unset
/* CSS Cascading and Inheritance Level 4 */
position: revert;
}
了解 CSS 样式的 initial(默认)和 inherit(继承)以及 unset 是熟练使用 CSS 的关键。(当然由于 revert 未列入规范,本文暂且不过多提及。)
initial
initial
关键字用于设置 CSS 属性为它的默认值,可作用于任何 CSS 样式。(IE 不支持该关键字)
inherit
每一个 CSS 属性都有一个特性就是,这个属性必然是默认继承的 (
inherited: Yes
) 或者是默认不继承的 (
inherited: no
)其中之一,我们可以在
MDN 上通过这个索引查找,判断一个属性的是否继承特性。
譬如,以
background-color
为例,由下图所示,表明它并不会继承父元素的
background-color
:
可继承属性
最后罗列一下默认为
inherited: Yes
的属性:
- 所有元素可继承:visibility 和 cursor
- 内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction
- 块状元素可继承:text-indent和text-align
- 列表元素可继承:list-style、list-style-type、list-style-position、list-style-image
- 表格元素可继承:border-collapse
还有一些 inherit 的妙用可以看看这里:谈谈一些有趣的CSS题目(四)-- 从倒影说起,谈谈 CSS 继承 inherit,合理的运用 inherit 可以让我们的 CSS 代码更加符合 DRY(Don‘’t Repeat Yourself )原则。
unset
名如其意,
unset
关键字我们可以简单理解为不设置。其实,它是关键字
initial
和
inherit
的组合。
什么意思呢?也就是当我们给一个 CSS 属性设置了
unset
的话:
- 如果该属性是默认继承属性,该值等同于
inherit
- 如果该属性是非继承属性,该值等同于
initial
举个例子,根据上面列举的 CSS 中默认继承父级样式的属性,选取一个,再选取一个不可继承样式:
- 选取一个可继承样式:
color
- 选取一个不可继承样式:
border
使用 unset
继承/取消样式:
unset
看看下面这个简单的结构:
<div class="father">
<div class="children">子级元素一</div>
<div class="children unset">子级元素二</div>
</div>
.father {
color: red;
border: 1px solid black;
}
.children {
color: green;
border: 1px solid blue;
}
.unset {
color: unset;
border: unset;
}
-
由于
是可继承样式,设置了color
的元素,最终表现为了父级的颜色color: unset
。red
-
由于
是不可继承样式,设置了border
的元素,最终表现为border: unset
,也就是默认 border 样式,无边框。border: initial
CodePen Demo -- unset Demo;
title="unset Demo" src="http://codepen.io/Chokcoco/embed/BRjBox/?height=265&theme-id=0&default-tab=css,result&embed-version=2" frameborder="no" scrolling="no" width="320" height="265">
unset
的一些妙用
unset
例如下面这种情况,在我们的页面上有两个结构类似的
position: fixed
定位元素。
区别是其中一个是
top:0; left: 0;
,另一个是
top:0; right: 0;
。其他样式相同。
假设样式结构如下:
<div class="container">
<div class="left">fixed-left</div>
<div class="right">fixed-right</div>
</div>
通常而言,样式如下:
.left,
.right {
position: fixed;
top: 0;
...
}
.left {
left: 0;
}
.right {
right: 0;
}
使用 unset 的方法:
.left,
.right {
position: fixed;
top: 0;
left: 0;
...
}
.right {
left: unset;
right: 0;
}
CodePen Demo -- unset Demo;
title="unset Demo" src="http://codepen.io/Chokcoco/embed/eWJOqB/?height=265&theme-id=0&default-tab=css,result&embed-version=2" frameborder="no" scrolling="no" width="320" height="265">
到此本文结束,如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。