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