你不知道的css之 width “继承”篇。
众所周知，css的三大特性分别是 继承性，层叠性，和优先级。
那么这里就详细说一下css中width的继承性及其特殊情况。
继承性概念详解：css的继承性指的被包在内部的标签拥有外部标签的样式性，子元素可以继承父元素的属性。但也不是所有的css属性都有继承性的。
常见的拥有继承性的属性以 text- 、 font- 、line- 开头的属性较为常用。其中也有例外如a标签的字体颜色是不继承的，它有它自己的默认颜色-蓝色，下划线等自带样式，h1~h6的字体大小是不继承的，跟a标签一样都是有自带默认值，除非单独为其设置样式 才可以改变。
下面就来详细说一下width属性的“继承”关系。
大家在写代码过程中，是不是经常遇到 个一个父div设置了一个width值 如.father {width:200px}; 其子元素div只设置一个高度就会有宽高了。
正常场景下：
<style>
.father {
width:200px;
height:200px;
background-color:green;
}
.son {
height:100px;
background-color:red;
}
</style>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
效果图：
特殊场景一：
那么如果子元素是一个内联元素,或内联块元素呢？会是什么效果？
<style>
.father {
width:200px;
height:200px;
background-color:green;
}
.son {
display:inline-block;
height:100px;
background-color:red;
}
</style>
<body>
<div class="father">
<!-- <div class="son"></div> -->
<a href="#" class="son"></a>
</div>
</body>
你会发现只有一个绿色背景，红色子元素并没有显示出来。这表明只有块元素才可以默认“继承”其父元素的width.(项目中就遇到一个类似的坑，所以写此笔记记录一下)。
特殊场景二：
如果子元素是定位元素或浮动元素，其“继承性”还正常么？下面就用代码实验一下。
.father {
width:200px;
height:200px;
background-color:green;
}
.son {
/* position:absolute; */
float:left;
height:100px;
background-color:red;
}
</style>
<body>
<div class="father">
<!-- <div class="son"></div> -->
<div class="son">我是子元素</div>
</div>
</body>
实验结果发现，.son的元素宽度只是其字撑开的那么宽，并没有“继承”其父元素的宽度。可见，浮动元素和定位元素也是不默认（不自动）“继承”其父元素宽度的。
当我们遇到这三种情况的时候，就需要为这些元素单独设置一下width。width的单位有固定单位和相对单位，你可以把它设置称一个固定值（200px）,也可以把它设置为一个百分数（100%）。
那么问题又来了，百分数是一个相对单位，它的基准是什么呢？是相对于谁的百分比呢？
场景一中，其就是默认相对于其父元素.father的宽度。
场景二中，float的子元素其width 百分数也是始终相对于其父元素.father而言， 但定位的子元素就比较特殊了：
position为absolute的子元素：
(1) 如果.father是一个static的元素，则.son的宽100%是基于body说的。跟body的宽度一样大。
(2) 但是如果.father也是一个定位的元素，设置了relative或absolut或fixed，则.son的width100%就是相对于.father而言的。否则就是相对于离其最近的一个拥有定位元素的父元素而言。
position为fixed的子元素：
其width的100%是相对于body而言。
position为relative的子元素：
不管直接其父元素是否为定位元素，其width100%始终是相对于其直接父元素而言的。
总结：
1.当符合css默认“继承”的情况下（子元素必须是块级元素且无定位或浮动），是不需要写width属性，就可以默认“继承”的。
否则就要特殊声明一下width属性。
2.当使用width:100%的时候 也要注意其基准点到底是谁：
（1）对于使用position:relative的子元素或浮动的子元素,其基准点始终是基于其直接父元素而言的，跟其父元素是否有定位无关。
（2）对于绝对定位position:absolute的子元素，其基准点是相对于离其最近的一层定位父元素而言。如果其所有父级元素均无定位，则是相对于body而言。
（3）对于使用position:fixed的子元素，其基准点就是body。跟父元素无关。
如果还有其他特殊情况，欢迎大家评论指出哦。我会再做补充上去。
你不知道的css之 width “继承”篇。的更多相关文章
- 《你不知道的 CSS》之等比例缩放的盒子
你肯定已经知道,对于一个 img 元素而言,你可以单独地修改它的 width 或者 height 属性来设置它的大小,同时图片的比例还能够保持不变. 如下图所示,最上面是原始大小的图片,下面两张则分别 ...
- JS对象继承篇
JS对象继承篇 ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的 原型链 其基本思路是利用原型让一个引用类型继承另一个引用类型的属性和方法 function Person() ...
- CSS样式表继承详解
最近在恶补css样式表的基础知识.上次研究了css样式表之冲突问题详解 .这次是对 css 继承 特性的学习. 什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始. ...
- c++学习笔记之继承篇
title: c++学习笔记之继承篇 date: 2017-03-26 16:36:33 tags: [c++,继承,public,virtual,private,protected] categor ...
- CSS中width和height与盒子模型的关系
盒子模型 css中盒子模型包含属性margin.border.padding.width与height,他们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以 ...
- 【CSS系列】布局篇
一.让设计居中 1.使用自动空白边让设计居中 <style type="text/css"> body{ text-align:center; min-width:76 ...
- CSS的width:100%和width:auto区别
CSS的width:100%和width:auto区别 一. 问题 前段时间在调整树结构的时候,发现如果树的节点名称比较长的话在IE6下则不会撑开外面的元素,导致节点的名称只显示了一半,同时图标和 ...
- 8-C++远征之继承篇-学习笔记
C++远征之继承篇 开篇介绍 整个C++远征计划: 起航->离港->封装->继承 为什么要用继承? 为什么要有继承? 如何来定义基类 <----> 派生类? 基类到派生类 ...
- 前端css优先级以及继承
1.css优先级以及继承 css具有两大特性:继承性和层叠性 继承性 继承:给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承. 有一些属性是可以继承下来 : color . fo ...
随机推荐
- python 网络 socket
---恢复内容开始--- 1.socket Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口.在设计模式中,Socket其实就是一个门面模式,它把复杂的TCP/IP协议族隐藏 ...
- vue3.0环境最新安装步骤
安装最新的node.js版本: https://nodejs.org/dist/v8.11.3/node-v8.11.3-x64.msi 安装vue: npm install -g @vue/cli ...
- CPU硬件辅助虚拟化技术
目前主要有Intel的VT-x和AMD的AMD-V这两种技术.其核心思想都是通过引入新的指令和运行模式,使VMM和Guest OS分别运行在不同模式(ROOT模式和非ROOT模式)下,且Guest O ...
- firewall 如何开放端口
转自官方网页:http://www.firewalld.org/documentation/howto/open-a-port-or-service.html How to open port 80/ ...
- Linux 下Shell的学习3-优秀demo
优秀的DEMO cat /etc/init.d/functions -->里面有颜色定义cat /etc/rc.d/rc.sysinit cat /etc/init.d/nfscat /et ...
- + - ! function($) ()， function 前面的符号意思
如果在function之前加上感叹号 (!) 会怎么样?比如下面的代码: !function(){alert('iifksp')}() // true 在控制台运行后得到的值时true, ...
- How to Remove A Service Entry From Win10 Service List
Warning Please do this operation CAREFULLY, otherwise you may get something wrong with your system. ...
- 015.4守护线程和join
内容:守护线程.join方法#####################守护线程通过开启线程之前调用setDaemon()方法,变成后台线程,前台线程运行完,后台线程自动会结束#########例子 c ...
- Java虚拟机9：垃圾收集（GC）-4（垃圾收集器）
1.前言 垃圾收集器是前一章垃圾收集算法理论知识的具体实现了,不同虚拟机所提供的垃圾收集器可能会有很大差别,另外我们必须提前说明一个道理:没有最好的垃圾收集器,更加没有万能的收集器,只能选择对具体应用 ...
- Bean Definition从加载、解析、处理、注册到BeanFactory的过程。
为了弄清楚Bean是怎么来的,花费了大把功夫,现在要把Bean Definition的加载.解析.处理.注册到bean工厂的过程记下来.这只是bean definition 的加载.解析.处理.注册过 ...