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的区别的更多相关文章

  1. 在 CSS 中表示颜色的hex code方法和rgb方法

    hexadecimal code(十六进制编码),简写为 hex code. 我们通常使用 decimals,也就是十进制数字,它对每一位数字使用符号0到9来表示.Hexadecimals (或 he ...

  2. Classloader中loadClass()方法和Class.forName()区别

    Classloader中loadClass()方法和Class.forName()都能得到一个class对象,那这两者得到的class对象有什么区别呢 1.java类装载的过程 Java类装载有三个步 ...

  3. css中属性值继承小解

    继承:html元素可以从父元素那里继承一部分css属性,即使当前元素没有定义该属性. 1.css可以和不可以继承的属性 不可继承的:display.margin.border.padding.back ...

  4. CSS中层叠和继承的概念。

    继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码: 1 2 3 4 5 6 7 8 9 <ht ...

  5. css中单位px、pt、em和rem的区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px :像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS ...

  6. c#中的委託，匿名方法和lambda表達式

    (原博)http://www.cnblogs.com/niyw/archive/2010/10/07/1845232.html 简介 在.NET中,委托,匿名方法和Lambda表达式很容易发生混淆.我 ...

  7. EF Core 中DbContext不会跟踪聚合方法和Join方法返回的结果，及FromSql方法使用讲解

    EF Core中: 如果调用Queryable.Count等聚合方法,不会导致DbContext跟踪(track)任何实体. 此外调用Queryable.Join方法返回的匿名类型也不会被DbCont ...

  8. CSS中的margin和padding的用法和区别

    在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离. 语法结构 (1)padding-left:10px; 左内边距 (2)padding-right:10px; 右内边距 ...

  9. 理解css中min-width和max-width，width与它们之间的区别联系

    css中,min-width是用来限制元素的最小宽度,max-width用来限制元素的最大宽度,也就是说当元素的width大于max-width,或者小于min-width.就被它们的值所代替,尤其适 ...

随机推荐

  1. vue3 到底哪里好？看这一篇就够了

    之前写的关于 vue3 的文章,好多人吐槽:这些API每次使用都要引入一遍,感觉有点麻烦. 今天我们就来看看 vue3 相比 vue2 的优点有些啥? 为啥有些人说:自从写了 ts vue3 再也回不 ...

  2. 如何在Uni-app中通过腾讯IM SDK实现社交应用和直播互动等功能

    Uni-app想开发社交应用.IM.店铺客服.嵌入式社交模块.在线直播互动,这些功能Uni-app官方也没提供SDK,怎么办呢?找IM老大腾讯云啊,今天我们就在Uni-app中把腾讯云即时通讯TXIM ...

  3. [源码解析] PyTorch 分布式之弹性训练(3)---代理

    [源码解析] PyTorch 分布式之弹性训练(3)---代理 目录 [源码解析] PyTorch 分布式之弹性训练(3)---代理 0x00 摘要 0x01 总体背景 1.1 功能分离 1.2 Re ...

  4. JAVA使用LocalDate获取当前日期所在季度的开始日期和结束日期

    需要使用jdk1.8及以上 /** * 获取当前日期所在季度的开始日期和结束日期 * 季度一年四季, 第一季度:1月-3月, 第二季度:4月-6月, 第三季度:7月-9月, 第四季度:10月-12月 ...

  5. nim_duilib（3）之按钮

    introduction 更多控件用法,请参考 here 和 源码. 本文的代码基于这里 lets go xml文件添加代码 下面的xml文件内容,删除label控件的相关代码,增加了3个按钮. 其中 ...

  6. 【九度OJ】题目1018：统计同成绩学生人数 解题报告

    [九度OJ]题目1018:统计同成绩学生人数 解题报告 标签(空格分隔): 九度OJ [LeetCode] http://ac.jobdu.com/problem.php?pid=1018 题目描述: ...

  7. [LeetCode]485. Max Consecutive Ones 找到最大的连续的1的个数

    题目描述 输入只有0和1的数组(长度为正整数,且<10000),找到最大的连续1的个数 比如[1,1,0,1,1,1],输出3 思路 遍历数组,统计当前连续个数curCount和最大连续值max ...

  8. hdu-1593 find a way to escape(贪心，数学)

    思路:两个人都要选取最优的策略. 先求外层那个人的角速度,因为他的角速度是确定的,再求内层人的当角速度和外层人一样时的对应的圆的半径r1.外层圆的半径为d; 那么如果r1>=外围圆的半径,那么肯 ...

  9. python语法糖之有参装饰器、无参装饰器

    python的装饰器简单来说就是函数的一种形式,是为了扩展原来的函数功能而设计的. 装饰器的特别之处在于它的返回值也是一个函数,可以在不改变原有函数代码的基础上添加新的功能 # 先定义一个函数及引用# ...

  10. [数据结构]严蔚敏版(C数据结构)配套实现程序111例

    以下为根据严蔚敏版数据结构的示例和概念实现的程序 目录 一.严蔚敏版(C数据结构)配套实现程序111例 1.数组与字符串 2.栈与队列 3.链表LinkList 4.树与二叉树 5.排序相关算法 6. ...