CSS中inherit指定继承的使用方法和auto的区别
CSS中的每个属性都有一个特定值"inherit",其含义是指定继承父元素的相应属性,使用inherit一方面在代码上能地表明要继承于父元素的样式属性,另一方面也使子元素继承了那些不会被自动继承的属性.
也就是说:
inherit是继承父类的属性,一般用于字体、颜色等
auto是按情况自适应,一般用于高度、宽度、外边距和内边距等关于长度的属性
假如设计者要使class为box的div元素有2px的黑色边框,且具有5px的填充,同时想让其子div元素也具有同样的样式,
则可以编写如下规则:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
/* 使子元素继承了那些不会被自动继承的属性 */
.box{
border:2px solid black;
padding:5px;
background:#ccc;
height:100px;
}
.box div{
/* 使用inherit能继承父级的属性,和auto不一样 */
border:inherit;
padding:inherit;
height:auto;
}
</style>
</head>
<body>
<div class='box'>
爹
<div>儿子</div>
</div>
</body>
</html>
线上调试:inherit 和 auto 区别
http://jsbin.com/fuwiyo/3/edit?html,output
CSS中inherit指定继承的使用方法和auto的区别的更多相关文章
- 在 CSS 中表示颜色的hex code方法和rgb方法
hexadecimal code(十六进制编码),简写为 hex code. 我们通常使用 decimals,也就是十进制数字,它对每一位数字使用符号0到9来表示.Hexadecimals (或 he ...
- Classloader中loadClass()方法和Class.forName()区别
Classloader中loadClass()方法和Class.forName()都能得到一个class对象,那这两者得到的class对象有什么区别呢 1.java类装载的过程 Java类装载有三个步 ...
- css中属性值继承小解
继承:html元素可以从父元素那里继承一部分css属性,即使当前元素没有定义该属性. 1.css可以和不可以继承的属性 不可继承的:display.margin.border.padding.back ...
- CSS中层叠和继承的概念。
继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码: 1 2 3 4 5 6 7 8 9 <ht ...
- css中单位px、pt、em和rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px :像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS ...
- c#中的委託,匿名方法和lambda表達式
(原博)http://www.cnblogs.com/niyw/archive/2010/10/07/1845232.html 简介 在.NET中,委托,匿名方法和Lambda表达式很容易发生混淆.我 ...
- EF Core 中DbContext不会跟踪聚合方法和Join方法返回的结果,及FromSql方法使用讲解
EF Core中: 如果调用Queryable.Count等聚合方法,不会导致DbContext跟踪(track)任何实体. 此外调用Queryable.Join方法返回的匿名类型也不会被DbCont ...
- CSS中的margin和padding的用法和区别
在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离. 语法结构 (1)padding-left:10px; 左内边距 (2)padding-right:10px; 右内边距 ...
- 理解css中min-width和max-width,width与它们之间的区别联系
css中,min-width是用来限制元素的最小宽度,max-width用来限制元素的最大宽度,也就是说当元素的width大于max-width,或者小于min-width.就被它们的值所代替,尤其适 ...
随机推荐
- CPU状态信息us,sy等含义
目录 一.概述概述 二.详解 us和sy ni id wa hi和si st 三.总结 一.概述概述 比如一秒内有100个cpu时间片,这个cpu时间片就是cpu工作的最小单位.那么这100个cpu时 ...
- Python的安装和卸载
一.Python的安装,去Python官网https://www.python.org/downloads/下载对应安装包 进入官网后鼠标移动到downloads处然后点击Windows 二.安装包下 ...
- pwnable_start & ciscn_2019_es_2 & ez_pz_hackover_2016 & pwn2_sctf_2016
花了两天时间做了这四道题,感觉收获很多.但是这种收获感觉写文章写不出自己的思路,就录制了一个视频. pwnable_start 这道题考察了系统调用,shellcode的编写,和动态调试的知识. ci ...
- 【web】docker复现环境踩坑
在先知看到有师傅发了个学习 P 牛的代码审计的文章,在 github 上下下来复现环境,结果 docker 各种问题,气死 安装 docker-compose:pip install -i https ...
- 日程选项卡的设置(Project)
<Project2016 企业项目管理实践>张会斌 董方好 编著 在使用任何一个软件之前,都有一些默认的东东要改,比如在Excel里有人不待见单元格里的0,一定要设置成不显示零值:在Wor ...
- Dubbo配置注册中心设置application的name使用驼峰命名法存在的隐藏项目启动异常问题
原创/朱季谦 首先,先提一个建议,在SpringBoot+Dubbo项目中,Dubbo配置注册中心设置的application命名name的值,最好使用xxx-xxx-xxx这样格式的,避免随便使用驼 ...
- LuoguP2108 学英语 题解
Content 给出整数 \(x\) 的英文写法,求出这个整数 \(x\). 规则详见题面. 数据范围:\(|x|\leqslant 999999999\)(\(9\) 个 \(9\)). Solut ...
- CF289B Polo the Penguin and Matrix 题解
Content 有一个 \(n\times m\) 的矩阵 \(A\),每次操作你可以将某一个元素增加或减少 \(d\),求是所有元素相等的最小操作次数,或者不存在这样的操作方案. 数据范围:\(1\ ...
- AndroidStudio-快捷键
Windows: Ctrl + Alt +L (Ctrl +Shift+F 无效) (亲测,和qq热键冲突,我的解决方式是把qq除捕获屏幕外的热键全部设置为无) Mac: OPTION + CMD + ...
- c++ 设计模式概述之享元
类写的不够规范,目的是为了缩短篇幅,实际中其不要这样做. 参考文章: 1. http://c.biancheng.net/view/1371.html 1.概述 A.享元,我的理解是: 共享的模块单元 ...