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. 训练多少次就自动保存 ...
随机推荐
- mac x Yosemide(10.10) 下安装 jdk 1.7 (jdk 1.8)的方法
当我们想在mac x yosemide 系统中更新jdk到1.7(1.8)的时候,会弹出下面的错误提示 解决这个问题的办法如下: 1.下载 好jdk 1.7(1.8) 地址:http://www.or ...
- Sql触发器模板
触发器是一种特殊类型的存储过程,它不同于之前的我们介绍的存储过程. 触发器主要是通过事件进行触发被自动调用执行的.而存储过程可以通过存储过程的名称被调用. SQL Server 2005中触发器可以分 ...
- 搭建WebRtc环境
0.前言 这次的需求,准备做的是一个类似与QQ视频一样的点对点视频聊天.这几天了解了一些知识后,决定使用HTML5新支持的WebRtc来作为视频通讯.客户端使用支持HTML5浏览器即可.服务器段需要提 ...
- MyBatis知多少(18)MyBatis系统
小型.简单系统 小型应用程序通常只涉及单个数据库,只有一些相当简单的用户界面和领域模型.它的业务逻辑非常简单,甚至对一些简单的CRUD (Create, Read, Update, Delete:增删 ...
- js中的包装对象。
我们都知道在js中普通类型的变量是没有属性和方法的,然后有时却并不是这样. var str = "努力,奋斗"; console.log(str.length); var num ...
- mockito
import org.junit.Assert;import org.junit.Before;import org.junit.Test;import org.junit.runner.RunWit ...
- ES6入门系列一(基础)
1.let命令 Tips: 块级作用域(只在当前块中有效) 不会变量提升(必须先申明在使用) 让变量独占该块,不再受外部影响 不允许重复声明 总之:let更像我们熟知的静态语言的的变量声明指令 ES6 ...
- 自定义能够for each的类,C#,Java,C++,C++/cli的实现方法
自定义类能够被for each,应该算是个老生常谈的话题了,相关的资料都很多,不过这里整理总结主流语言的不同实现方式,并比较部分细节上的差异. 第一种语言,也是实现起来最简单的Java语言.在Java ...
- LeetCode——Jump Game
Description: Given an array of non-negative integers, you are initially positioned at the first inde ...
- IE下点击scrollbar会导致焦点移动到body
现象 IE这货果然与众不同,当光标焦点在input时,点击同页面内其他区域的scrollbar,会导致焦点移动到body,从而触发绑定在input上的blur事件,如果input中的值与之前不同,甚至 ...