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⽽⾔。
css固定定位
position为relative的⼦元素：
不管直接其⽗元素是否为定位元素，其width100%始终是相对于其直接⽗元素⽽⾔的。
总结：
1.当符合css默认“继承”的情况下（⼦元素必须是块级元素且⽆定位或浮动），是不需要写width属性，就可以默认“继承”的。
否则就要特殊声明⼀下width属性。
2.当使⽤width:100%的时候也要注意其基准点到底是谁：
（1）对于使⽤position:relative的⼦元素或浮动的⼦元素，其基准点始终是基于其直接⽗元素⽽⾔的，跟其⽗元素是否有定位⽆关。
（2）对于绝对定位position:absolute的⼦元素，其基准点是相对于离其最近的⼀层定位⽗元素⽽⾔。如果其所有⽗级元素均⽆定位，则是相对于body⽽⾔。
（3）对于使⽤position:fixed的⼦元素，其基准点就是body。跟⽗元素⽆关。
如果还有其他特殊情况，欢迎⼤家评论指出哦。我会再做补充上去。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论