css的继承之width属性（容易忽略）

约定不等于承诺〃 2021-09-29 16:40 602阅读 0赞

众所周知，css的三大特性分别是 **继承性，层叠性，和优先级**。

那么这里就详细说一下css中width的继承性及其特殊情况。

**继承性概念详解**：css的继承性指的被包在内部的标签拥有外部标签的样式性，子元素可以继承父元素的属性。但也不是所有的css属性都有继承性的。

常见的拥有继承性的属性以 text- 、 font- 、line- 开头的属性较为常用。其中也有例外如a标签的字体颜色是不继承的，它有它自己的默认颜色-蓝色，下划线等自带样式，h1~h6的字体大小是不继承的，跟a标签一样都是有自带默认值，除非单独为其设置样式 才可以改变。

下面就来详细说一下width属性的“继承”关系。

大家在写代码过程中，是不是经常遇到 个一个父div设置了一个width值 如.father \{width:200px\}; 其子元素div只设置一个高度就会有宽高了。

**正常场景下：**

![复制代码][copycode.gif]

![复制代码][copycode.gif]

效果图：

![954709-20171020113920896-1666147900.png][]

**特殊场景一：**

那么如果子元素是一个内联元素,或内联块元素呢？会是什么效果？

![复制代码][copycode.gif]

![复制代码][copycode.gif]

你会发现只有一个绿色背景，红色子元素并没有显示出来。这表明**只有块元素才可以默认“继承”其父元素的width**.(项目中就遇到一个类似的坑，所以写此笔记记录一下)。

**特殊场景二：**

如果子元素是定位元素或浮动元素，其“继承性”还正常么？下面就用代码实验一下。

![复制代码][copycode.gif]

.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>
    </body>

![复制代码][copycode.gif]

实验结果发现，.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。跟父元素无关。

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

转载于:https://www.cnblogs.com/gaogch/p/10652694.html

[copycode.gif]: /images/20210725/a25f7e4805404d038b07f3f82116db75.png
[954709-20171020113920896-1666147900.png]: /images/20210725/b93dee15f49744f49674cc796301be22.png