你不知道的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 ...
随机推荐
- vue知识day1
HTML语义.CSS:样式 js:行为 jQuery:简化了js操作 boostrap :框架 ,以类方式展现 react:facebook 公司的产品 angular:谷歌公司产品 vue:作者尤雨 ...
- 剑指offer相关问题
1. 变态跳台阶 Fib(n) = Fib(n-1)+Fib(n-2)+Fib(n-3)+..........+Fib(n-n) =Fib(0)+Fib(1)+Fib(2)+..... ...
- 【转】ISMS方针、手册、程序文件模板
<ISMS方针.手册.程序文件模板> 1 信息安全管理手册 2 信息安全适用性声明 3 信息安全管理体系程序文件 3.01文件管理程序 3.02记录管理程序 3.03纠正措施管理程序 3. ...
- Python初学者第十八天 函数（2）
18day 函数 1.函数的返回值:return a.函数外的代码想要获取函数的返回结果时,即可使用return语句 b.函数中如遇到return后,会停止执行,并返回结果.所以若函数未使用retur ...
- 第一个c程序和vs2017 在打开MFC rc文件时找不到rcdll.dl
第一个c程序 #include<stdio.h> int main() { ; ; printf_s("请输入两个数字:"); scanf_s("%d,%d& ...
- 沉淀，再出发：Java基础知识汇总
沉淀,再出发:Java基础知识汇总 一.前言 不管走得多远,基础知识是最重要的,这些知识就是建造一座座高楼大厦的基石和钢筋水泥.对于Java这门包含了编程方方面面的语言,有着太多的基础知识了,从最初的 ...
- 自动化测试全套流程（一）-搭建Jenkins环境
前提 既然要做自动化测试,那我们就做得彻底一些,将整套系统部署在Linux服务器上,在搭建Jenkins环境之前,我已经通过VirtualBox安装了一个CentOS的服务器,搭建Jenkins是基于 ...
- execl execv
int execl(const char *path, const char *arg, ...); 函数说明 execl()其中后缀"l"代表list也就是参数列表的意思第一参数 ...
- luogu P1262 间谍网络
嘟嘟嘟 建图还是很明显的. 接着分两种情况: 1.图中不存在环:那么只要收买那些入度为0的点.如果这些点有的不能收买.就不能控制所有间谍. 2.图中存在环,那么对于这些在环中的点,我们只要收买数额最少 ...
- Odoo中的onchange
转载请注明原文地址:https://www.cnblogs.com/cnodoo/p/9280723.html [onchange=前端js函数,可以实现前端实时更新以及修改验证] onchange ...