谈谈一些有趣的CSS题目(十五)-- 谈谈 CSS 关键字 initial、inherit 和 unset

开本系列,谈谈一些有趣的 

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
:

image

 

可继承属性

最后罗列一下默认为 

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
 的话:

  1. 如果该属性是默认继承属性,该值等同于 
    inherit
  2. 如果该属性是非继承属性,该值等同于 
    initial

举个例子,根据上面列举的 CSS 中默认继承父级样式的属性,选取一个,再选取一个不可继承样式:

  • 选取一个可继承样式: 
    color
  • 选取一个不可继承样式: 
    border

 

使用 
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;
}
  1. 由于 

    color
     是可继承样式,设置了 
    color: unset
     的元素,最终表现为了父级的颜色 
    red

  2. 由于 

    border
     是不可继承样式,设置了 
    border: unset
     的元素,最终表现为 
    border: initial
     ,也就是默认 border 样式,无边框。

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
 的一些妙用

例如下面这种情况,在我们的页面上有两个结构类似的 

position: fixed
 定位元素。

image

区别是其中一个是 

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">

到此本文结束,如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/368585.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

小程序沉浸式_企业开发小程序:客户裂变式增长

最近几年&#xff0c;各行各业中都有不少企业、商家获客难窘境。因此&#xff0c;很多企业、商家想知道&#xff1a;"怎么做&#xff0c;才能获取到大量流量&#xff1f;"小编给大家推荐一种方式&#xff1a;开发一个微信小程序&#xff0c;然后利用小程序来获取大量…

单点拖拽和多点多拽

demo见github:https://github.com/fei1314/drag/tree/master 一、拖拽原理手指所处的位置到一个div顶部的距离L一直不变。 二、单点拖拽1.touchstart:单指按下2.touchmove&#xff1a;单指移动3.touchend&#xff1a;单指抬起a.在touchstart事件中&#xff0c;利用拖拽原理&…

伪代码是计算机语言,伪代码书写格式

《伪代码书写格式》由会员分享&#xff0c;可在线阅读&#xff0c;更多相关《伪代码书写格式(3页珍藏版)》请在人人文库网上搜索。1、精品文档伪代码伪代码是用介于自然语言和计算机语言之间的文字和符号来描述算法。每一行(或几行)表示一个基本操作。它不用图形符号&#xff0…

JDBC连接Mysql数据库

注释&#xff1a;&#xff08;以下代码会抛出多个异常&#xff0c;仅表达出JDBC连接Mysql数据库的过程步骤&#xff09;加载数据库驱动(即 实例化驱动类对象)Class.forName("com.mysql.cj.jdbc.Driver"); 获取数据库的连接Connection conn null; conn DriverManage…

Elasticsearch:用于内容丰富的文本分析

每个文本搜索解决方案都与其提供的文本分析功能一样强大。 Lucene是这样的开源信息检索库&#xff0c;提供了许多文本分析的可能性。 在本文中&#xff0c;我们将介绍ElasticSearch提供的一些主要文本分析功能&#xff0c;这些功能可用来丰富您的搜索内容。 内容丰富 以一个典…

[CSS] Scale on Hover with Transition

效果 源码 <!doctype html><html class"outline color"><head><meta charset"utf-8"><title>图片scale动画</title><style>.img-box {position: relative;width: 740px;height: 420px;overflow: hidden;}/* 彩色…

热敏电阻温度特性曲线_热敏电阻与体温计的应用关系

相信体温计大家都熟悉&#xff0c;热敏电阻与体温计的应用关系大家都知道吗&#xff1f;热敏电阻热敏电阻探头测量体温的原理又是什么呢&#xff0c;小编跟大家分析一下&#xff0c;希望以下详细的介绍能帮助到大家&#xff01;热敏电阻探头测量体温的原理分析如下&#xff1a;…

js总结

var a {"name": "Alex", "age": 18}; console.log(a.name); console.log(a["age"]);就是字典&#xff0c;for (var i in a ){     console.log(a[i])}var anew Object()a.name"egon";a.age18;ES6中新增了map数据结构&…

计算机公共基础知识教材,国家计算机二级考试公共基础知识教材

国家计算机二级考试公共基础知识教材国家计算机二级考试公共基础知识教材国家计算机二级考试公共基础知识教材公共基础知识总结之第一章数据结构与算法 ................................................................................. 1公共基础知识总结之第二章程序设计…

1.Strategy Pattern(策略模式)

策略模式&#xff08;Strategy Pattern&#xff09;&#xff1a; 我的理解&#xff0c;将代码中每个变化之处抽出&#xff0c;提炼成一个一个的接口或者抽象类&#xff0c;让这些变化实现接口或继承抽象类成为具体的变化类。再利用多态的功能&#xff0c;可将变化之处用接口或抽…

Spring MVC + Hibernate + Maven:CRUD操作示例

在本文中&#xff0c;我想研究一个Spring MVC Hibernate Maven用法的示例。 这套技术暗含领域领域的基础知识。 因此&#xff0c;我将尝试详细解释所有重要时刻。 其他没有主题的内容将提供指向更多详细信息源的链接。 在文章的结尾&#xff0c;我将发布GitHub的链接。 目标…

画出的点做交互_设计之下交互设计原型设计之概念设计

目录//交互设计//「设计之下」---交互设计&#xff1a;交互设计师是做什么的&#xff1f;上线的产品中那一块是交互设计师的产物呢&#xff1f;项目启动1.1「设计之下」---交互设计&#xff1a;项目启动之从想法到项目&#xff0c;什么是项目&#xff1f;1.2「设计之下」---交互…

Java集合之TreeMap源码解析上篇

上期回顾 上期我从树型结构谈到了红黑树的概念以及自平衡的各种变化&#xff08;指路上期←戳&#xff09;&#xff0c;本期我将会对TreeMap结合红黑树理论进行解读。 首先&#xff0c;我们先来回忆一下红黑树的5条基本规则。 1.结点是红色或者黑色&#xff0c; 2.根结点为黑色…

CSS3 Transform、Transition和Animation属性总结

CSS3的三个与变形和动画啊相关的属性&#xff1a; Transform 浏览器支持情况&#xff1a; Internet Explorer 10、Firefox、Opera 支持 transform 属性。 Internet Explorer 9 支持替代的 -ms-transform 属性&#xff08;仅适用于 2D 转换&#xff09;。 Safari 和 Chrome…

综合云平台 - 前言 - 00

因为学习了 RHCA 云方向, 目前已经学了: CL210 OpenStack 私有云技术 CL220 CFME 混合云管理平台 RH236 GlusterFS 分布式存储 RH413 Hardening 安全 RH442 Performance Tuning 调优 RH318 Red Hat Enhanced Virtualization 虚拟化(传统虚拟机) DO280 OpenS…

15秋计算机基础作业3,东师15秋《计算机应用基础》在线作业3介绍.doc

计算机应用基础15秋在线作业3一、单选题(共?25?道试题&#xff0c;共?62.5?分。)V1.??国标码与机内码之间区别是A. 在机器内所占存储单元不同B. 机内码是ASCII码&#xff0c;国标码为非ASCII码C. 国标码是个每个字节最高位为1&#xff0c;机内码每个字节最高位为1D. 机内…

在Java中使用DOM,SAX和StAX解析器解析XML

我碰巧通读了有关Java中的XML解析和构建API的章节。 我试用了样本XML上的其他解析器。 然后&#xff0c;我想在我的博客上分享它&#xff0c;这样我就可以参考该代码以及任何阅读此书的参考。 在本文中&#xff0c;我将在不同的解析器中解析相同的XML&#xff0c;以执行将XML内…

仪器和软件通讯测试软件,软件定义的仪器-测试测量-与非网

如同每个孩子所拥有的第一套LEGO玩具改变了他们对世界的认识一样&#xff0c;26年前&#xff0c;美国国家仪器通过NI LabVIEW系统设计软件&#xff0c;重新改变了人们对仪器的认知。今年&#xff0c;NI将再次重演历史&#xff0c;发布一款新型仪器&#xff0c;帮助测试工程师摆…

埃森哲杯第十六届上海大学程序设计联赛春季赛暨上海高校金马五校赛 C序列变换...

链接&#xff1a;https://www.nowcoder.com/acm/contest/91/C来源&#xff1a;牛客网没有账号的同学这样注册&#xff0c;支持博主 题目描述 给定两个长度为n的序列&#xff0c;ai, bi(1<i<n), 通过3种魔法使得序列a变换为序列b&#xff0c;也就是aibi(1<i<n). 魔…

ubuntu安装gnome桌面

1. apt install gnome-shell2. apt install ubuntu-gnome-desktop3. apt install unity-tweak-tool4. apt install gnome-tweak-tool转载于:https://www.cnblogs.com/regit/p/7978365.html