你不知道的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 ...
随机推荐
- Spring3实战第一章 Aop 切面 XML配置
刚看spring3实战书籍第一章 切面以前没有关注过 现在看到了 随手试验一下 AOP AOP(Aspect Oriented Programming),即面向切面编程,可以说是OOP(Objec ...
- Java容器之HashMap源码分析
在java的容器框架中,hashMap是最常用的容器之一,下面我们就来深入了解下它的数据结构和实现原理 先看下HashMap的继承结构图 下面针对各个实现类的特点进行下说明:1)HashMap: 它是 ...
- base64编码以及url safe base64是怎么工作的?
原文转自 http://www.yanshiba.com/archives/638 1: 为什么需要base64? ASCII码一共规定了128个字符的编码,这128个符号,范围在[0,127]之间. ...
- 存储过程存储过程需要用两个'',先where再Group，再Order by
存储过程需要用两个'',先where再Group,再Order by 未完,待续
- Python super执行基类的构造方法
有一个需求是这样的,先有一个Machine的类,有通用的name.position.date属性,然后又出现了一个Server的类继承Machine类,但是Server类多出一个ipaddr的属性,所 ...
- Python初学者第十六天 文件处理操作练习
16day 练习:模拟登陆 1.用户输入账号密码进行登陆: 2.用户信息保存在文件内: 3.用户密码输入错误三次后,锁定用户,下次登陆,检测到这个用户再也登陆不了 #获取用户名及密码f_user = ...
- 外部主机无法访问IIS发布的网站
在IIS中发布网站,在本地可以直接访问,但是其他主机不能访问改发布的网站. 此问题一般是IIS的配置或者防火墙的配置的原因. 如果禁用了以下防火墙入站规则会导致外部主机无法访问本地发布的网 ...
- redis主从，哨兵，集群
本次所有操作在docker下进行,搭建方便,迅速构建redis集群. 1. docker安装redis 获取redis:latest(使用官方最新的) 镜像 $ docker pull redis r ...
- web安全职位面试题目汇总
Domain 解释一下同源策略 同源策略,那些东西是同源可以获取到的 如果子域名和顶级域名不同源,在哪里可以设置叫他们同源 如何设置可以跨域请求数据?jsonp是做什么的? Ajax Ajax是否遵循 ...
- python安装 numpy&安装matplotlib& scipy
numpy安装 下载地址:https://pypi.python.org/pypi/numpy(各取所需) copy安装目录.eg:鄙人的D:\python3.6.1\Scripts pip inst ...