CSS布局的那些事

  1. 位置
  2. 移动
  3. 宽度和高度 即大小
  4. css的"图层"
  5. BFC
  6. position
  7. float
  8. flex
  9. grid
  10. 容器的概念
  11. 盒子模型
  12. scroll、client

BFC

BFC规定了内部的Block Box如何布局。
定位方案:

内部的Box会在垂直方向上一个接一个放置。

Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的margin会发生重叠。

每个元素的margin box 的左边,与包含块border box的左边相接触。

BFC的区域不会与float box重叠。

BFC是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。

计算BFC的高度时,浮动元素也会参与计算。
---------

满足下列条件之一就可触发BFC

根元素,即 html

float的值不为none(默认)

overflow的值不为visible(默认)

display的值为inline-block、table-cell、table-caption

position的值为absolute或fixed
*   弹性元素display 为 `flex` 或 `inline-flex`元素的直接子元素)
*   网格元素display 为 `grid` 或 `inline-grid` 元素的直接子元素)


文档流≈图层
把一个形成了BFC的Box看做是一个图层
处于不同图层的box不会相互影响,即他们的margin、padding等不相互影响,但有覆盖的优先级,哪个在上,哪个在下(z-index)
一个图层可能包含的box类型

  1. 普通类型box
  2. 形成BFC的box
    2.1float
    2.2position:absolute
    2.3 overflow、flex、grid

不同box本身移动方式移动的相对点(参照物)
1.普通类型box 通过margin、padding,相对元素本身在父元素中的位置
2.BFC
1.overflow、Flex、grid本身都和普通元素一致
2.position为absolute的。方式top,left。相对位置对第一个定位父元素
3.float。方式left,right。相对位置是父元素


处于同一图层的box的相互影响
1.普通类型box margin的相互影响(这个里把flex、overflow、grid也算普通类型,因为它们在同一图层的相互影响方式和普通类型效果一样)
2.普通类型和形成BFC的box的相互影响
3.形成了BFC的但类型不同的box相互影响
4.形成了BFC的相同类型的box的相互影响
同级影响,父子影响(即嵌套)
那么这里就主要关注三个类型:普通类型、float、absolute
从简单的开始
普通类型相互影响不谈。要注意margin坍塌(重叠)问题
absolute:完全不影响,从仿佛本图层上消失,会发生遮盖,本图层(BFC)在计算内容时是不算这个的
float:本图层(BFC)在计算内容时是计算float的(如果父元素形成了BFC那么是计算内容时是计算float的的,但父元素不是BFC时是不计算的)
float也是会脱离本图层,生成图层,和absolute效果相似,但是问题在于文字的环绕,与其他box则就像absolute一样会发生覆盖,但覆盖的是box本身,而不是box里面的内容(被覆盖box里面的box),它会把内容都挤出来,而absolute覆盖了就是覆盖了。


注1:所谓图层并不准确,只是一种类比。
注2:BFC许多特性是可以嵌套递归推解的
注3:float难用的问题在于,它在一定程度上是符合BFC特性的。但是又表现出了一些不一致的地方
注4:一些组合手段。目的保持父元素在在父元素图层表现出和普通类型box的一致性,并且创建新的图层(BFC)。比如1.父元素overflow:hidden。2.父元素:relative(方便定位与移动),子absolute。3.使用float为子的直接父元素最好为BFC
注5:用overflow,position,float来进行布局是不推荐的。未来的方向应该还是flex和grid(更加方便,更加合理直观)。但由于浏览器兼容性以及旧api的存在,还是时间来慢慢变化。

你可能感兴趣的:(CSS布局的那些事)