在css中为什么为什么我只给父级元素body设置outline的样式时，他的子元素p却并没有继承他的outline样式？

来源：蜘蛛抓取(WebSpider) 时间：2022-06-24 09:28 标签： css选父元素

一.什么是 BFC机制

BFC(Block Formatting Context)，块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

触发条件 (以下任意一条)

当设置了父元素的宽度，子元素设置宽度为100%后再在加上子元素上添加padding或margin值就会溢出。举个例子：

这是因为设置了width: 100%;后已经将父元素占满，再添加margin值就会溢出（默认溢出值为左侧的margin值）

    设置他以后，相当于以怪异模式解析，border和padding全会在你设置的宽度内部。
  1. 子元素外添加一个div

我在举这个例子的时候发现了一个css hack（针对不同的浏览器/不同版本写相应的CSS code的过程）：。

父元素的盒子包含一个子元素盒子，给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，而子元素和父元素的边距则没有发生变化。

  1. 为父元素添加overflow：hidden；样式即可（完美）
  2. 为父元素或者子元素声明浮动（float：left；可用）
  3. 为父元素或者子元素声明绝对定位

子元素设置margin-top后，父元素跟随下移的问题

我要回帖

更多关于 css选父元素 的文章

 

随机推荐