css width继承性

最新推荐文章于 2024-09-29 13:19:13 发布

「已注销」

最新推荐文章于 2024-09-29 13:19:13 发布

阅读量561

点赞数 1

分类专栏： css属性继承文章标签： css width

css属性继承专栏收录该内容

1 篇文章 0 订阅

订阅专栏

你不知道的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的子元素：