width 继承父元素

2020-11-19  本文已影响0人  想溜了的蜗牛

CSS入门简单,精通是真难。

需求: fixed 定位的结点需要继承父结点的宽度,代码的层级有点深。

使用百分比为单位时, fixed 元素的宽度不像 absolute 是相对于父元素宽度,而是相对于body 。
这里直接引用文章你不知道的css之 width “继承”篇的总结:

总结:
一.当符合css默认“继承”的情况下(子元素必须是块级元素且无定位或浮动),是不需要写width属性,就可以默认“继承”的。
    否则就要特殊声明一下width属性。
二.当使用 width:100% 的时候 也要注意其基准点到底是谁:
(1)对于使用 position:relative 的子元素或浮动的子元素,其基准点始终是基于其直接父元素而言的,跟其父元素是否有定位无关。
(2)对于绝对定位position:absolute的子元素,其基准点是相对于离其最近的一层定位父元素而言。如果其所有父级元素均无定位,则是相对于body而言。
(3)对于使用position:fixed的子元素,其基准点就是body。跟父元素无关。

针对 【总结一】 做一些补充:

  1. 子结点中宽度继承时默认是 auto, 即是元素的内容的宽度,如果需要和父结点一致,需要明确书写 width: inherit;
  2. 对于absolute, fixed定位而言,也是可以继承父元素的宽度的,

测试代码:
css code:

body {
  width: 100%;
}
.parent{
/*   margin: 50px; */
  width: 30%;
  height: 200px;
  border: 1px solid green;
}
.child {
  position: fixed;
  top: 100px;
/*   left: 0; */
  background: red;
  width: inherit;
}

html code:

<div class="parent">
  <div class="child">This DIV</div>
</div>

codepen 示例,可以试验下。

还是有不少疑问,百分比 按理是可以继承的(codepen的示例),但react 这个项目继承不了,定位是按body来算的,是按上边的总结来的。
有最后的可以解说 下,感谢

上一篇下一篇

猜你喜欢

热点阅读