css实战手册第四版 pdf_你真的了解CSS继承吗?看完必跪

也许你瞧不起以前的 css ,但是你不该再轻视眼下的 css 。近年来 css 的变量系统已逐步得到各大浏览器厂商支持,自定义选择器等强势袭来,嵌套系统/模块系统也在路上...为了更好的掌握 css 这门语言,很有必要把之前零零散散的 css 知识回炉重造下。

css 作为一门语言而,也有其继承原理,虽然简单,你却未必掌握。

dca72b86eb2a69e97d6882cf3e1fd867.png

属性的是否默认继承

初始值是指当属性没有指定值时的默认值,如这些语句的值都是默认值:background-color: transparent、left: auto 、float: none、width: auto 等。

css 的继承很简单,分为默认继承的和默认不继承的,但所有属性都可以通过设置 inherit 实现继承。

当没有指定值时,默认继承的属性取父元素的同属性的计算值(相当于设置了 inherit ),默认不继承的属性取属性的初始值(时相当于设置了 initial )。

默认继承的 ("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

默认不继承的("Inherited: No") 的属性:

  • 文本属性默认不继承:vertical-align、text-decoration、text-shadow、white-space、unicode-bidi
  • 盒子属性默认不继承:display、width、height、padding、margin、border、min-width、min-height、max-width、max-height、overflow、clip
  • 背景属性默认不继承:background、background-color、background-image、background-repeat、background-position、background-attachment
  • 定位属性默认不继承:float、clear、position、top、right、bottom、left、z-index
  • 内容属性默认不继承:content、counter-reset、counter-increment
  • 轮廓属性默认不继承:outline-style、outline-width、outline-color、outline
  • 页面属性默认不继承:size、page-break-before、page-break-after
  • 声音属性默认不继承:pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

可以看到涉及到文本相关的属性,都是默认继承的,毕竟 css 设计之初就是为了更好的在网页上呈现文字。

需要注意的是,部分属性的默认值是会根据元素的 display 属性的值而计算的,比如 vertical-align 属性,如果是 display: inline 元素,则其计算值为基线对齐 vertical-align: baseline ,如果是 display: inline-block 元素,则其计算值为 vertical-align: bottom 。

通用属性值 initial、inherit 和 unset

css 为控制继承提供了四个特殊的通用属性值(属性 revert 只有很少的浏览器支持,所以实际上是三个),每个 css 属性都能使用这些值。

  • inherit

设置该属性会使子元素属性和父元素相同。实际上,就是“开启继承”。

  • initial

将属性的初始值应用于元素。实际上,就是“重置为默认值”。

  • unset

将属性重置为自然值,也就是如果属性是自然继承的那么就是 inherit ,否则和 initial 一样。

实例

这些通用属性值可以有很多妙用,举个栗子:

  1. 利用 inherit 实现如下图片倒影:
f6336c14359e08d2faceb931bb6bf13e.png
div::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; bottom: -100%; background-image: inherit; // 背景图片继承,这一般人想不到吧... transform: rotateX(180deg);}web前端开发学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频,PDF)
  1. 利用 initial 重置 left 为默认值 auto:地址
div { position: absolute; left: 20px; top: 20px;}div + div { left: initial; right: 20px;}
84aaaa42392f8128d27e29eec1940012.png

例子中 div 设置过了 left ,div2 的 right 若要生效,须将 left 重置为初始值 initial (或者 unset)。

  1. 利用 unset 将属性重置为未设置之前的值:地址
802649a60463e1a923f3d2fa934f46da.png

例子中 p 标签的 color 是默认继承属性,所以此时 color: unset 相当于 color: inherit 。 p 标签的 border 属性是默认不继承属性,所以此时 border: unset 相当于 border: initial 。

.unset { border: unset; color: unset;}web前端开发学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频,PDF)

总结

css 的继承真的很简单,只需要记住那些默认继承的,剩下的都是默认不继承的。而默认继承的元素除了文本相关的哪些,只有 visibility、cursor 比较常用了,也是比较容易记得的。

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

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

相关文章

hibernate级联操作详解

2019独角兽企业重金招聘Python工程师标准>>> 级联操作 一.简单的介绍 cascade和inverse (Employee – Department) l Casade用来说明当对主对象进行某种操作时是否对其关联的从对象也作类似的操作,常用的cascade: none,all,save-update,delete, lock,ref…

出门就背他了!可伸缩的背包,自由变大变小,还有防盗功能!

▲ 点击查看出门能不背包就不背包,几乎是小爆身边每个男生的人生信条。不背包时,两手空空一身轻,潇洒有型。但一旦到了必须背包,比如五一外出回家或旅游的时候,男同胞们翻箱倒柜找出来的背包,大多都是这种双…

C#实现网页加载后将页面截取成长图片 | Playwright版

前言如何将网页生成预览图?要实现这个功能,可以用WebBrowser组件模拟浏览器,或者使用系统浏览器访问网页,再进行截图操作。但是,这样需要编写大量的控制代码。工欲善其事,必先利其器!利用Playwr…

python链接mysql报错2003_Python连接Mysql报错问题解决

import MySQLdb #打开数据库 db MySQLdb.connect("127.0.0.1","root","123456","testdb",3306) #使用corsor()方法获取操作游标 cursor db.cursor() #使用execute方法执行SQL语句 cursor.execute("SELECT VERSION()") #使…

nodejs项目_多人群聊实现其实很简单:Nodejs+WebSocket+Vue轻松实现Web IM

点击右上方红色按钮关注“web秀”,让你真正秀起来前言在《Nodejs WebSocket简单介绍及示例 - 第一章》中简单的介绍了,Nodejs WebSocket的使用方法及作用,今天就用它来搭建一个简单的聊天室功能。1、NodejsWebSocket创建后台服务器功能 2、…

交友软件上的两种网友类型......

1 轻轻松松月入五千的方法(素材来源网络,侵删)▼2 像极了期末复习的你(via.段子楼,侵删)▼3 听说你想要中国的熊猫▼4 听说学校附近有野人出没(素材来源网络,侵删)▼5…

解读最新的 Xamarin 更新

微软中国MSDN 点击上方蓝字关注我们Good news——Visual Studio 2022 包括了 Xamarin 对 Android 12和苹果最新的 Xcode 13 版本下的 iOS、iPadOS、macOS 和 tvOS 的支持,以及适用于支持它们的最新 Xamarin.Forms 版本。让我们一起来了解下最新 Xamarin版本&#x…

原来医生的处方不是随便乱写的...

1 奇奇怪怪的知识又增加了(素材来源网络,侵删)▼2 像极了早上刚睡醒炸毛的你▼3 原来医生的处方不是瞎写的▼4 当爷爷不当孙子(素材来源网络,侵删)▼5 40厘米的身高差(素材来源网络&#xf…

Android之解决Gigaset手机不能设置DeviceOwner权限提示already provisioned问题

客户那里有Gigaset手机,安装我们的产品需要注入DeviceOwner,但是刚恢复默认出厂的Gigaset手机很奇葩,注入权限的提示下面错误,导致不能使用我们的产品 设置DeviceOwner权限是有限制的,需要手机账号(acount)为0 1 我们用命令查看手机的帐号 adb shell dumpsys account …

收集网络状态(Ping),并用邮件通知管理员

在没有第三方工具对网络进行监控的话,要检查网络中某台主机,或是某个IP地址通讯是否正常,我们通常用手动PING来进行测试。有了PowerShell,我们可以用他定时Ping网络上的几个IP地址,然后把ping的个延时时间用邮件通知给…

sql 某列数据全部为0则不显示该列_数据产品经理养成记(五):汇总分析

学会了如何查找数据后,接下来就要对数据进行分析处理,比如求和、平均值、加总等等。这些对数据的加工处理通过汇总函数来实现。汇总函数在之前的两篇文章中都有涉及,这里采用概念--案例--总结的方式,集中介绍一下。1.什么是汇总函…

vim学习日志(5):vim下wimrc的配置,解决中文乱码问题

解决linux下vim乱码的情况:(修改vimrc的内容) 全局的情况下:即所有用户都能用这个配置 文件地址:/etc/vimrc 在文件中添加: set fileencodingsutf-8,ucs-bom,gb18030,gbk,gb2312,cp936 set termencodingutf-8 set enco…

Android插件化开发之AMS与应用程序(客户端ActivityThread、Instrumentation、Activity)通信模型分析

转载来自:http://blog.csdn.net/qinjuning/article/details/7262769 今天主要分析下ActivityManagerService(服务端) 与应用程序(客户端)之间的通信模型,在介绍这个通信模型的基础上,再 简单介绍实现这个模型所需要数据类型。 本文所介绍内容…

iOS开发UI篇—直接使用UITableView Controller

iOS开发UI篇—直接使用UITableView Controller 一、一般过程 1 //2 // YYViewController.h3 // UITableView Controller4 //5 // Created by 孔医己 on 14-6-2.6 // Copyright (c) 2014年 itcast. All rights reserved.7 //8 9 #import <UIKit/UIKit.h> 10 11 inter…

怎么做图片文字二维码一起_怎么做?才能让文字编排更出彩

在之前视觉设计文章中&#xff0c;我把视觉设计大致罗列了四个方向&#xff0c;更多的是希望能够为大家带来一些努力方向&#xff0c;在设计的路上不那么困惑迷茫&#xff0c;视觉设计本身涵盖的范围就比较广&#xff0c;同时也没有什么衡量的标准和具体的特征&#xff0c;只有…

.NET6之MiniAPI(八):日志

说明&#xff1a;本篇简单说一下日志中常用的几个点&#xff0c;关于日志&#xff0c;后面重点会说到三方日志提供程序在MiniAPI中&#xff0c;可以通过方法或构造函数中&#xff0c;获取框架自动注入的日志类型&#xff0c;如下方式&#xff1a;app.MapGet("/test",…

为什么你闻不到自己胳肢窝的味道?

▲ 点击查看生活中&#xff0c;我们常常会选择性地忽略一些事。吃螺蛳粉的人不会觉得屋子臭&#xff0c;而别人身上有一点烟味就可以闻到。公司的厕所&#xff0c;别人用完后&#xff0c;总觉得比自己用完时更臭。夏天胳肢窝出汗的味道&#xff0c;自己从来都闻不到&#xff0c…

Android插件化开发之Hook StartActivity方法

第一步、先爆项目demo照片&#xff0c;代码不多&#xff0c;不要怕 第二步、应该知道Java反射相关知识 如果不知道或者忘记的小伙伴请猛搓这里&#xff0c;Android插件化开发基础之Java反射机制研究 http://blog.csdn.net/u011068702/article/details/49863931第三步、应该知道…

ArcGis融合小多边形到相邻多边形

&#xfeff;&#xfeff;在有的时候&#xff0c;我们的数据中可能会有许多细小的图斑&#xff0c;这些并不是我们想要的&#xff0c;需要将它们合并到周围的图斑中&#xff0c;如果一个一个手动合并&#xff0c;那工作量之大简直不敢想象。现在借助ArcGIS的Eliminate工具可以很…