大家是不是和我一样,在刚开始学习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. 在多线程环境中使用CoreData

    在多线程环境中使用CoreData BY 子非鱼 · 2014 年 10 月 13 日   上回书说道,其实CoreData学起来也没有很复杂,我们其实增删改查都和别的ORM大同小异.但是世界总是很复 ...

  2. Oracle数据库说明

  3. Outer Join Query Over Dblink Can Fail With ORA-904 (Doc ID 730256.1)

    Outer Join Query Over Dblink Can Fail With ORA-904 (Doc ID 730256.1) To Bottom Modified:03-May-2013T ...

  4. WPF中模板选择和DataContext的一些使用

    如图样: View结构 MainView(MainViewModel)|---Guide1View(Guide1ViewModel)|---Guide2View(Guide2ViewModel) |- ...

  5. tcp为什要三次握手

    准备知识: 单工:信息只能单向传递.发送-->接收,单向,不能返回响应. 双工:指的是信息可双向发送. 全双工:信息可同时双向传递. 半双工:不能同时,单行道,一边传输完了,另一边才能发起传输. ...

  6. JS基础回顾,小练习(判断数组,以及函数)

    追梦子博客版权所有. // 判断arr是否为一个数组,返回一个bool值 方法1: function isArray(arr) { var str = arr.__proto__.constructo ...

  7. hibernate的多对多例子讲解(加图片)

    在hibernate中也有多对多的关系.但是这样关系执行的效率不高,所以我们可以通过两个多对1或者两个1对多来实现. 在现实生活中多对多的关系也比较常见.比如说老师和学生.一个老师有多个学生,一个学生 ...

  8. 前端模块化:RequireJS

    前言 前端模块化能解决什么问题? 模块的版本管理 提高可维护性 -- 通过模块化,可以让每个文件职责单一,非常有利于代码的维护 按需加载 -- 提高显示效率 更好的依赖处理 -- 传统的开发模式,如果 ...

  9. form表单action提交表单,页面不跳转且表单数据含文件的处理方法

    在最近的项目中需要将含 input[type='file']的表单提交给后台 ,并且后台需要将文件存储在数据库中.之前所用的方法都是先将文件上传到七牛服务器上,然后七牛会返回文件的下载地址,在提交表单 ...

  10. Spring Remoting: HTTP Invoker--转

    原文地址:http://www.studytrails.com/frameworks/spring/spring-remoting-http-invoker.jsp Concept Overview ...