你不知道的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。跟父元素无关。

 

 

如果还有其他特殊情况,欢迎大家评论指出哦。我会再做补充上去。

 

posted @ 2017-10-20 14:00    阅读(13175)  评论(2编辑  收藏  举报