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. 训练多少次就自动保存 ...
随机推荐
- RTImageAssets 自动生成 AppIcon 和 @2x @1x 比例图片
下载地址:https://github.com/rickytan/RTImageAssets 此插件用来生成 @3x 的图片资源对应的 @2x 和 @1x 版本,只要拖拽高清图到 @3x 的位置上,然 ...
- FAILURE: Build failed with an exception.
FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':app:installD ...
- 文件比对工具(Beyond Compare)
文件比对工具: 工具名称:Beyond Compare 版本号:v3.3.13 下载地址:http://i.cnblogs.com/Files.aspx 官网最新版本下载地址:http://www.s ...
- IOS学习之路七(使用 Operation 异步运行任务)
在 application delegate 头文件(.h)中声明一个 operation 队列和两个 invocation operations: #import <UIKit/UIKit.h ...
- Adroid学习系列-入门(1)
1. 安装 安装Eclipse,安装Adroid插件.安装Adroid SDK. 2. 项目目录说明 2.1. 建立Adroid项目 与一般的Java项目一样 )src文件夹是项目的所 ...
- 设计师必备!免费下载 PSD 素材的32个网站
今天我想和大家分享一组可以免费下载 PSD 图形素材的最好的网站. PSD 文件是非常有用的资源,因为你可以看到所有的层,使用了什么技术来创建出这些作品和效果. 某些列出的网站可能已是众所周知的,但你 ...
- 让JS写的更接近OOP
下面这段代码就是利用JS原型对象,来实现的类的继承DEMO $ 为jquery对象 ////公共方法 // $.oop.newClass=function newClass(obj) { // fun ...
- ASP.NET HTTP模拟提交通用类 GET POST
用法: WebRequestSugar ws = new WebRequestSugar(); //可选参数 //ws.SetAccept //ws.SetContentType //ws.SetC ...
- 让 ASP.NET JS验证和服务端的 双验证 更简单
只用JavaScript验证安全不安全谁都知道,答案是不安全,非常的不安全.因为在客户端进行的验证相当于“让用户自己验证自己”,很明显是不靠谱的.你不能避免一些恶意用户人为的修改自己的表单进行欺骗,也 ...
- 1117 新冲刺 day1
项目需求确定 现阶段我们进行的项目是到店点餐系统.主要是开发手机端app为用户提供方便快捷的点餐服务.免去顾客到店后遇到因吃饭的人太多而找不到服务人员点餐的窘境.减少了服务人员因为忙碌而导致下单慢的问 ...