width100%怎么没有继承父元素的宽度（width属性为什么没有继承父元素的宽度）

width属性为什么没有继承父元素的宽度

当我们在开发网页时，经常会使用CSS的width属性来控制元素的宽度。但是有时候我们会发现，某个元素设置了宽度，但是它并没有继承父元素的宽度，这让人不禁产生疑问：为什么会这样呢？

1. 行级元素没有宽度

首先，我们需要知道一个概念，那就是行级元素没有宽度。换句话说，像超链接、span、strong等行级元素都没有width属性。

为了解决这个问题，我们可以使用display属性来改变元素的默认属性，将行级元素转换为块级元素。如下所示：

a {  display: block;  width: 100%;}

通过将超链接的display属性设置为block，超链接被转换为块级元素，此时就可以设置宽度了。

2. 绝对定位元素相对于其包含块定位

其次，我们需要知道绝对定位元素是相对于其包含块定位的，而不是相对于父元素的。

当一个元素被设置为绝对定位时，它的包含块是最近的一个position属性不为static（默认值）的祖先元素。如果没有这样的祖先元素，包含块就是html元素。

例如，下面这个例子中，子元素position设置为absolute，而父元素position设置为relative：

.parent {  position: relative;}.child {  position: absolute;  top: 0;  left: 0;  width: 100%;}

这时候，子元素的宽度是相对于其包含块（父元素）而言的，而不是相对于其他祖先元素（如body）。

3. 浮动元素脱离文档流

最后，我们需要知道浮动元素是脱离文档流的，它的宽度是由其内容决定的。

当一个元素被设置为浮动后，它会脱离文档流，其他元素会自动忽略它的存在，而它自身的宽度也就由内容自动决定了。

如果要让浮动元素占满父元素的宽度，可以将它的display属性设置为block，或者使用clear属性把它下方的元素强制换行，如下所示：

.float {  float: left;  width: 50%;  height: 100px;}.clear {  clear: both;}

以上是一些常见的情况，造成width属性没有继承父元素宽度的原因。当然，对于不同的情况，解决方法也有所不同，需要根据实际情况加以判断和处理。