你不知道的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;
css固定定位
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。跟⽗元素⽆关。
如果还有其他特殊情况,欢迎⼤家评论指出哦。我会再做补充上去。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。