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

时间: 2024-10-11 13:15:32

CSS中inherit指定继承的使用方法和auto的区别的相关文章

css中字体单位px,pt,em ,rem,百分比之间的区别和用法

css中字体单位px,pt,em ,rem,百分比之间的区别和用法 px 即像素,一般国内网站使用较多,默认大小是16px; pt 印刷行业常用单位 em  相对单位,相对父元素属性的单位 ,一般用于移动端布局 rem  结合相对定位和绝对定位的优势,相对根元素html,想要修改字体大小,只要修改html的大小就可以了 转换公式: pt=px乘以3/4 倍数em=倍数x16px 注意:1em=16px.那么12px=0.75em,10px=0.625em.   1.em的用法 在代码重写的过程中

css中属性值继承小解

继承:html元素可以从父元素那里继承一部分css属性,即使当前元素没有定义该属性. 1.css可以和不可以继承的属性 不可继承的:display.margin.border.padding.background.height.min-height.max-height.width.min-width.max-width.overflow.position.left.right.top.bottom.z-index.float.clear.table-layout.vertical-align.

EF Core 中DbContext不会跟踪聚合方法和Join方法返回的结果

EF Core中: 如果调用Queryable.Count等聚合方法,不会导致DbContext跟踪(track)任何实体. 此外调用Queryable.Join方法返回的匿名类型也不会被DbContext所跟踪(实测调用Queryable.Join方法返回EF Core中的实体类型也不会被DbContext所跟踪). Queryable.Count等聚合方法和Queryable.Join方法返回的结果不会被跟踪,原因是因为这两种方法返回的结果类型并没有被DbContext的OnModelCre

jQuery中prop方法和attr方法区别

attr方法用的是原生js中的getAttribute和setAttribute; prop方法相当于直接用.或者[]来访问/修改dom元素的属性, 所以它俩的区别相当于问原生js中的getAttribute和直接.来修改属性有什么区别: <input type="text" zs="user"> 1.在html中能看到的属性一定会在dom的属性节点中保存,本文称它为节点属性, 这些属性分为html自带的属性(如type),和自定义属性(如zs). 元素

CSS中display属性:block、inline和inline-block的区别

最近写HTML遇到一个问题:我想设置span的宽度和高度,但是在IE9和chrome下总是不起效果.代码和效果图如下: <head> <style> span{ background-color:#43be60; width:100px; height:50px; margin-top:20px; margin-left:20px; } </style> </head> <body> <div style="background-

JS中Date对象getYear()方法和getFullYear()方法区别

getYear() 使用getYear()函数的本意是获取年份,以2010年为例,如: var nowd = new Date(); var yf = nowd.getYear(); 在IE中是可以正确获取年份:2010,但是在FF等浏览器下则为:110. 原因则是 在 FF等浏览器内 getYear 返回的是 "当前年份-1900" 的值(即年份基数是1900) 而IE则是 当today的年份大于等于2000的时,直接将1900加上了,返回的 2010. getFullYear()

jQuery中bind方法和live方法区别解析

Javascript中的事件有它的独特性,有默认的执行事件,例如冒泡就是其中的一个.在很多比较复杂的应用程序中,停止事件的冒泡或捕获在程序开发当中是十分有用的,而在IE中有它的独特方式来阻止事件的冒泡(和其它浏览器方式不同). 以下给出一种通用的方式来实现阻止事件的冒泡,该通用方式接受一个参数[传递到事件处理程序中的事件对象],该函数处理取消事件冒泡的两种方式:标准的W3C方式和非标准的IE方式: 什么是事件冒泡[又称为事件传播]:当我们点击一个元素时,它会触发bind在该元素上的click事件

css 中包含(后代)选择器与子选择器的区别

子选择器:即大于号(>),用于选择指定标签元素的第一代子元素..span>li{XXXX}. 包含(后代)选择器:即加入空格,用于选择指定标签的后辈元素..fisrt span{XXXX}. 注意:这个选择器与子选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代.而后代选择器是作用于所有子后代元素.后代选择器通过空格来进行选择,而子选择器是通过">"进行选择. 总结:>作用于元素的第一代后代,空格作

TP框架部署模式下字段不更新及M方法和D方法区别

如果你在部署模式下面修改了数据表的字段信息,可能需要清空 Data/_fields 目录下面的缓存文件,让系统重新获取更新的数据表字段信息,否则会发生新增的字段无法写入数据库的问题. D方法,用于数据模型的实例化操作 D('所需模型')是new \当前模块\Model\所需模型的简化 当D方法找不到"\当前模块\Model\"类文件的时候,再去公共模块下找:\Common\Model\模型 再找不到,就调用M方法(即:实例化系统的\Think\Model基类) M方法,默认情况下是直接