做网站需要什么功能,银川建设公司网站,环境搭建好了wordpress怎么建设,51自学网官方网站开本系列#xff0c;谈谈一些有趣的
CSS 题目#xff0c;题目类型天马行空#xff0c;想到什么说什么#xff0c;不仅为了拓宽一下解决问题的思路#xff0c;更涉及一些容易忽视的 CSS 细节。解题不考虑兼容性#xff0c;题目天马行空#xff0c;想到什么说什么#x…开本系列谈谈一些有趣的
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 属性通常还可以设置下面几个值initialinheritunsetrevert {
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 代码更加符合 DRYDon‘’t Repeat Yourself 原则。 unset
名如其意
unset 关键字我们可以简单理解为不设置。其实它是关键字
initial 和
inherit 的组合。什么意思呢也就是当我们给一个 CSS 属性设置了
unset 的话如果该属性是默认继承属性该值等同于 inherit如果该属性是非继承属性该值等同于 initial
举个例子根据上面列举的 CSS 中默认继承父级样式的属性选取一个再选取一个不可继承样式
选取一个可继承样式: color选取一个不可继承样式: border 使用 unset 继承/取消样式
看看下面这个简单的结构 div classfather
div classchildren子级元素一/div
div classchildren 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: initial 也就是默认 border 样式无边框。
CodePen Demo -- unset Demo; titleunset Demo srchttp://codepen.io/Chokcoco/embed/BRjBox/?height265theme-id0default-tabcss,resultembed-version2 frameborderno scrollingno width320 height265 unset 的一些妙用
例如下面这种情况在我们的页面上有两个结构类似的
position: fixed 定位元素。区别是其中一个是
top:0; left: 0;另一个是
top:0; right: 0;。其他样式相同。假设样式结构如下 div classcontainer
div classleftfixed-left/div
div classrightfixed-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; titleunset Demo srchttp://codepen.io/Chokcoco/embed/eWJOqB/?height265theme-id0default-tabcss,resultembed-version2 frameborderno scrollingno width320 height265
到此本文结束如果还有什么疑问或者建议可以多多交流原创文章文笔有限才疏学浅文中若有不正之处万望告知。
相关文章：
