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. <转>C/S架构分析

    系统架构师-基础到企业应用架构-客户端/服务器 开篇 上篇,我们介绍了,单机软件的架构,其实不管什么软件系统,都是为了解决实际中的一些问题,软件上为了更好的解决实际的问题才会产生,那么对于单机软 件的 ...

  2. 成本计划的输出（Project）

    <Project2016 企业项目管理实践>张会斌 董方好 编著 所谓"输出"就是把数据摆出来让人看,好吧,这种"看",可以直接在屏幕上看,也可以打 ...

  3. C语言程序与设计：统计素数并求和

    目录 C语言程序与设计:统计素数并求和 1.题目要求 2.分析 3.代码 C语言程序与设计:统计素数并求和 1.题目要求 输入两个正整数 m 和 n(1≤m≤n≤500),统计给定整数 m 和 n 区 ...

  4. ASP.NET MVC 导入Excel文件（完整版）

    View视图部分: <form method="post" enctype="multipart/form-data" action="/Pos ...

  5. JVM 常见面试题指南

    基础 1. JDK.JRE.JVM的关系是什么? 什么是 JVM? 英文名称 (Java Virtual Machine ),就是JAVA 虛拟机,它只识别 .class 类型文件,它 能够将 cla ...

  6. 我写了个IDEA开源插件，vo2dto 一键生成对象转换

    让人头疼的对象转换 头炸,po2vo.vo2do.do2dto,一堆对象属性,取出来塞进来.要不是为了 DDD 架构下的各个分层防腐,真想一竿子怼下去. 那上 BeanUtils.copyProper ...

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

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

  8. npm ERR! Error: EPERM: operation not permitted

    转载于:https://blog.csdn.net/qq_36772866/article/details/86934950 win10 在npm install时报错 解决方案 删除node-mou ...

  9. JAVA提取字符串中所有的URL链接，并加上a标签

    工具类 Patterns.java 1 package com.util; 2 3 import java.util.regex.Matcher; 4 import java.util.regex.P ...

  10. layDate设置开始日期选择框和结束日期选择框 之间的相互验证方法

    var startDate = laydate.render({ elem: '#_select_start_date', //结束日期框的ID type: 'date', done: functio ...