大家是不是和我一样,在刚开始学习css的时候,在css文件开头是不是经常看到这样的代码: * {margin:0 px; padding:0 px;}  。 在接下来设置颜色字体时在body元素的css样式中是不是又经常看到这样的代码:body{ color:颜色值}  如果子元素没有特别声明的话,整篇网页的文字都是这种颜色。

如今我恍然大悟,原来开头就来这段代码就是取消掉所有元素的默认内外边距。默认的属性即本文标题中的auto。接着在body中设置字体颜色color后通篇文字都是该颜色,这就是标题中的inherit(继承父元素的属性)。继承并不单继承父元素,也包括父元素的父元素,也就是祖元素。

这么一来,脑海中就能浮现出经常使用的元素属性中哪些是默认不继承auto,哪些是默认继承inherit。

常见的默认继承的有字体,包括font-size,font-family,font-weight等,还有上面提到的color,还有透明度opacity,这个深有体会,之前把一个<div>设置为半透明,结果,<div>中的其他子元素也都跟着透明了。

常见的默认不继承的有margin,还有padding,width,height还有display,等,很多。

下图是业内大牛司徒正美总结的(这是司徒哥的原文):

默认继承的有:

不继承的有:

inherit与auto的更多相关文章

  1. CSS的inherit与auto使用分析

    一个很显浅的寓言,千年老树,电打雷劈,屹立不倒,却毁于蝼蚁的侵袭之下.自以为精通CSS的人,常常被一些小问题搞到头晕脑胀. 通常是一个很小的数值,经过层层放大歪曲后,整个布局就走形了.CSS是一门很简 ...

  2. CSS中inherit指定继承的使用方法和auto的区别

    CSS中的每个属性都有一个特定值"inherit",其含义是指定继承父元素的相应属性,使用inherit一方面在代码上能地表明要继承于父元素的样式属性,另一方面也使子元素继承了那些 ...

  3. CSS——关于z-index及层叠上下文(stacking context)

    以下内容根据CSS规范翻译. z-index 'z-index'Value: auto | <integer> | inheritInitial: autoApplies to: posi ...

  4. 【读书笔记《Bootstrap 实战》】5.电子商务网站

    构建了公司网站之后,接下来就可以考虑设计一个在线商店了. 此次的设计以上一章的设计为基础, 只是添加了一个包含如下元素的新页面: □ 包含商品小图.标题和说明的产品网格: □ 位于左侧的变懒,用于按类 ...

  5. [转]AngularJS fixed header scrollable table directive

    本文转自:http://pointblankdevelopment.com.au/blog/angularjs-fixed-header-scrollable-table-directive This ...

  6. css中width的计算方式,以及width:100%的参考系

    PS:测试浏览器均为chrome. 首先说下负margin的影响. 正常html页面在显示时,默认是根据文档流的形式显示的.文档流横向显示时,会有一个元素横向排列的基准线,并且以最高元素的vertic ...

  7. Caffe学习系列(19): 绘制loss和accuracy曲线

    如同前几篇的可视化,这里采用的也是jupyter notebook来进行曲线绘制. // In [1]: #加载必要的库 import numpy as np import matplotlib.py ...

  8. Caffe学习系列(17):模型各层数据和参数可视化

    cifar10的各层数据和参数可视化 .caret,.dropup>.btn>.caret{border-top-color:#000!important}.label{border:1p ...

  9. Caffe学习系列(16):caffemodel可视化

    通过前面的学习,我们已经能够正常训练各种数据了.设置好solver.prototxt后,我们可以把训练好的模型保存起来,如lenet_iter_10000.caffemodel. 训练多少次就自动保存 ...

随机推荐

  1. c++ 状态模式(state)

    /************************************************************************/ /* 状态模式 */ /************* ...

  2. ICMP type code 对应表(转)

    ICMP类型 TYPE CODE Description Query Error 0 0 Echo Reply——回显应答(Ping应答) x   3 0 Network Unreachable——网 ...

  3. Codeforces Round #197 (Div. 2) (A、B、C、D、E五题合集)

    A. Helpful Maths 题目大意 给一个连加计算式,只包含数字 1.2.3,要求重新排序,使得连加的数字从小到大 做法分析 把所有的数字记录下来,从小到大排序输出即可 参考代码 #inclu ...

  4. PowerPoint 打开文档发现.pptx中胡内容有问题

    一.问题的提出 有一个文件,在window 7操作系统中通过邮箱地址保存到本地,结果打开的时候出现[PowerPoint 打开文档发现 文件.pptx中胡内容有问题] 然后提示[如果您信任此演示文稿的 ...

  5. Nginx+Keepalived实现站点高可用

    http://seanlook.com/2015/05/18/nginx-keepalived-ha/ http://blog.csdn.net/conquer0715/article/details ...

  6. IE代理文件自动设置

    想如果代理可用就使用代理,代理不可用就直接连接网络. 新建文件放入javascript代码,保存为proxy.pac,保存路径c:\proxy.pac function FindProxyForURL ...

  7. 使用NPOI导出excel

    NPOI下载地址http://npoi.codeplex.com/releases 从项目中引用NPOI.bll和NPOI.OOXML.bll 引用命名控件 using NPOI.HSSF.UserM ...

  8. gulp-notify处理报错----gulp系列(二)

    上一节,以less为例,入门了gulp,并为任务结构做了抽离. 前端们,gulp该用起来了,简单的demo入门——gulp系列(一) 本节学习下gulp-notify,官方这样解释的: gulp-no ...

  9. Web 项目可能会用到的20款优秀的开源工具

    开源的应用程序和它们的源代码可以免费获得,因为版权是属于任何进行过修改或者提交代码的人.大多数提供开源软件的公司都可以建立行业标准,因此可以获得有利的竞争优势. 很多的开源应用程序和工具都有很强的替代 ...

  10. Android 学习笔记之Volley开源框架解析(五)

    学习内容: 1.PoolingByteArrayOutputStream 2.ByteArrayPool 3.HttpStack 4.HurlStack 5.HttpHeaderParser   前面 ...