inherit与auto
大家是不是和我一样,在刚开始学习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的更多相关文章
- CSS的inherit与auto使用分析
一个很显浅的寓言,千年老树,电打雷劈,屹立不倒,却毁于蝼蚁的侵袭之下.自以为精通CSS的人,常常被一些小问题搞到头晕脑胀. 通常是一个很小的数值,经过层层放大歪曲后,整个布局就走形了.CSS是一门很简 ...
- CSS中inherit指定继承的使用方法和auto的区别
CSS中的每个属性都有一个特定值"inherit",其含义是指定继承父元素的相应属性,使用inherit一方面在代码上能地表明要继承于父元素的样式属性,另一方面也使子元素继承了那些 ...
- CSS——关于z-index及层叠上下文(stacking context)
以下内容根据CSS规范翻译. z-index 'z-index'Value: auto | <integer> | inheritInitial: autoApplies to: posi ...
- 【读书笔记《Bootstrap 实战》】5.电子商务网站
构建了公司网站之后,接下来就可以考虑设计一个在线商店了. 此次的设计以上一章的设计为基础, 只是添加了一个包含如下元素的新页面: □ 包含商品小图.标题和说明的产品网格: □ 位于左侧的变懒,用于按类 ...
- [转]AngularJS fixed header scrollable table directive
本文转自:http://pointblankdevelopment.com.au/blog/angularjs-fixed-header-scrollable-table-directive This ...
- css中width的计算方式,以及width:100%的参考系
PS:测试浏览器均为chrome. 首先说下负margin的影响. 正常html页面在显示时,默认是根据文档流的形式显示的.文档流横向显示时,会有一个元素横向排列的基准线,并且以最高元素的vertic ...
- Caffe学习系列(19): 绘制loss和accuracy曲线
如同前几篇的可视化,这里采用的也是jupyter notebook来进行曲线绘制. // In [1]: #加载必要的库 import numpy as np import matplotlib.py ...
- Caffe学习系列(17):模型各层数据和参数可视化
cifar10的各层数据和参数可视化 .caret,.dropup>.btn>.caret{border-top-color:#000!important}.label{border:1p ...
- Caffe学习系列(16):caffemodel可视化
通过前面的学习,我们已经能够正常训练各种数据了.设置好solver.prototxt后,我们可以把训练好的模型保存起来,如lenet_iter_10000.caffemodel. 训练多少次就自动保存 ...
随机推荐
- 自定义控件的自定义的属性attrs.xml下的declare-styleable中format详解
最近在摸索自定义控件,查找到一些自定义属性的一些资料,解决转载记载下来:看了此详解才方便理解! 我们在做项目的时候,由于android自带的属性不能满足需求,android提供了自定义属性的方法,其中 ...
- python 字符串替换
字符串替换可以用内置的方法和正则表达式完成.1用字符串本身的replace方法: a = 'hello word'b = a.replace('word','python')print b 2用正则表 ...
- js map
// js通用方法 // map对象定义 function Map() { var struct = function(key, value) { this.key = key; this.value ...
- [原]Android Native Debug
1,安装adt插件,cdt插件2,SDK目录配置: Eclipse文件菜单选择“Window”--->“Preferences”--->“Android”--->设置“SDK Loc ...
- CSDN 2013年度博客之星评选——分享几张厦门杭州的美图
亲爱的小伙伴们,作者在6号至20号,一直在休假中,出去也没带电脑,今天回家意外的发现自己有幸成为“CSDN 2013年度博客之星评选”的候选人,在此也谢谢各位小伙伴们的支持,谢谢CSDN的鼓励.我的投 ...
- datatables.js 简单使用--多选框和服务器端分页
说明:datatables是一款jQuery表格插件.感觉EasyUI的datagrid更易用 内容:多选框和服务器端分页 缘由:写这篇博客的原因是datatables的文档写的不怎么样,找东西很麻烦 ...
- mongodb 监控分析命令
1. bin/mongostate 2.开启慢查询用于调试 正式要关闭 可以在客户端调用db.setProfilingLevel(级别) 命令来实时配置.可以通过db.getProfilingLeve ...
- 后端码农谈前端(HTML篇)第三课:常见属性
一.HTML全局属性 1.核心属性 属性 描述 id 设置元素的唯一 id. class 设置元素的一个或多个类名(引用样式表中的类). style 设置元素的行内样式(CSS内联样式). title ...
- Linux的一些命令
程序 # rpm -qa # 查看所有安装的软件包 系统 # uname -a # 查看内核/操作系统/CPU信息 # head -n 1 / ...
- sourceinsight技巧
Source Insight实质上是一个支持多种开发语言(java,c ,c++等等)的编辑器,只不过由于其查找.定位.彩色显示等功能的强大,常被我们当成源代码阅读工具使用. 所以,为了有效的阅读源程 ...