盒子常规流和浮动基础

块盒在常规流下的位置

  • 盒子在包含块的垂直方向上摆放
  • 依次摆放:按照HTML元素的书写顺序从上到下摆放
  • 盒子在包含块中占据的尺寸是整个盒子的尺寸

  • 垂直方向上若两个外边相邻,则进行合并(折叠)

  • 垂直方向:水平方向上外边距不会合并
  • 外边距相距:两个外边距之间没有border、padding和content

  • 合并:均正取大,均负取小,一正一负相加

盒模型中的auto值-水平方向

常规流盒子水平方向上的尺寸,必须等于包含块的宽度

垂直方向

margin为auto:0px

height为auto:适应内容的高度

浮动

当元素属性取值为left、right时,元素属于浮动定位。

     float:不继承
            默认值为none
            取值none(不动)left(左浮动)right(右浮动)
盒子位置

右浮动 先向上再向右

左浮动 先向上再向左

浮动盒子的顶边不得高于上一个盒子的顶边

若剩余空间无法放下浮动的盒子,则该盒子向下移动,直到具备足够的空间能容纳盒子,然后再向左或向右移动

猜你喜欢

转载自www.cnblogs.com/liuyizhou/p/9222209.html